Firefox SVG 图形模糊答案

【问题标题】：Firefox SVG graphics blurryFirefox SVG 图形模糊
【发布时间】：2012-02-15 18:19:11
【问题描述】：

我有一个带有 SVG 徽标/图像的响应式网页设计，它的容器是动态的。所有主流浏览器似乎都支持 SVG 真的很好。

我的 SVG 是动态的，所以如果我放大浏览器窗口，SVG 也会这样做。在 Chrome 和 IE9 中，它就像一个魅力。在 Firefox 中，SVG 在某些尺寸下是模糊的。但是当它超过初始 SVG 大小时，我不能说它一直是模糊的。在我放大浏览器窗口时，它似乎并没有一直正确地重新渲染。

这就是它有时的样子（在fullsize 中查看它以了解不同之处）：

也许我使用了错误的方式来嵌入它。这就是我的 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 制作的。

知道如何解决这个问题吗？

【问题讨论】：

标签： html firefox css svg

【解决方案1】：

问题在于，当您使用 SVG 作为背景图像时，Firefox 会选择将矢量渲染到的大小，然后根据需要放大这些基于图像的像素。这是一个相关的错误：https://bugzilla.mozilla.org/show_bug.cgi?id=600207

这里最简单的解决方法是不使用 SVG 作为背景图片，而是直接嵌入您的 SVG，或者通过 <img> 标签引用它。

如果您提交了一个显示问题和文件的工作测试用例，那么我们可以帮助您提供实际代码和修复。

【讨论】：

【解决方案2】：

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

<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% 工作。

注意：在我的特殊情况下，将宽度和高度都设置为 100% 破坏了 Safari 对 SVG 的渲染。请务必仅将宽度设置为 100%。

【讨论】：

【解决方案3】：

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

2013 年 7 月更新：Bug is solved! 修复将使其进入 Firefox 24，该版本将在 9 月至 10 月之间发布

我在某个地方读到了一个关于这个问题的简单解决方案，我现在在我的项目中使用它（当我再次找到它时会添加源代码）：

只需将 svg 容器的宽度和高度设置为图像可能具有的最大值，就可以了。在所有当前浏览器中都可以正常工作。唯一的限制是，firefox 和 opera（是的，导致这种混乱的两个浏览器）不能很好地处理非常大的图像 --> 不要对尺寸使用太高的值

原始文件：

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

假设最大宽度将是 3 倍那么大，那么您的 SVG 应该包含以下内容：

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

（是的，svg 节点可以有更多属性...）

之所以可行，是因为 Opera 和 FF 会在调整 SVG 大小之前渲染 SVG，而不是像使用矢量 gfx 那样反过来进行渲染

更新：感谢 David Bushell，他在 Resolution Independence With SVG 上写了一篇精彩的文章。

【讨论】：

似乎在100% 设置width 和height 属性也可以解决问题。
是的，这可以提供帮助，但它在我的测试中表现不佳，导致 FF 消耗的 CPU 比正常情况多。此外：浏览器将不再知道您文件的正确纵横比
+1 因为将 SVG 的尺寸设置为最大尺寸可能会解决我遇到的模糊问题。我注意到这只是 SVG 精灵的一个主要问题。如果 SVG 类似于徽标，您可以删除 width 和 height 属性，或者不设置 background-size 或将其设置为 cover - SVG 将是节点的大小并且不会在 Firefox 或 Safari 中似乎很模糊
使用transform="scale()"时问题依旧存在。
@Josh Mozilla 的跟踪器中是否有一个开放的错误？如果没有，你能创建一个吗？

【解决方案4】：

要制作 SVG 图像 scale to the size of its container，请确保您的 svg 标签设置了 viewBox：

<svg viewBox="0 0 347 189">

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

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

默认情况下，这将通过放大到适合的最大宽度或高度来保持其纵横比，无论哪个维度首先到达边界。

您可以通过各种有趣的方式更改 preserveAspectRatio 策略，如果该特定行为不是您想要的。

【讨论】：

与background-size 一起正常工作，而标记的答案则不能。
在 FF36 中按预期工作。

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

【讨论】：