Firefox 没有抗锯齿缩放背景 svg

Question

我正在开发一种响应式设计，该设计需要标题图形随视口宽度缩放。我已经去了一个 svg 认为这会很好地扩展。 （我在整个站点中测试了对 svg 的支持，并用 svg 替换了 gif）。 在 Firefox（Windows 7 上的 13.0）中，它不会对小尺寸进行抗锯齿处理。有时它在某些尺寸上看起来不错，如果我修复尺寸，它会这样做，但我想避免这样做。 Chrome 和 Safari 对图像进行抗锯齿处理，看起来不错。

我将background-size: 100% 100% 设置为扩展到容器，我也尝试过cover 之类的东西，但似乎没有什么区别。

我也尝试过添加image-rendering: optimizeQuality;，但这似乎没有帮助。

我已经在http://axminster.digital.linneydesign.com/svg/ 设置了一个测试页面——最上面的是背景图片，下面是完全相同的文件，但是直接作为img 添加到了html 中。将浏览器缩小到小尺寸，您会看到顶部的像素化，但底部的像素会保持平滑。

关于如何在不固定尺寸的情况下平滑此背景图像的任何想法？

谢谢。

Answer 1

为 svg 文件 (sophie-conran.svg) 中的外部 <svg> 元素设置 100% 的宽度和高度。

会发生什么情况是 svg 图像被光栅化为您给它的宽度和高度，即 1000 像素 x 350 像素，然后该位图被转换为所需的大小。如果您设置宽度和高度百分比，则位图将以最终大小创建，并且没有位图缩放。

更新：

这在 Firefox 24 及更高版本中没有任何意义，你可以做你喜欢做的事，它总是能正常工作，即没有像素化。

Answer 2

解决方案是将 SVG 作为标签，而不是作为外部文件。 Firefox 将正确应用抗锯齿。