Ie Is Centering My Svg

any idea why this is happening? If you paste the following into a new codepen.io in chrome it displays a tick fine and it is in the top left hand corner. However view it in IE and

Solution 1:

In my quick tests it seems that by only setting height IE (not Edge - it looks fine there) is stretching the entire svg element horizontally. If you add a width attribute, it snaps back to the top left corner. It also works if you set height and width in CSS.

From CSS Tricks:

Many browsers—IE, Safari, and versions of Opera and Chrome released prior to summer 2014—will not auto-size inline SVG. If you don't specify both height and width, these browsers will apply their usual default sizes, which as mentioned previously will be different for different browsers. The image will scale to fit inside that height or width, again leaving extra whitespace around it. Again, there are also inconsistencies in what happens if you leave both height and width auto.