I used the grid tool to create a grid of squares for a texture, but I'm seeing very clear fine lines rendering at the edges between some - not all - of the rows and columns.

enter image description here

Unfortunately, these lines also render in Chrome (haven't checked other browsers). The lines appear in different places depending on the size that I render the vector image, just as they change when I zoom in and out from the shape in illustrator. This feels like a sub-pixel rendering problem.

Is this a "necessary evil" when using vector? Or is there a solution?

I tried things that I thought might solve sub pixel rendering problems such as:

  • applying a very small CSS transform to the content.
  • applying a 0.1px CSS blur filter to the content.

But that doesn't get rid of or effect the lines in any way.

  • Maybe adding a stroke between all of the rows and columns might solve this, but I really need to have this image perfectly simple - there are no other outlines present in my purely flat, ultra-simple interface design.
    – J.Todd
    May 27 '16 at 15:28
  • What image type is it? I have a feeling it might be 32 bit PNG and the alpha channel is messing you up. So try making it a JPG? May 27 '16 at 15:58
  • @PixelSnader vector (svg)
    – J.Todd
    May 27 '16 at 16:08
  • @viziionary that also has transparency. I imagine the problem to be that square Azure and Blue share 1 pixel. Let's say a 1:2 ratio. A is rendered at 0.33 opacity, on top of that B is 0.66. But when you overlay those you have 0.33+(0.66x0.66=0.44) = only 0.77 coverage. May 27 '16 at 16:53

I think, from looking at other similar questions, there isnt any perfect solution, but in my case I was able to, since vector data is so small, duplicate the grid to a size where it will never have to repeat to cover the background on any screen size (because you would still get lines at the edges of the image where there cant be a background color saving you, and then place a shape of similar color to my pallet behind the the entire grid for the background.

This effectively solves my problem. It isnt perfect, if you look close you can see the lines between shapes, but because of the background its not obvious to the normal user.

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