Html Firefox SVG 图形模糊
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8954028/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Firefox SVG graphics blurry
提问by René Stalder
I have a responsive web design with a SVG logo/image which is dynamic with its container. All major browsers seem to support SVG really good.
我有一个带有 SVG 徽标/图像的响应式网页设计，它的容器是动态的。所有主要浏览器似乎都非常好地支持 SVG。
My SVG is dynamic, so if I scale up my browser window, the SVG does it too. In Chrome and IE9 it works like a charm. In Firefox the SVG is blurry at some sizes. But I can't say its all the time blurry when it's over the initial SVG size. It just seems not to rerender correctly all the time while I'm scaling up my browser window.
我的 SVG 是动态的，所以如果我放大浏览器窗口，SVG 也会这样做。在 Chrome 和 IE9 中，它就像一个魅力。在 Firefox 中，某些尺寸的 SVG 是模糊的。但是当它超过初始 SVG 大小时，我不能说它一直很模糊。当我放大浏览器窗口时，似乎没有一直正确地重新渲染。
That's what it looks like sometimes (have a look at it in fullsizeto see the difference):
有时这就是它的样子（查看全尺寸以查看差异）：
Maybe I'm using the wrong way to embed it. That's what my CSS and HTML look like:
也许我使用错误的方式来嵌入它。这就是我的 CSS 和 HTML 的样子：
<div id="logo"></div>
CSS:
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%;
}
Grab the SVG with the link in the CSS if you want to have a look at it. It's made with Adobe Illustrator.
如果您想查看它，请使用 CSS 中的链接获取 SVG。它是用 Adobe Illustrator 制作的。
Any idea how to fix that?
知道如何解决这个问题吗？
采纳答案by J?rn Berkefeld
Update 2013-10: Confirmed fixed in v24which now made it into the release channel
2013-10 更新：在 v24 中确认已修复，现在已进入发布频道
Update 2013-07: Bug is solved!Fix will make it into Firefox 24 which will be released somewhere between September and October
2013-07 更新：错误已解决！修复将使其进入 Firefox 24，它将在 9 月和 10 月之间发布
I read about a somewhat simple solution to this problem somewhere that I now use in my projects (will add source when i find it again):
我在我现在在我的项目中使用的某个地方读到了这个问题的一个有点简单的解决方案（当我再次找到它时会添加源代码）：
simply set width and height of the svg-container to the maximum values the image is likely going to have and you are fine. Works in all current browsers just fine. only restriction is, that firefox and opera (yes, the same two browsers that caused this mess) dont work well with very big images --> dont use too high values for the dimensions
只需将 svg-container 的宽度和高度设置为图像可能具有的最大值，就可以了。在所有当前浏览器中都可以正常工作。唯一的限制是，firefox 和opera（是的，导致这种混乱的两个浏览器）不能很好地处理非常大的图像 --> 不要对尺寸使用太高的值
original file:
原始文件：
<svg width="64px" height="128px">
lets say the maxium width will be 3x that big, then your SVG should contain this:
假设最大宽度为 3 倍，那么您的 SVG 应包含以下内容：
<svg width="192px" height="384px">
(yes, the svgnode can have more attributes...)
（是的，svg节点可以有更多的属性...）
The reason why this works is that Opera and FF render SVGs before resizing them instead of the other way round as it is supposed to be done with vector gfx
这样做的原因是 Opera 和 FF 在调整 SVG 大小之前渲染它们，而不是相反，因为它应该使用 vector gfx 完成
UPDATE: credits go to David Bushell who wrote a wonderfull article on Resolution Independence With SVG.
更新：感谢 David Bushell，他写了一篇关于SVG 分辨率独立性的精彩文章。
回答by Phrogz
The problem is that when you use SVG as a background image Firefox chooses what size to render the vectors to, and then scales those image-based-pixels up as necessary. Here's a related bug: https://bugzilla.mozilla.org/show_bug.cgi?id=600207
问题在于，当您使用 SVG 作为背景图像时，Firefox 会选择渲染矢量的大小，然后根据需要放大这些基于图像的像素。这是一个相关的错误：https: //bugzilla.mozilla.org/show_bug.cgi?id=600207
The simplest fix here is not to use SVG as a background image, but to embed your SVG directly, or reference it via an <img>tag.
这里最简单的解决方法是不使用 SVG 作为背景图像，而是直接嵌入 SVG，或通过<img>标签引用它。
If you put up a working test case showing the problem and files then we can help you with actual code and fixes.
如果您提出了一个显示问题和文件的工作测试用例，那么我们可以帮助您编写实际代码和修复程序。
回答by ecmanaut
To make an SVG image scale to the size of its container, make sure your svg tag has a viewBoxset:
要使 SVG 图像缩放到其容器的大小，请确保您的 svg 标签具有一viewBox组：
<svg viewBox="0 0 347 189">
but no widthor heightattributes, i e not:
但没有width或height属性，即不是：
<svg width="347px" height="189px" viewBox="0 0 347 189">
This, by default, will retain its aspect ratio by scaling up to the largest width or height that fits, whichever dimension hits the boundary first.
默认情况下，这将通过放大到适合的最大宽度或高度来保持其纵横比，无论哪个尺寸先到达边界。
You can change preserveAspectRatiostrategy in all sorts of interesting ways, if that particular behaviour isn't the one you seek.
您可以通过各种有趣的方式更改preserveAspectRatio策略，如果该特定行为不是您所寻求的。
回答by David Zulaica
I've run into the exact same issue, myself. I was able to fix it in Firefox by editing the SVG in a text editor and changing the <svg>element's width attribute value to 100%, but leaving all other attribute values alone. In your particular example, here's the change to be made:
我自己也遇到了完全相同的问题。我能够在 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">
That did the trick for me and should do the same for you; I can't be 100% without a test case to work with, though.
这对我有用，对你也应该如此；但是，如果没有可使用的测试用例，我就无法 100% 做到。
NB: Setting both the width andthe height to 100% broke Safari's rendering of the SVG in my particular case. Be sure to only set the width to 100%.
注意：在我的特殊情况下，将宽度和高度都设置为 100% 会破坏 Safari 对 SVG 的渲染。确保仅将宽度设置为 100%。
回答by Damir Kotoric
The easiest solution is to scale up the SVG in a vector image editor like Illustrator. Scale it to the rendered resolution in the browser (or higher). Since it is a vector, scaling it up won't affect the file size.
最简单的解决方案是在 Illustrator 等矢量图像编辑器中放大 SVG。将其缩放到浏览器中的渲染分辨率（或更高）。由于它是一个矢量，因此将其放大不会影响文件大小。
回答by user1010892
Another similar "gotcha" I found was when I exported an svg from illustrator the width and heights weren't round numbers - so when I opened the SVG in an editor the width was something like "100.6789px". By carefully editing the image in illustrator first to be round numbers and then using the same width and height for firefox it solved fuzzy images for me.
我发现的另一个类似的“问题”是当我从 illustrator 导出 svg 时，宽度和高度不是整数 - 所以当我在编辑器中打开 SVG 时，宽度类似于“100.6789px”。通过首先在 illustrator 中仔细编辑图像为整数，然后对 Firefox 使用相同的宽度和高度，它为我解决了模糊图像。
