SVG Scaling Issue in IE9

Question

Having issues using small svg in IE9. It get's chopped off on the right/is not centered:

(Supposed to be a "X")

My SVG:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 364.786 364.786" enable-background="new 0 0 364.786 364.786"
     xml:space="preserve" preserveAspectRatio="xMinYMin none">
<polygon fill="#999999" points="300.988,0 182.388,118.618 63.768,0.015 0,63.745 118.639,182.376 0.015,301.018 63.745,364.786 
    182.395,246.127 301.045,364.771 364.786,300.988 246.15,182.371 364.771,63.742 "/>
</svg>

I removed width and height and have viewbox and preserveAspectRatio="xMinYMin none" though...

http://jsfiddle.net/dzCL2/12/

Answer 1

Your preserveAspectRatio value is invalid, and should be ignored by the browser:

preserveAspectRatio="xMinYMin none"

The default value of xMidYMid meet will be used when rendering in this case.

Refer to the SVG 1.1 spec for the syntax details. It's possible that IE treats the value as partially valid, applying the xMinYMin part only, that would cause a left-aligned image. Using correct syntax should hopefully fix the problem.

Answer 2

The correct setting which worked for me in Safari to avoiding proportional scaling:

<svg ... preserveAspectRatio="none">

</svg>