在safari中的SVG图标模糊

Question

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

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

先感谢您！

编辑：我创建了一个demo

Answer 1

我很抱歉它可能已经晚了但是我遇到了类似的问题，这是因为模糊滤镜，当我把阴影放在另一个元素上并将原始元素放在它上面时，它运行正常。例如，你必须复制你的图标元素，对它应用阴影，最后将它放在实际图标下面。

Answer 2

当您将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>标签，您可以锁定基本图像的大小。然后，这允许浏览器确定图像的质量，该质量将与您尝试显示图像的原始大小的差异成正比。在这种情况下，正如可以预料的那样，safari比使用其他方法显示SVG时更不优雅。