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/设置了一个测试页面 - 顶部是背景图片，下面的文件是完全相同的文件，但直接在html中添加为img。将浏览器缩小到小尺寸，你会看到顶部的像素，但底部会保持平滑。

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

感谢。

Answer 1

将svg文件（sophie-conran.svg）中的外部<svg>元素的宽度和高度设置为100％。

svg图像以你给它的宽度和高度进行光栅化，即1000px x 350px，然后将该位图转换为所需的大小。如果设置宽度和高度百分比，则会以最终大小创建位图，并且没有位图缩放。

更新

这对Firefox 24及其他版本都没有意义，但你可以做你喜欢的事情，它总能正常工作，即没有像素化。

Answer 2

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