Sunday, April 12, 2015

adobe illustrator - Image looks embossed when converted to SVG


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



Answer



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.



No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...