I converted a raster image to vector in Illustrator CS6 using Image Trace then the Expand option, though when I save as an svg the image looks embossed. I suspect it's due to the layer background being white and the paths not lining up, but I'm unsure how to fix it or prove that theory without manually having to adjust every path.

This is how it looks in Illustrator before I export it:

enter image description here

The image looks like this when saved/exported with art optimized option:

enter image description here

  • What is your process from raster image to SVG? I'm assuming you use image trace. Could you post screenshots of the raster image and the image trace before you expand or export? – Cai Jan 6 '16 at 7:33
  • @CaiMorris I edited my question to include a screen shot of how it looks in Illustrator, and a note about Image Trace. – CreativeMind Jan 6 '16 at 17:19
  • Can you re-upload these images, if you still have them? The website you used to host them is down. – MD XF Dec 27 '17 at 0:15
  • 1
    Note: @WELZ added a new picture. – joojaa Jul 31 at 19:51
up vote 39 down vote accepted

They are called conflation artifacts, if you want to see how different vector engines react see here. If you want to understand the technical reason for some discussion see here. Basically conflation happens because we convert coverage to opacity, and that does not work. If you were to skip coverage based anti-aliasing then you wouldn't have any conflation problems*, for same reason super sampling has no problems.

To circumvent this problem one should always let the object behind overlap with the object above. Think of this like manually layering paper pieces on top of each other. If you cut a shape with scissors that exactly matches the hole of another shape odds are you get a gap, and aligning them is hard. On the computer due to a faulty assumption a perfect shared edge is a bad idea.

Prefer not to cut up the shape below

Image 1: Prefer not to cut or share edges with the shape below.

This overlapping technique should be taken into account in the beginning of the process. And that means you should not use divide trim or merge in pathfinder, if you aim for web publication. The case has been discussed in this answer, that is near duplicate.

In your specific case the quick fix would be to apply a slight offset on each of the paths. So select all and choose Effect → Path → Offset Path... then type in a small value. Additionally you could arrange colors so that darkest color is in front.

* For this reason a printer wouldn't have a problem. In fact cutting up is important for the printing plate process.

  • 4
    @joojaa It does look like the issue was related to the artifacts, thank you for the schooling on that. I did try the Offset Path option, but ended up opening up the original file and tried the Image Trace again and found an advance setting option under Image Trace, called Method, that changed the paths from cutout to stacked. – CreativeMind Jan 6 '16 at 23:34
  • 1
    A nice side effect (IMHO) is that the image on the left has less points, therefore the resulting SVG would be smaller. :) – Andrea Lazzarotto Jun 23 '16 at 14:17

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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