IE10 crops SVG instead of resizing

Question

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.

Answer 1

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.