Geek asks and answers

SVG scaling issues in Safari

A strange problem arising in Safari. I set the background of the element as SVG. This SVG was drawn on a narrow grid of pixels and displayed fine in most other browsers, but for some reason it doesn't scale properly in Safari.

Here is what I used SASS to set the background:

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

... and 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 to set the background size to 99.9%, and that helped a bit, but made it blurry in every browser.

The following are the results in Chrome and Safari:

enter image description here

Ideas on what might happen?

+5
source share
1 answer

Ok, so the fix was to add preserveAspectRatio="xMinYMin none"an SVG to the 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">
+9
source

More articles:


All Articles