html - Safari 中的 SVG 图标模糊

Question

我注意到通过“img”标签放置的 svg 图标在 safari 中无法正确呈现。他们最终变得模糊不清。我创建了一个简单的 html 页面，并使用不同的方法多次粘贴相同的 svg 图标:

我有点沮丧，为什么 'img' 标签会降低图标的质量？

提前致谢!

编辑:我创建了一个 demo

Answer 1

也许这对某人有帮助 - Safari 无法为视网膜显示更正渲染 IMG 标签(SVG 格式) - 所以解决方案是 - UP 尺寸图像 - 你可以在这里看到的结果 Demo

Костыль для сафари(俄语)

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