svg background image position is always centered in internet explorer, despite background-position: left center;

Question

I\'m using a SVG logo as a background image and I can\'t seem to get it to align correctly to the left in Internet Explorer (edit: and Safari).

The containe

Answer 1

The accepted answer works, but here's another solution.

Including the dimensions in the SVG so they are identical to the viewbox dimensions also does the trick.

width="496px" height="146px" viewBox="0 0 496 146" 

If you're like me and you edit/save your SVG's in Illustrator, untick the "responsive" checkbox in Advanced Options in the save dialog. Then the dimensions will be included.

(Since it's scalable, it's 'responsive' by definition. So this setting seems a bit redundant.)

Answer 2

It turns out the following line can turn your svg into a non-centered element:

display: inline-block;

Still not the most ideal solution but it works.