1

I'm trying to create an 8bit cave image in Illustrator for a fun little 404 page but am having trouble on export. The file in Illustrator looks like this screenshot:

cave

However, when I export the image as a png, I see white boxes around each pixel of the image:enter image description here

I exported the image as svg as well, and the white boxes also appear there. It seems like that's because each of the rect elements has a slight bit of space between them:

    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 692 466">
      <defs>
        <style>
          .cls-1 {
            fill: #ffebb2;
          }

          .cls-2 {
            fill: #ebd798;
          }

          .cls-3 {
            fill: #cbb076;
          }
        </style>
      </defs>
      <title>cave</title>
      <g>
        <rect class="cls-1" x="681.97" y="455.87" width="10.03" height="10.13"/>
        <rect class="cls-2" x="671.94" y="455.87" width="10.03" height="10.13"/>
        <rect class="cls-2" x="661.91" y="455.87" width="10.03" height="10.13"/>
        <rect class="cls-2" x="651.88" y="455.87" width="10.03" height="10.13"/>
        <rect class="cls-3" x="641.86" y="455.87" width="10.03" height="10.13"/>
        {...MORE SVG...}

I believe I could fix this problem with some scripting by giving each rect element a nice integer height and width and then 'snapping' each of those rects to a perfectly round position on the x, y axis. I would much prefer to fix the problem in Illustrator however, as I want to get better at it.

Does anyone know how I can remove the white boxes that surround each rect element in the exported svg? I tried Object -> Make Pixel Perfect but that made even larger white boxes around the exported rects. Any help others can provide would be very helpful!

Improve this question

3 Answers 3

Reset to default
1

After thinking about this for a moment, I realized those white boxes could be the result of the stroke style on the rect elements. I opened up my svg and added rect {stroke:red}; to the inline styles and sure enough I saw the whole grid light up:

<svg data-name="Layer 1" id="Layer_1" viewbox="0 0 692 466" xmlns="http://www.w3.org/2000/svg">
   <defs>
    <style>
    rect {
      stroke: red;
    }

    .cls-1 {
        fill: #ffebb2;
      }

enter image description here

This told me that the stroke styles were creating that grid effect. From there I realized that if I set the stroke attribute of each element to its fill color, the grid would go away, and sure enough it did:

<svg data-name="Cave" id="cave" viewbox="0 0 692 466" xmlns="http://www.w3.org/2000/svg">
   <defs>
    <style>
     .cls-1 {
        fill: #ffebb2;
        stroke: #ffebb2;
      }

      .cls-2 {
        fill: #ebd798;
        stroke: #ebd798;
      }

Here's the svg in Chrome:enter image description here

I'd still like to know how to do this in Illustrator, but am happy to have worked it out.

Improve this answer
2
0

Try aligning the vector boxes to pixel grid by selecting the entire thing is finding the "align to pixel grid" option. It may be the solution, or it may not.

Improve this answer
0

I can show two ways to do it. These are described in the picture below.

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.