野生动物园中的SVG图标模糊

Question

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

我有点沮丧为什么＆＃39; img＆＃39;标签会降低图标的质量吗？

提前谢谢！

修改：我创建了demo

Answer 1

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

Answer 2

也许对某人会有帮助-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;
  }
}

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