为什么 SVG 渲染比 PNG 渲染差那么多？答案

【问题标题】：Why is SVG Rendering so much worse than PNG Rendering?为什么 SVG 渲染比 PNG 渲染差那么多？
【发布时间】：2014-07-09 10:52:48
【问题描述】：

我比较了不同浏览器中的两张图片。第一个是 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">

出现两个问题：

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

我使用 Adobe Illustrator 从 SVG 导出 PNG。

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

【问题讨论】：

“如何提高浏览器上 SVG 图像的质量？”你在哪些浏览器上测试过？你在什么操作系统上？
所以......无论从 SVG 创建 PNG 图像，都会以不同的方式缩放黑色边缘到浏览器。是什么改变了它？
@JakeGould Chrome/FF/Safari
@Popnoodles 我使用 Adobe Illustrator 从 SVG 导出 PNG。
这个人做了一些研究，做了一些cmetsopticalcortex.com/svg-rendering-in-browsers

标签： javascript html image svg

【解决方案1】：

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

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

【讨论】：