Firefox does not smooth svg scaled background

Question

I am working on a flexible design that requires the graphic title to scale with the width of the viewport. I went for svg thinking it would scale well. (I am testing svg support on a full site and replacing gif with svg). In Firefox (13.0 on Windows 7), it does not smooth it out at small sizes. Sometimes it looks good on some sizes and does it if I correct the sizes, but I want to avoid this. Chrome and Safari smooth the image and it looks good.

I set the background-size: 100% 100% for scaling to the container, I also tried things like cover , but it doesn't seem to matter.

I tried to add image-rendering: optimizeQuality; but that didn't seem to help.

I set the test page to http://axminster.digital.linneydesign.com/svg/ - the top image is the background image, and the one below is the same file, but added to the html directly as img . Scaling the browser to a small size, you will see the top pixel, but the bottom will remain smooth.

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

thanks.

Answer 1

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

What happens is that the svg image is rasterized in the width and height that you give it, i.e. 1000px x 350px, and then the bitmap is converted to the required size. If you make percentages in width and height, then the bitmap is created with a finite size and there is no scaling of the bitmap.

Update:

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