Chrome 中的 SVG 像素化

Question

这很奇怪。我使用 SVG 图像，因为文件大小小、渲染清晰且可扩展（对象动画很多）。它在 FF、ie9、Safari 和 iPad 中运行完美，但在 Chrome 中某些 SVG 图像渲染效果非常差。

有什么想法可能会发生这种情况吗？ svg 文件本身非常小。

这是一些 svg 示例

Answer 1

无论如何，这是一个合法的 chrome 错误。并且有一个修复，使 svg“更大”，内部报告为太小的 svg 文件会导致此错误。

Answer 2

经过多次研究，我终于找到了一个可行的解决方案：
导出所需尺寸两倍的 svg（因此我将其命名为 [email protected]）
然后在css中添加

transform: scale(0.5)

Chrome 中的结果与 Firefox 中的结果相同。

Answer 3

我在使用带有 SVG 背景的元素时也遇到过这个错误。解决方法是将不透明度降低 0.01，即：

.thing {
    background: url('my-image.svg');
    opacity: 0.99;
}

Answer 4

所有解决方法（

opacity: 0.99

，

transform: scale(0.5)

，...）都不适合我，所以我选择了这个：

PNG@2x（PNG 大小的两倍）

我简单地删除了 SVG，转而使用 PNG。为了确保它们即使在 Retina 和其他高分辨率显示器上也看起来不错，我将它们导出为实际需要大小的两倍。

这适用于所有浏览器。

Answer 5

问题是，随着图形变小，可供使用的像素也随之减少。渲染 SVG 时，浏览器使用方程来确定像素，但方程产生的数字落在像素之间。

解决方案似乎是在编辑程序中设置 SVG 所需的大小，然后确保所有像素与网格对齐。这仍然允许您的 SVG 放大，但也允许它以较小的尺寸渲染。

致谢：https://salferrarello.com/svg-looks-pixelated-when-small/#:~:text=Solution,render%20at%20the%20smaller%20size.