Safari 中的 SVG 图标模糊不清

Question

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

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

提前谢谢你！

编辑：我创建了一个demo

Answer 1

也许它会对某人有所帮助 - Safari 无法正确渲染 IMG 标记（SVG 格式）以用于视网膜显示 - 所以解决方案是 - 放大图像 - 你可以在此处看到的结果 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;
  }
}

Answer 2

很抱歉，可能来晚了，但我遇到了类似的问题，这是因为模糊滤镜，当我将阴影放在另一个元素上并将原始元素保留在它上面时，效果很好。例如，您必须复制您的图标元素，对其应用阴影，最后将其放置在实际图标下方。

Answer 3

当您将 SVG 放入 <img> 标记时，它基本上是位图矢量文件。因此，当 SVG 能够缩放并在所有尺寸下保持清晰时，<img> 标签会将其视为 gif，任何缩放都会影响图像的质量。

Using SVG as an img | CSS Tricks

如果我将 SVG 保存到文件中，我可以直接在 <img> 标记中使用它。

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

在 Illustrator 中，我们的画板是 612px ✕ 502px。这正是图像在页面上的大小，留给它自己。您可以通过选择 img 并更改其宽度或高度来更改它的大小，就像您可以使用 PNG 或 JPG 一样。这是an example。

简而言之，通过使用<img> 标签，您可以锁定基本图像的大小。然后，这允许浏览器确定图像的质量，这将与您尝试显示图像的原始尺寸的差异程度成正比。在这种情况下，正如可以预料的那样，与使用其他方式显示 SVG 相比，safari 的处理方式没有那么优雅。