SVG icons in safari are blurred

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;
  }
}