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.
The solution is to include the SVG as a tag, not as an external file. Firefox will apply the anti-aliasing correctly.
来源：https://stackoverflow.com/questions/11879836/firefox-not-anti-aliasing-scaled-background-svg