12

I solved the issue where IE10 would only resize an image if styled with css, now IE10 is cropping an SVG instead of resizing it. No other browser has this issue.

I've tried all different combinations of only declaring height or width while setting the other dimension to auto and not setting it or setting both. I've also tried preserveAspectRatio="none" on the img tag.

Improve this question
0

1 Answer 1

Reset to default
21

It turns out IE is the only browser that needs the viewBox to be set in order to scale an svg. I used a free program called inkscape to create my svg and it doesn't set the viewbox. Open the svg with a text editor and add this to the <svg... declaration:

viewBox="0 0 64 64"

Instead of 64, enter whatever the x and y of your bottom right corner should be for the size of the original svg. Not sure weather to blame IE10 or inkscape...

Update: You can update to inkscape 0.91 and the viewbox attribute will be added automatically.

Improve this answer
3
  • 1
    If you know where to search (thanks a lot), it's easy to find solutions: wiki.inkscape.org/wiki/index.php/… (quickest solution: Update InkScape to 0.91 and the attribute will be added automatically)
    – BurninLeo
    Commented Feb 5, 2015 at 20:09
  • 1
    Thanks! This fixed the same issue on IE11.
    – Jared
    Commented Dec 30, 2016 at 18:16
  • 1
    Just commenting to say that this is still an issue with IE (or at least a similar issue), that it is cropping the hanging bits of text (like on "y" or "g") from an SVG (one not created with Inkscape). PowerPoint and Ubuntu's Image Viewer also had the same rendering issue, while Chrome and FireFox did not. It was fixed on all apps by adding a viewBox attribute as described.
    – DaveTheScientist
    Commented Nov 19, 2020 at 17:31

Not the answer you're looking for? Browse other questions tagged or ask your own question.