Geek asks and answers

Firefox and Opera: SVG and background size lead to poor rendering

I have some elements on the page that use the SVG file as the background image. It works great in Opera, Chrome and Safari, only Firefox makes the graphics really pixelated.

I already did a search on this topic, there are even some similar questions here: SO:
SVG error in Firefox
Firefox does not smooth out large-scale svg background
Firefox SVG graphics are blurry

Some suggestions were not to scale the SVG too much with help background-sizeand give it width="100%" height="100%".

I only scale SVG by 5%, so there really shouldn't be too much. The addition width="100%" height="100%"was slightly fix pixelation, but it is still really blurry compared to other browsers.

What helped this related comment: http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/#comment-573707

Initially, the width and height were 22px. Now I have installed both 200px and voilà, SVG displays as crisp as it should be, but now Opera makes it a little blurry / very bad! In addition, when scaling, the image file is "cropped". Therefore, instead of scaling in proportion to the graph, it seems to scale in this field. Is there any fix for this?

: . " ", .

+5
1

pls

img {
-ms-interpolation-mode: bicubic;
image-rendering: -moz-crisp-edges;
background:transparent; }
+1

More articles:


All Articles