Hi, I have scoured the whole internet trying to find a solution but no luck. I want to use a .svg file for the logo my website. All works well with all the browsers except (oh yes, you guessed it, that one again with all the annoying bugs) IE11.
I have tried not having a min or max width on the .svg like the web says but not having any luck as the image on IE11 always comes out too big and doesnt scale. I have even tried putting it in a container with width set but image stays big and cuts off the overhang.
Anyone got any tips?
Regards,

Hi Phil,
Try adding this to the head of your page.

Unfortunately, it didnt work.

The only solution for IE11 is to use a smaller image.

Since we know the difference between Fallback First flex and @support display:flex is that IE does not respond to @support display:flex, we could utilize it for a simple switchout.

Fallback First flex will get a image png picture. When we switch to display:flex we hide the png picture and add another picture that has your link to the svg. Go back to Fallback First flex and hide the svg picture.

Wouldn't this add more kB to the page that I am trying to avoid by just having a larger PNG image?

This does indeed download both images. The difference I believe would be negligible in your download tests though. Were talking about a extremely small amount of code and data. Also, you would want to take advantage of the picture srcset option and provide different sized images for the breakpoints. I did not do that in the example.

One would want to be careful about applying the technique on a large gallery of pictures for example. But even then, we could start a discussion about lazy loading pictures and data based on where the user is when the page is loaded and then starts scrolling. Its a very common technique used on my local newspaper mobile sites. I have been successful in replicating the technique.

You could also investigate modifying the SVG as I read something about removing the clipping path for IE.

The answer is only a option.....but does show how one could create custom @support feature queries to deal with browser unhappiness. I wish they would give us more freedom in doing so.....

I didn't seem to have any problems in ie11 with this test file using an SVG.

Would you like me to take a look at your SVG to see if there is anything we can do to it to help?

Inkscape is a free svg editor and seems to work for me in ie11. I wonder what the difference is in the svg files that work and dont ?

Jeff's The Universe from A to Z uses svg's for his awesome pictures and works great in IE11. Great animation work too !

I always used to use inkscape. Might give it a go again. I think it's a problem to do with IE how it processes the clip path and sizes from the html. It's really bugging me. One last try tonight and then will just sack it off. Thanks