0

I'm seeing conflation artifacts when I output an AI to SVG from Illustrator. I see this in Inkscape, Chrome, Firefox, and in Flutter apps.

enter image description here

I don't see these artifacts in the AI file:

enter image description here

or when I output to PNG. The SVG also displays properly in Illustrator.

I tried the solution here where I offset the path by 1px, and that removes these artifacts, but it adds this extra stuff at all edges of the SVG:

enter image description here

My goal is to repeat this pattern in an app, so I can't have these gaps.

Is there way to remove these artifacts from the output SVG?

4
  • Why don't you just unite these pieces. Use the Shapebuilder tool perhaps, or pathfinder Unite.
    – Billy Kerr
    Dec 27, 2023 at 16:46
  • I'll look into that. I'm not that familiar with Illustrator. Dec 27, 2023 at 17:56
  • Conflation artifacts are caused in vector art when you have two objects touching each other. It would be visible in Illustrator too, but it has GPU acceleration which fixes the issue mostly, however if you turn it off, you will also see the problem in Illustrator. Using a unite operation or the shapebuilder to merge the two shapes together should fix this, as they will be single objects rather than two.
    – Billy Kerr
    Dec 27, 2023 at 18:31
  • Another possible solution is to place a solid, color filled, shape behind the artwork. In this case, I'd try the middle value teal. This sometimes makes the conflation artifacts unnoticeable because there's no white/transparent artboard behind the artwork. IT does require another object though.
    – Scott
    Dec 28, 2023 at 3:02

0

Your Answer

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