CODEWITHSUNDEEP
csssafarisvg
Brandon Durham
Brandon Durham

Reputation: 7707

SVG scaling issues in Safari

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:

enter image description here

Ideas as to what might be happening?

Upvotes: 10

Views: 23473

Answers (1)

Brandon Durham
Brandon Durham

Reputation: 7707

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">

Upvotes: 12

Related Questions