Google chrome chrome中的SVG像素化

这很奇怪。我使用的是SVG图像，因为它的文件大小小，渲染效果好，可伸缩性强（对象有很多动画）。它在FF、ie9、Safari和iPad中工作得非常完美，但在chrome中，某些SVG图像的渲染效果非常差

你知道为什么会这样吗？svg文件本身非常小

下面是一些示例svg

---

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

经过多次研究，我终于找到了一个可行的修复方法：
将svg导出为所需维度的两倍（因此我将其命名为filename@2x.svg)
然后在css中，添加

transform:scale（0.5）

---

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

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

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

所有的变通方法（

opacity:0.99

，

transform:scale（0.5）

，…）都不适用于我，所以我改为：

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

---

这在所有浏览器中都能很好地工作。

问题是，当图形变小时，需要处理的像素就变少了。渲染SVG时，浏览器使用方程式确定像素，但方程式会产生介于像素之间的数字

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

---

归功于：。

您可能应该在Chrome上提交一个错误报告，如果您在问题中有一些示例代码，回答起来会更容易：）我添加了一个更好的实时示例。我提交了一个错误报告：等待答案……我提交了另一个错误，无CSS，SVG在Chrome上是像素化的：有些人无法处理真相！哈哈哈，在什么意义上@Freshyeball更大？文件大小？还是css维度？我将向上投票以对抗向下投票，这回答了问题。：）5年后，我遇到了这个问题，但在一系列复杂的情况下，我（愚蠢地，是的！）使用Chrome通过正式的打印流程来打印一份300dpi的出版物。可以肯定的是，我大量使用的

zoom

属性导致了这个问题的爆发，而Chrome并没有考虑到这一点。抱歉，我想说的是，不管SVG的大小如何，这个问题一直存在，直到我在这里尝试了投票率较低的答案：仔细研究了有关StackOverflow的几十个问题，并到处阅读，我发现这是欺骗Chrome在我打印的PDF中正确呈现SVG的唯一解决方法。我的情况也非常复杂和复杂，有多层的

zoom

和

scale

属性。这可能在2015年就可以使用了，但不再是完美的。我甚至只能减少0.0001。太完美了！你救了我的命。非常感谢。