Illustrator to SVG: different shades for different browsers

I have just approached the world of design and so consequently I have many doubts about certain subjects, one of them is related to nuances.

As you can see from the images below, my “project” created in Adobe Illustrator is “corrupt” once saved in SVG format:

Project components:
Project components Image

Finished project / SVG:

 Finished project / SVG Image

SVG Options:
SVG Profiles: SVG 1.1
Image Location: Link

I would kindly like to know what I’m doing wrong, if I should combine paths instead of overlapping them, or something else. Thanks for your help!

enter image description here
enter image description here
enter image description here
enter image description here
enter image description here


You have ultimately to sacrafice features for consistency. A vector graphics file is not at all like an image. Its more like a computer program than a image format.

Now its near impossible to get full consistency since the programs work differently. The SVG standard does not define accurately enough how things should be drawn. Hell, even illustrator itself is not consistent between GPU render and export to a image format, let alone across adobe apps.

There is no universal way to becoming more consistent. Hell even the antialiasing algorithm varies across renderers and arguably most of them are broken.

PS it is a really bad idea to layer two exactly same things on top of eachother.

Source : Link , Question Author : rglda , Answer Author : joojaa

Leave a Comment