Safari 中的 SVG 图标模糊

Question

I have noticed that svg icons that placed via 'img' tag aren't rendered correctly in safari. They end up being all blurry. I have created a simple html page and pasted the same svg icon multiple time using different methods :

I am a bit frustrated why does the 'img' tag lower the quality of the icon?

Thank you in advance!

Edit: I have created a demo

Answer 1

Maybe it will be helpful for someone - Safari can't correct render IMG tag (SVG format) for retina display - so the solution is - UP size image - the result you can see here Demo

Костыль для сафари (in Russian)

#svg {
  width: 20px;
  height: 21px;

  div {
    position: relative;
    transform: scale(0.25);
    transform-origin: 0 0;
    height: 100%;
    &:before {
      content: '';
      display: block;
      position: absolute;
      width: 400%;
      height: 400%;
      background-image: url(http://svgshare.com/i/1Le.svg);
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
}

.w-img {
  width: 20px;
  height: 21px;
  img {
    height: 400%;
    width: 400%;
    vertical-align: middle;
    transform: scale(0.25);
    transform-origin: 0 0;
  }
}

Answer 2

I'm sorry it's probably late but I had a similar problem and it was because of the blur filter, when I put the shadow on another element and kept the original one on top of it, it worked fine. Eg, you have to duplicate your icon element, apply shadow to it and finally place it below the actual icon.

Answer 3

When you put SVG into an <img> tag, it basically bitmaps the vector file. So where the SVG is capable of scaling and remaining sharp at all sizes, the <img> tag treats it analogous to a gif and any scaling will compromise the quality of the image.

Using SVG as an img | CSS Tricks

If I save the SVG to a file, I can use it directly in an <img> tag.

 <img src="kiwi.svg" alt="Kiwi standing on oval">

In Illustrator, our artboard was 612px ✕ 502px. That's exactly how big the image will on the page, left to itself. You can change the size of it though just by selecting the img and changing its width or height, again like you could a PNG or JPG. Here's an example of that.

So in short, by using an <img> tag, you lock the size of the base image. This then allows the browser to determine the quality of the image, which is going to be directly proportional to how different from the original size you are trying to display the image. In this case, as can be expected, safari is handling it less elegantly than if you displayed the SVG using another means.