Firefox中的SVG图形模糊不清

Question

我的网站采用响应式设计，并使用了一个与容器大小动态适应的SVG标志/图像。所有主流浏览器似乎都非常支持SVG。

我的SVG是动态的，因此如果我调整浏览器窗口大小，SVG也会相应地缩放。在Chrome和IE9中，它的效果非常好。但是在Firefox中，SVG在某些尺寸下会变得模糊不清。但我不能说当其超过初始SVG大小时它总是模糊不清。它似乎只是在调整浏览器窗口大小时不总是正确地重新渲染。

有时候它看起来像这样（请在全屏查看区别）：

也许我使用了错误的嵌入方式。以下是我的CSS和HTML代码：

<div id="logo"></div>

CSS：

#logo {
   background-image: url('http://dl.dropbox.com/u/569168/jess.svg');
   height: 22em;
   background-repeat: no-repeat;
   -webkit-background-size: 100%;
   -moz-background-size: 100%;
   -o-background-size: 100%;
   background-size: 100%;
}

如果您想查看它，请通过CSS使用链接来获取SVG文件。它是通过Adobe Illustrator创建的。

有任何修复这个问题的想法吗？

- René Stalder

Answer 1

更新2013-10：已确认在v24中修复，现已进入发布通道

---

更新2013-07：错误已解决！ 修复将会在Firefox 24中发布，时间在九月到十月之间

---

我曾经在某个地方读到了一个相对简单的解决方案，现在在我的项目中也使用这个方案（如果我再次找到来源，我会添加它）：

只需要将SVG容器的宽度和高度设置为图像可能具有的最大值，就可以解决这个问题。在所有当前的浏览器中都能正常运行。唯一的限制是，Firefox和Opera（没错，就是导致这个问题的两个浏览器）无法很好地处理非常大的图像 --> 不要对尺寸使用太高的值。

原始文件:

<svg width="64px" height="128px"> 

假设最大宽度将扩展到原来的3倍，那么你的SVG应该包含以下内容：

<svg width="192px" height="384px"> 

(是的，svg节点可以有更多的属性...)

这个方法能够起作用的原因是Opera和FF在调整大小之前会先渲染SVG，而不是像矢量图形一样按预期的方式进行。

更新：感谢David Bushell撰写的关于使用SVG实现分辨率独立性的精彩文章。

- Jörn Berkefeld

---

似乎将width和height属性都设置为100％也可以解决问题。 - Simon Boudrias

是的，这可以帮助，但在我的测试中性能不佳，导致FF使用比正常情况下更多的CPU。此外：浏览器将不再知道您文件的正确纵横比。 - Jörn Berkefeld

+1 是因为将 SVG 的尺寸设置为最大可能的大小解决了我遇到的模糊问题。我注意到这只是SVG精灵中的一个重要问题。如果 SVG 是像徽标一样的图像，您可以删除 width 和 height 属性，并且不设置 background-size 或将其设置为 cover - SVG 将成为节点的大小，在 Firefox 或 Safari 中似乎不会模糊。 - James Long

当使用transform="scale()"时，问题仍然存在。 - Zaz

@Josh，Mozilla 的跟踪器中是否有关于这个问题的未解决 Bug？如果没有，你能否创建一个？ - Jörn Berkefeld

@Jörn：好的：当CSS变换rotate()和scale()一起使用时，SVG非常模糊。 - Zaz

Answer 2

问题在于，当您将SVG用作背景图像时，Firefox会选择要呈现矢量图的大小，然后根据需要缩放这些基于图像的像素。以下是相关的错误： https://bugzilla.mozilla.org/show_bug.cgi?id=600207 最简单的解决方法是不使用SVG作为背景图像，而是直接嵌入SVG，或通过<img>标签引用它。

如果您提供一个显示问题和文件的工作测试用例，我们可以帮助您实际编写代码并进行修复。

- Phrogz

Answer 3

为了使SVG图像 缩放到其容器的大小, 确保您的SVG标签设置了viewBox:

<svg viewBox="0 0 347 189">

但没有width或height属性，即不是：

<svg width="347px" height="189px" viewBox="0 0 347 189">

默认情况下，此操作将通过缩放到适合的最大宽度或高度来保留其纵横比，哪个维度先达到边界就采用哪个维度。

如果这种行为不符合您的要求，您可以以各种有趣的方式更改保留纵横比策略。

- ecmanaut

---

正常工作与background-size，而标记的答案则不行。 - David Wick

在FF36中按预期工作。 - Ionut-Cristian Florescu

Answer 4

我自己也遇到了完全相同的问题。我在Firefox中通过在文本编辑器中编辑SVG并将<svg>元素的宽度属性值更改为100％，但保留所有其他属性值来解决它。在您的特定示例中，需要进行以下更改：

<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" 
    x="0px"
    y="0px"
    width="100%"
    height="189px" 
    viewBox="0 0 347 189" 
    enable-background="new 0 0 347 189" 
    xml:space="preserve">

这对我起了作用，也应该对你有同样的效果；但是如果没有测试用例，我不能百分之百确定。

注意：在我的特定情况下，将宽度和高度都设置为100％会破坏Safari对SVG的渲染。请确保只将宽度设置为100％。

- David Zulaica

Answer 5

最简单的解决办法是在矢量图像编辑器（如Illustrator）中将SVG进行扩大。将其按照浏览器的渲染分辨率进行缩放（或更高）。由于它是矢量图像，因此放大不会影响文件大小。

- Damir Kotoric

Answer 6

我发现的另一个类似的“陷阱”是，当我从Illustrator导出SVG时，宽度和高度不是整数 - 所以当我在编辑器中打开SVG时，宽度大约是“100.6789px”。通过先仔细地在Illustrator中编辑图像使其成为整数，然后在Firefox中使用相同的宽度和高度，解决了模糊图像的问题。

- user1010892