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

  • SVG is a bit tricky to control consistenly. Have you considered using PNG's instead ?
    – Lucian
    Dec 14, 2019 at 18:18
  • Yes, but right now i need svg to work
    – rglda
    Dec 14, 2019 at 21:08

2 Answers 2


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.

  • Thank you for the tip
    – rglda
    Dec 17, 2019 at 16:52

I don't think that this has much to do with Illustrator but rather the differences between SVG rendering in different browsers. Part of the problem may be because of the semi transparency in some of your gradients. I've noticed that browsers can render semi transparency slightly differently, so why not try creating your gradients without transparency but use solid colours instead. Obviously you will have to rethink how these are constructed.

As a general rule of thumb I've found that keeping vector graphics as simple as possible is the key to success - so if possible that means no SVG effects, such as blurs, and not using blending modes, or transparency.

Anyway, here's a rough example using firefox, edge and chrome. I checked the values by sampling the colours, and these are quite consistent.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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