为什么SVG渲染比PNG渲染更糟糕？

Question

我在不同的浏览器中比较了两个图像。第一个是SVG图像，第二个是PNG图像。

结果如下：

我在这里创建了一个JSFiddle：http://jsfiddle.net/confile/2LL5M/

这是我使用的代码：

SVG Image <br>
<img width="300" src="https://dl.dropboxusercontent.com/u/47067729/sticker2.svg">

<br><br>    
PNG Image  <br>   
<img width="250" src="https://dl.dropboxusercontent.com/u/47067729/sticker.png">

出现两个问题：

1. SVG图像的黑色边缘未正确缩放它们看起来比缩放后的颜色要薄得多
2. PNG图像的质量要好得多。渲染更加平滑，边缘看起来强烈而锐利。 SVG图像质量差，边缘模糊

我使用Adobe Illustrator从SVG导出PNG。

如何在Chrome / FF / Safari上提高SVG图像的质量？

Answer 1

很难说为什么Adobe Illustrator使用比SVG更粗的PNG线。 AI在内部使用其专有文档格式，因此转换为PNG或SVG将导致一些细微的变化。

但是，对于如何使SVG文件看起来更像PNG的简单问题，只需返回编辑器，选择所有内容，并设置更大的笔触宽度。如果你仍然发现这些线是模糊的，你可以在你的CSS中设置shape-rendering:crispEdges;，但要注意这会完全关闭抗锯齿，导致你的对角线出现锯齿状边缘。