Firefox不是反锯齿缩放背景svg [英] Firefox not anti-aliasing scaled background svg

问题描述

我正在开发一个响应式设计，需要标题图形与视口的宽度缩放。我去了一个svg认为这将扩展好。 （我测试svg支持在完整的网站，并用svg替换gif）。
在Firefox（在Windows 7上为13.0），它不是小尺寸的抗锯齿。它偶尔看起来好一些大小，如果我修复的维度，但我想避免这样做。

我设置的是 background-size：100 ％100％缩放到容器，我也尝试过覆盖，但似乎没有什么区别。

我已经尝试添加 image-rendering：optimizeQuality; ，但是这似乎没有帮助。 p>

我在 http://axminster.digital上设置了测试页.linneydesign.com / svg / - 顶部的一个是背景图像，下面的是完全相同的文件，但直接作为 img 。

任何关于我如何平滑这个背景图片的想法

解决方案

<发生的是，svg图像被光栅化在你给它的宽度和高度，即1000px x 350px，然后该位图被转换为所需的大小。

更新：

$ b b

这是所有的火狐24和超越，虽然，你可以做你喜欢的，它将总是工作正常，即没有像素化。

I'm working on a responsive design that requires the header graphic to scale with the width of the viewport. I've gone for an svg thinking that this would scale well. (I test for svg support in the full site, and replace a gif with the svg). In Firefox (13.0 on Windows 7) it's not antialiasing it at small sizes. It occassionally looks good at some sizes, and does if I fix the dimensions, but I want to avoid doing that. Chrome and Safari do anti-alias the image, and it looks good.

I'm setting the background-size: 100% 100% to scale to the container, I've tried things like cover as well, but seems to make no difference.

I've tried adding image-rendering: optimizeQuality; as well, but this doesn't seem to have helped.

I've set up a test page at http://axminster.digital.linneydesign.com/svg/ - the top one is the background image, and the one beneath is exactly the same file, but added in the html directly as an img. Scaling the browser down to small sizes, you'll see the top one pixelate, but the bottom one will stay smooth.

Any thoughts on how I can smooth this background image without fixing its dimensions?

thanks.

解决方案

Give the outer <svg> element in the svg file (sophie-conran.svg) a width and height of 100%.

What happens is that the svg image is rasterised at the width and height you give it i.e. 1000px x 350px and that bitmap is then converted to the required size. If you make the width and height percentages then the bitmap is created at final size and there's no bitmap scaling.

Update:

This is all moot with Firefox 24 and beyond though, you can do what you like and it will always work properly i.e. without pixellation.

这篇关于Firefox不是反锯齿缩放背景svg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！