8

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.

2 Answers 2

10

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.

2
  • 1
    perfect, thank you so much. And thanks for the explanation, not just the solution. Aug 9, 2012 at 10:55
  • 2
    Whilst this did fix the issue for me in Firefox, it caused a new issue in iOS 5 and the stock Android browser (not the new Chrome browser on Android). One image has a ratio of about 3:1. When the height/width are given as exact amounts and the background-size is used to scale it renders fine. When I use 100% it renders a massive amount of white space above and beneath the image. Mar 11, 2013 at 19:26
1

The solution is to include the SVG as a tag, not as an external file. Firefox will apply the anti-aliasing correctly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.