我在不同的浏览器中比较了两个图像。第一个是 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 图像的质量?
最佳答案
很难说为什么 Adobe Illustrator 对 PNG 使用比 SVG 更粗的线条。 AI 在内部使用其专有文档格式,因此转换为 PNG 或 SVG 将导致一些微妙的变化。
但是,对于如何使 SVG 文件看起来更像 PNG 的简单问题,只需返回编辑器,选择所有内容,然后设置更大的描边宽度即可。如果还是发现线条模糊,可以设置 shape-rendering:crispEdges;
在 CSS 中,但请注意,这会完全关闭抗锯齿功能,从而导致对 Angular 线出现锯齿状边缘。
关于javascript - 为什么 SVG 渲染比 PNG 渲染差这么多?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23772306/