I created a polygonal logo using many shapes, which I'm exporting for web in SVG format.

My problem is that, although the edges of each polygonal face/shape is at the same position on illustrator (snapped), when I export for web, a small space appears in between the edges.

In Illustrator, at max zoom:

enter image description here

On the web browser:

enter image description here

It seems that each face is disconnected, and that there is a gap between them. On the second image, you can see a bit of white beneath it because the white part extends underneath the shape. You can see it live at http://heropanel.com

How can I solve this? I am using Illustrator CS6. Can I attribute facets to the same shape and color them individually?

  • 1
    It is a rendering bug called a conflation artefact. Simply put the rendeing engine is based on a faulty assumption. Make the shapes overlap or use a multisampling renderer that does not have a coverage conflation assunption (Export art optimized). More info here,same situation as cut but just for shared edge. Similar issue here. Simple solution: offset paths or manually overlap.
    – joojaa
    May 18 '16 at 4:43
  • @joojaa nailed it. In cases like this I simply overlap the images a smidge.
    – ErickP
    May 18 '16 at 20:20
  • @joojaa please avoid answering questions in comments, that's what the answer field is for :)
    – Vincent
    May 20 '16 at 9:52
  • @Vincent no i marked it as a duplicate just let the user KNOW what i think the duplicate is
    – joojaa
    May 20 '16 at 10:30