Firefox SVG 图形模糊 [英] Firefox SVG graphics blurry

问题描述

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

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

有时就是这样(在 修复将使其进入 Firefox 24，它将在 9 月到 10 月之间发布

<小时>

我在某个地方读到了一个稍微简单的解决这个问题的方法，我现在在我的项目中使用它(当我再次找到它时会添加源代码):

只需将 svg-container 的宽度和高度设置为图像可能具有的最大值，您就可以了.适用于所有当前浏览器.唯一的限制是，firefox 和opera(是的，导致这种混乱的两个浏览器)不能很好地处理非常大的图像 --> 不要对尺寸使用太高的值

原始文件:

假设最大宽度是 3 倍，那么你的 SVG 应该包含这个:

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

这样做的原因是 Opera 和 FF 在调整 SVG 大小之前渲染它们，而不是相反，因为它应该使用矢量 gfx 来完成

更新:感谢 David Bushell，他写了一篇关于 分辨率与 SVG 无关.

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.

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.

That's what it looks like sometimes (have a look at it in fullsize to see the difference):

Maybe I'm using the wrong way to embed it. That's what my CSS and HTML look like:

<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%;
}

Grab the SVG with the link in the CSS if you want to have a look at it. It's made with Adobe Illustrator.

Any idea how to fix that?

解决方案

Update 2013-10: Confirmed fixed in v24 which now made it into the release channel

---

Update 2013-07: Bug is solved! Fix will make it into Firefox 24 which will be released somewhere between September and October

---

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

original file:

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

lets say the maxium width will be 3x that big, then your SVG should contain this:

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

(yes, the svg node can have more attributes...)

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

UPDATE: credits go to David Bushell who wrote a wonderfull article on Resolution Independence With SVG.

这篇关于Firefox SVG 图形模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！