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

问题描述

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

我的SVG是动态的，所以如果我扩大浏览器窗口，SVG也是。在Chrome和IE9它的工作原理像一个魅力。在Firefox中，SVG在某些大小上是模糊的。但是我不能说它的所有时间模糊，当它超过了初始的SVG大小。

这是有时看起来像（在 修复会进入Firefox 24，将在9月和10月之间释放。

---

我阅读了一个有点简单的解决方案，我现在在我的项目中使用（将添加源，当我再次找到它）：

简单的设置宽度和高度的svg容器的最大值，图像可能会有，你是罚款。在所有当前浏览器工作就好了。只有限制是，火狐和歌剧（是的，导致这种混乱的同样的两个浏览器）不能很好地与非常大的图像 - >不要使用太高的值尺寸

原始档案：

 < svg width =64pxheight =128px> 
  

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

 < svg width =192pxheight =384px> 
  

（是的， svg 更多的属性...）

这样做的原因是，Opera和FF在调整大小之前渲染SVG，而不是其他方式，因为它应该做向量gfx

更新：credit to David Bushell谁写了一个奇妙的文章 Resolution Independence With 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屋！