【问题标题】：Firefox, bad svg image renderingFirefox，糟糕的 svg 图像渲染
【发布时间】：2014-06-20 17:07:21
【问题描述】：
我在 Ubuntu 上使用 Firefox 渲染 SVG 图像时遇到问题。您可以在附图中看到字母 J 在其下方有一条小黑线。此伪影仅在某些缩放级别发生。图片添加了<img> 标签，所以它不是背景。该图像是使用 Inkscape 创建的。它可以在 Chrome 上正确呈现，我没有在其他操作系统上尝试过。
有没有办法解决这个保持 SVG 的问题？
编辑：由于这只影响边框上的图像，我找到了一种解决方法，在文本编辑器中打开 SVG 并增加几个像素的高度和宽度，这意味着在文本周围留下一些透明填充。
我仍然很好奇这是否是一个 firefox 错误
【问题讨论】：
标签：
image
firefox
svg
render
【解决方案1】：
原则上 SVG 的渲染在 Firefox 中并不比在任何其他浏览器中差。但是每个浏览器在渲染方面都有自己的不足之处，尤其是当形状彼此接近并且缩放发挥作用时。
因此，我可能会建议查看您的图形并在字母周围留出一点空间，这样就不会出现直接与字母轮廓“对齐”的形状。不幸的是，我看不到您的图形代码，但我很确定问题是由彼此非常接近的形状引起的（由 »snapping« 排列）并且没有 »保存重叠«。
对于字体有 Hinting，优化渲染的方法，特别是对于小尺寸，但对于 SVG，没有这样的东西，因为你不能确定每个浏览器将如何处理这些“边缘情况”，这取决于你准备好图形，使这些故障不会出现。