Background-Size with Svg Squished in IE9-10

Background-size with SVG squished in IE9-10

Be sure that your SVG has a width and height specified. If you're generating it from Illustrator, ensure that the "Responsive" box is unchecked as this option removes width and height.

SVG background size differs in Internet Explorer 9 & 10

I had a similar problem with svg files generated by Illustrator for use as background images, and after much trial and error the fix seems to be just to edit each svg file and declare the width and height of the svg as attributes, e.g. <svg width="32px" height="128px"> (something that Illustrator doesn't set but Sketch does). This caused the svgs to behave the same in IE 10/11 as they do in Chrome/FF.

SVG with width/height doesn't scale on IE9/10/11

This happens when your image is missing the viewBox attribute on the svg element.

Yours should be set to: 0 0 640 480. The zeros are X and Y offsets and the 640 and 480 correspond to the width and height. It defines a rectangle that represents the boundaries of the image.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640" viewBox="0 0 640 480">

SVG background image in IE9

Make sure that your local webserver sends the correct mediatype for svg files, image/svg+xml.

---

Related Topics