SVG file goes partially blurry when I try and email it

[Nome]

Hi everyone,

I am having an issue with illustrator files which I have exported to SVG in the usual way. The file looks great when I open it, clear and crisp. But as soon as I try and send it to my customer, it goes blurry. I have tried sending as an email attachment, in a compressed zip file and through WeTransfer and the same thing happens each time. Not had this problem before. The only two things that are different this time is an updated version of illustrator and the files are saving as Microsoft Edge rather than Internet Explorer (I have recently upgraded my Office 365 account). The other thing I noticed is when you export in Illustrator now, you don't get the dialog box pop up with all the options.

I have attached what the file should look like, and what it looks like once I have attached it to an email.

Any ideas please? I am really stuck!

[Nome]

Further to the above, I have just downloaded the previous version of illustrator (25.1), exported the file to SVG and the same problem occurs.

[Nome]

Further update. I have now changed the default browser to Internet Explorer and the blurring has gone but now I have some aspects of the image missing and some have moved...argh! Am I doing something wrong?

[Monika Gause]

What is this inside the text?

What are we looking at?

SVG is basically code. The browser has to support it. And if you put it in an e-mail, the mail client has to support it. If you Zip it, then of course this doesn't apply.

You have to make sure to only use features in the file that all browsers support.

[Nome]

Hi Monika,

The chess pieces are ai images with a gradient applied. The coloured road was drawn in ai and added as a clipping mask to the text.

The logo images attached to my first post is actually displaying correctly now if I open with Internet Exporer but this second logo is not displaying correctly both when opened immediately after exporting and when opened after it has been attached to an email. All aspects in this email are as previous but the CC is also drawin in ai.

These images show the file as it should be, the file once it has been exported and opened with Internet Explorer and finally the file opened with Internet Exporer once it has been attached to an email.

 

 

 

[Monika Gause]

Internet Explorer is probably not the best browser to test this kind of stuff.

Try if it works in Firefox or Chrome. Try and open the SVG in Inkscape.

If it works in other browsers, then you know that IE is the issue. It won't help you though if IE is a prerequisite.

Also: test the SVG with  the W3C validator.

And also: we need to see what's in the layers panel. How this is built? Really just simple paths and a mask? or effects?

[Nome]

Ok, so the file is perfect when I open it with Google Chrome but when I attach it to an email it changes the browser back to Microsft Edge and creates a blurry image. I also just tried uploading the files to Sharepoint but this too changed the default browser to Microsoft Edge. Can't find a fix for this.

Just downloaded Firefox and Outlook also changes it to Microsoft Edge. This is clearly a Microsoft issue now, just have no idea how to fix it.

Just two layers. Simple paths and a mask. No effects.

I have decided to just send my customer the url to the file where she save it to her pc. Just tested this and it seemed to work ok with Google Chrome.

Thanks for your help with this Monika. I'm going to go take some paracetamol! 😄

[Monika Gause]

Glad you could halfway solve it.

Maybe web developer forums can help with IE & Edge issues.

Paracetamol might give you more side issues than relief 🙂