Javascript 为什么SVG渲染比PNG渲染糟糕得多？

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

结果如下：

我在这里创建了一个JSFIDLE：

这是我使用的代码：

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">

SVG图像




PNG图像

出现两个问题：

SVG图像的黑色边缘没有正确缩放，它们看起来比缩放后应该的要薄得多

PNG图像的质量要好得多。渲染更平滑，边缘看起来更强烈和锐利。SVG图像质量差，边缘模糊

我使用Adobe Illustrator从SVG导出PNG

---

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

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

---

但是，对于如何使SVG文件看起来更像PNG的简单问题，只需返回编辑器，选择所有内容，并设置更大的笔划宽度。如果仍然发现线条模糊，可以设置

形状渲染：crispEdges，但请注意，这会完全关闭抗锯齿功能，导致对角线出现锯齿状边缘。
“如何在浏览器上提高SVG图像的质量？”您在哪些浏览器上进行过测试？你在用什么操作系统？所以。。。无论从SVG创建PNG图像的是什么，黑色边缘的缩放方式都与浏览器不同。是什么改变了它？@JakeGould Chrome/FF/Safari@Popnoodles我使用AdobeIllustrator从SVG导出PNG。此人做了一些研究并发表了一些评论