铬中的 SVG 像素化答案

【问题标题】：SVG pixelation in chrome铬中的 SVG 像素化
【发布时间】：2012-03-22 16:04:51
【问题描述】：

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

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

这是一个示例 svg

【问题讨论】：

您可能应该在 Chrome 上提交错误报告，如果您在问题中有一些示例代码会更容易回答 :)
我添加了一个更好的现场样本。
我已提交错误报告：code.google.com/p/chromium/issues/detail?id=119471 等待答复...
我提交了另一个错误，无 CSS，SVG 在 chrome 上像素化：bugs.chromium.org/p/chromium/issues/detail?id=849679
我在处理带有移动和闪烁元素的 CSS 动画时遇到过这种情况。 SVG 有一个步骤是清晰的，另一个是模糊的、像素化的（在 Firefox 中它总是像素化，在 Chrome 中更是如此）。

【解决方案1】：

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

【讨论】：

有些人受不了真相！哈哈
@Fresheyeball 在什么意义上更大？文件大小？还是 CSS 尺寸？
我会赞成反对反对票，这回答了问题。 :)
5 年后我遇到了这个问题，但在复杂的系列情况下，我（愚蠢地，是的！）使用 Chrome 打印经过正式打印过程的 300dpi 出版物。可以肯定的是，我大量使用 zoom 属性导致这种情况以 Chrome 没有考虑到的方式爆发。抱歉，我想说的是，无论 SVG 的大小如何，这个问题一直存在，直到我在这里尝试了投票率较低的答案：stackoverflow.com/questions/9562330/…

【解决方案2】：

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

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

【讨论】：

在 StackOverflow 上搜索了几十个问题并到处阅读，我发现这是诱使 Chrome 在我正在打印的 PDF 中正确呈现 SVG 的唯一解决方法。我的情况也非常复杂和复杂，zoom 和 scale 属性的多个层次。
这可能在 2015 年可以使用，但现在不再使用了

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

没有一种解决方法（opacity: 0.99、transform: scale(0.5)、...）对我有用，所以我选择了这个：

PNG@2x（两倍于 PNG）

这适用于所有浏览器。

【讨论】：

【解决方案5】：

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

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

【讨论】：