chrome中的SVG像素化

Question

这很奇怪。我正在使用SVG图像，因为它具有较低的文件大小，清晰的渲染和可伸缩性（对象的动画效果相当大）。它在FF，ie9，Safari和iPad中运行完美，但在某些SVG图像渲染效果非常差。

为什么会发生这种情况的任何想法？ svg文件本身非常小。

以下是一些示例svg

http://c975805.r5.cf2.rackcdn.com/rs-grails-r4/passion/social.svg

http://c975805.r5.cf2.rackcdn.com/rs-grails-r4/passion/social.svg

Answer 1

所以无论如何，这是一个合法的铬虫。并且有一个修复，使svg'更大'，内部报告太小的svg文件导致这个错误。

Answer 2

经过多次研究，我终于找到了一个有效的方法： 将svg导出所需尺寸的两倍（因此我将其命名为filename@2x.svg）
然后在css中添加transform: scale(0.5)

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

Answer 3

我也遇到了一个带有SVG背景元素的bug。解决方法是将不透明度降低0.01，即：

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

Answer 4

没有一种变通方法（opacity: 0.99，transform: scale(0.5)，...）对我有用，所以我改用了此方法：

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

这在所有浏览器中都很好。

Answer 5

问题在于，随着图形变小，可以使用的像素更少。渲染SVG时，浏览器使用方程式确定像素，但是方程式导致数值介于像素之间。

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

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