SVG image size problem in IE11

User 2903050 Photo


Registered User
260 posts

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,
User 187934 Photo


Senior Advisor
20,181 posts

Hi Phil,
Try adding this to the head of your page.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 185561 Photo


Registered User
102 posts

The only solution for IE11 is to use a smaller image.
Once you accomplish the impossible, then you can move on to the hard stuff!
User 244626 Photo


Registered User
811 posts

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.

Attachments:
Bootstrap 5 CSS Grid.
User 2903050 Photo


Registered User
260 posts

Twinstream wrote:
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?
User 244626 Photo


Registered User
811 posts

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.....
Bootstrap 5 CSS Grid.
User 2846109 Photo


Ambassador
341 posts

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?

Attachments:
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 244626 Photo


Registered User
811 posts

Jeff wrote:
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 !
Bootstrap 5 CSS Grid.
User 2903050 Photo


Registered User
260 posts

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

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.