javascript - 为什么 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 图像质量较差，边缘模糊

我使用 Adob​​e Illustrator 从 SVG 导出 PNG。

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

Answer 1

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

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