Search code examples
svgsaveadobe-illustrator

SVG file looks different in webbrowser than in Illustrator


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

Image in Adobe Illustrator That's how it looks in webbrowser

Image in web browser

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


Solution

  • 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.