4

I created this artwork in Illustrator CC and I'm "saving as" an SVG file (it has to be SVG for client). When I view the file in Chrome, Safari or Firefox it renders just fine for the most part. See below:

Viewed via Chrome

BUT when I try to view it in IE (i'm using IE 11) I get a different result. I have tried saving it out differently with adjusting settings in my SVG output but no success. See below:

enter image description here

As you can see these are simple shapes with simple gradients. Is there something I should be doing to ensure it renders correctly in IE? Believe me, I would love to dismiss IE altogether but for our use, there is a sizable base of end users that will be viewing via IE. Any help would be appreciated

  • 1
    <inset obligatory dismissive comment about Internet Explorer>. – Vincent Oct 21 '16 at 13:45
1

It looks like a IE doesn't like what you're doing with that top dark shape. Is there a drop shadow or some kind of raster-based filter on it? It looks like the raster shape area is rendering the background shapes gradient differently.

Is there any way you can post the SVG?

This is really more of a programming issue.

  • I actually didn't use a drop shadow but rather multi blend to create the effect. I know that I wanted to avoid any possible issues with "raster" effects so I needed it to be purely vector. I haven't tried it but I'm going to just remove it and see how it renders. Will keep you posted. Thanks. – ErickP Feb 24 '16 at 3:45
  • You can try opening the SVG file in a browser window and use the debugger/inspector to delete shapes until the problem goes away. – Mysterfxit Feb 24 '16 at 16:12
0

How are you exporting your SVG? "File > Export" or "File > Save As..."? CC has a different module for each way (and ironically, Save As... is less compatible for modern browsers than Export). Nevertheless, Safari, Explorer, Chrome, etc... they all have different ways to render an SVG, some use coordinates, some convert those and render a visual pixel version, etc...

Try to use Export and play with the final config (responsive, etc...)

If you ask me, sounds like it is just Explorer standing by his awful fame,which means the only way to fix this comes from their side, not yours (and who knows when that will happen...).

I'm curious though, looks like a big file, what's the SVG weight as it is? All those gradients :o.

You can also try a trick: Export your SVG but leave the gradient path with no fill (the whole circle, when you export it, it will become transparent) Make sure you don't delete the beveled borders.

After that, put the image inside a div and create a gradient background enter image description here

background: rgba(209,209,209,1);
background: -moz-linear-gradient(-45deg, rgba(209,209,209,1) 0%, rgba(209,209,209,1) 13%, rgba(255,255,255,1) 32%, rgba(82,82,82,1) 50%, rgba(255,255,255,1) 73%, rgba(199,199,199,1) 86%, rgba(199,199,199,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(209,209,209,1)), color-stop(13%, rgba(209,209,209,1)), color-stop(32%, rgba(255,255,255,1)), color-stop(50%, rgba(82,82,82,1)), color-stop(73%, rgba(255,255,255,1)), color-stop(86%, rgba(199,199,199,1)), color-stop(100%, rgba(199,199,199,1)));
background: -webkit-linear-gradient(-45deg, rgba(209,209,209,1) 0%, rgba(209,209,209,1) 13%, rgba(255,255,255,1) 32%, rgba(82,82,82,1) 50%, rgba(255,255,255,1) 73%, rgba(199,199,199,1) 86%, rgba(199,199,199,1) 100%);
background: -o-linear-gradient(-45deg, rgba(209,209,209,1) 0%, rgba(209,209,209,1) 13%, rgba(255,255,255,1) 32%, rgba(82,82,82,1) 50%, rgba(255,255,255,1) 73%, rgba(199,199,199,1) 86%, rgba(199,199,199,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(209,209,209,1) 0%, rgba(209,209,209,1) 13%, rgba(255,255,255,1) 32%, rgba(82,82,82,1) 50%, rgba(255,255,255,1) 73%, rgba(199,199,199,1) 86%, rgba(199,199,199,1) 100%);
background: linear-gradient(135deg, rgba(209,209,209,1) 0%, rgba(209,209,209,1) 13%, rgba(255,255,255,1) 32%, rgba(82,82,82,1) 50%, rgba(255,255,255,1) 73%, rgba(199,199,199,1) 86%, rgba(199,199,199,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#c7c7c7', GradientType=1 );

This code will give you a similar gradient texture to the div bg and the punched out shape from your SVG will show it. (if the div is also configured with adaptive size, it will scale seamlessly). enter image description here

I know it is a pain, very simple and close to lame solution, but hey... it is IExplorer.

  • I tried exporting will the different options available and I'm still getting the same results. I will get the exact size of the file tomorrow. The SVG is going to be used with an online app that allow you to build custom plates and panels. There will be many little components like this one that will be dragged and dropped into place. Not sure if they will be able to create any sort of code to accomplish what you are mentioning. Then again, I'm not involved in that end of the process. – ErickP Feb 24 '16 at 3:56
0

I suggest you use one of the many methods to detect Internet Explorer and replace the SVG with a PNG rendering when the page is viewed in IE.

Detecting Windows Internet Explorer More Effectively

Internet Explorer was killed by Microsoft because of precisely this kind of issue, so I don’t recommend you do anything to your SVG just to support a dead browser. That is sabotaging the present and future to serve the past. It is not like the IE users will be on a high-DPI display or something. A PNG will do just fine.

  • This is an interesting suggestions but I'll have to reach out to the people on the back end to see what they say. But I totally agree with you about design for the present and future. IE has been the bane of many's existence. I hear "Edge" is having issues as well but personally have not used it enough. – ErickP Feb 24 '16 at 22:45

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.