SVG file looks different in webbrowser than in Illustrator

Question

I've been doing some stuff in Illustrator and I have a problem with saving a project in to SVG file that I open in webbrowser, It just looks different.

And it hapens only in SVG, if I save it to PDF or PNG it looks how it should. What am I doing wrong?

That's how it looks in Ai

That's how it looks in webbrowser

Here's a link to download rar file with .ai and .svg that I have.

Answer 1

Since all browsers render it the same way, it would seem likely that this is a bug in the AI SVG export filter.

To me it looks like you are applying a blend mode ("Overlay" perhaps?) to the white parts on top of the image. That effect ought to be reproducible using SVG filters, but perhaps AI's exporter doesn't support that yet.

If you are using an "odd" blend mode, try changing it, or reproducing the effect another way.

Answer 2

Individual pixel control needed in identical svg conversion is not possible. SVG creates only specific shapes. The Ai app conversion seems to use opacity to provide the color shades. You could probably tweek opacity and add some svg filters to improve the svg.

Answer 3

Print your design in a . pdf file instead of exporting it directly. Then open the printed .pdf back in Illustrator and export the .svg from this one, it shoud do the trick.