Firefox and Opera: SVG e dimensioni in background producono risultati errati

Question

Ho alcuni elementi in una pagina che utilizza un file SVG come immagine di sfondo. Funziona bene in Opera, Chrome e Safari, solo Firefox rende la grafica davvero pixelata.

ho già fatto una ricerca su questo argomento, ci sono anche alcune domande simili qui sul SO:
SVG rendering badly in Firefox
Firefox not anti-aliasing scaled background svg
Firefox SVG graphics blurry

Alcuni suggerimenti erano di non scalare il formato SVG troppo utilizzando background-size ea Dateglielo width="100%" height="100%".

Ho solo scalato l'SVG del 5%, quindi non dovrebbe essere troppo. Aggiungendo width="100%" height="100%" è stato corretto un po 'la pixelizzazione, ma è ancora in realtà sfocato rispetto agli altri browser.

Che ha aiutato era questo commento collegato: http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/#comment-573707

In origine la larghezza e l'altezza erano 22px. Ora ho impostato sia a 200px che a voilà, l'SVG rende il rendering nitido come dovrebbe - ma ora Opera lo rende un po 'sfocato/davvero brutto! Inoltre, durante l'ingrandimento, la grafica viene "tagliata". Quindi, invece di ridimensionare proporzionalmente, la grafica sembra essere ingrandita nella sua scatola. C'è qualche soluzione per questo?

La cosa interessante è: come immagine di sfondo per un pulsante, rende sfocato. Come immagine di sfondo in un campo di input, la definirò "eccessivamente nitida".

Answer 1

pls aggiungere queste inferiore a quella di elemento nel foglio di stile

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