SVG scaling issues in Safari

Question

Strange issue occurring in Safari. I'm setting the background of an element to be an SVG. This SVG was drawn on a tight pixel grid and appears in most every other browser perfectly, but for some reason it's scaling incorrectly in Safari.

Here is the SASS I'm using to set the background:

@include background-size(100% 100%);
background: transparent image-url('icon-laptop.svg') no-repeat 0 0;

... and the CSS that creates:

-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background: transparent url('../images/icon-laptop.svg?1343856741') no-repeat 0 0;

I tried setting the background-size to 99.9% and it helped a bit but made it blurry in every browser.

Here are the results in Chrome and Safari:

Ideas as to what might be happening?

Ozell

It may possibly be related to this bug bugs.webkit.org/show_bug.cgi?id=82645 which seems related to webkit not wanting to 'break' the intrinsic aspect ratio of the SVG. Does your icon have the same aspect ratio as the containing element? – Shiftless

Hi Chris. It does, exactly. I'm rendering it at the very same size that the SVG was created at. – Ozell

Answer 1

Okay, so the fix was to add preserveAspectRatio="xMinYMin none" to the SVG element.

<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"
     width="35px" height="28px" viewBox="0 0 35 28" enable-background="new 0 0 35 28" xml:space="preserve" preserveAspectRatio="xMinYMin none">

Ozell

Note that xMinYMin none is invalid syntax, see https://mcmap.net/q/1165152/-svg-scaling-issue-in-ie9. – Oneirocritic

preserveAspectRatio="none" worked for me here. Adding xMinYMin did not work. – Barnabas