Safari 中的 SVG 图标模糊

Question

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

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

先感谢您！

编辑：我创建了一个演示

Answer 1

也许这对某人会有帮助 - Safari 无法纠正视网膜显示的渲染 IMG 标签（SVG 格式） - 所以解决方案是 - UP 尺寸图像 - 您可以在此处看到结果\n演示

\n

\xd0\x9a\xd0\xbe\xd1\x81\xd1\x82\xd1\x8b\xd0\xbb\xd1\x8c \xd0\xb4\xd0\xbb\xd1\x8f \xd1\x81\xd0\xb0\xd1 \x84\xd0\xb0\xd1\x80\xd0\xb8（俄语）

\n

#svg {\n  width: 20px;\n  height: 21px;\n\n  div {\n    position: relative;\n    transform: scale(0.25);\n    transform-origin: 0 0;\n    height: 100%;\n    &:before {\n      content: \'\';\n      display: block;\n      position: absolute;\n      width: 400%;\n      height: 400%;\n      background-image: url(http://svgshare.com/i/1Le.svg);\n      background-size: contain;\n      background-repeat: no-repeat;\n    }\n  }\n}\n\n.w-img {\n  width: 20px;\n  height: 21px;\n  img {\n    height: 400%;\n    width: 400%;\n    vertical-align: middle;\n    transform: scale(0.25);\n    transform-origin: 0 0;\n  }\n}\n

\n

Answer 2

当您将 SVG 放入<img>标签时，它基本上会位图矢量文件。因此，当 SVG 能够在所有尺寸下缩放并保持锐利时，<img>标签将其视为类似于 gif，任何缩放都会损害图像的质量。

\n\n

\n

使用 SVG 作为图像 | CSS 技巧

\n\n

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

\n\n

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

\n\n

在 Illustrator 中，我们的画板为 612px \xe2\x9c\x95 502px。这正是图像在页面上的大小（不考虑其本身）。您只需选择图片并更改其宽度或高度即可更改其大小，就像 PNG 或 JPG 一样。这是一个例子。

\n

\n\n

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

\n