Firefox non anti-aliasing sfondo in scala svg

Question

Sto lavorando su un design reattivo che richiede l'intestazione grafica in scala con la larghezza del viewport. Sono andato per un svg pensando che questo sarebbe in scala bene. (Eseguo il test per il supporto svg nel sito completo e sostituisco una gif con lo svg). In Firefox (13.0 su Windows 7) non è antialiasing a piccole dimensioni. Occasionalmente sembra buono in alcune dimensioni, e lo fa se aggiusto le dimensioni, ma voglio evitare di farlo. Chrome e Safari fanno l'anti-alias dell'immagine, e sembra buono.

Sto impostando lo background-size: 100% 100% in scala sul contenitore, ho provato anche cose come cover, ma sembra non fare alcuna differenza.

Ho provato ad aggiungere image-rendering: optimizeQuality;, ma questo non sembra aver aiutato.

Ho impostato una pagina di prova a http://axminster.digital.linneydesign.com/svg/ - quella in alto è l'immagine di sfondo, e quella sotto è esattamente lo stesso file, ma aggiunta in html direttamente come img. Ridimensionando il browser fino a dimensioni ridotte, vedrai il primo pixelato, ma quello inferiore rimarrà liscio.

Qualche idea su come posso lisciare questa immagine di sfondo senza fissarne le dimensioni?

grazie.

Answer 1

Dare l'elemento <svg> esterno nel file svg (sophie-conran.svg) una larghezza e un'altezza del 100%.

Quello che succede è che l'immagine svg viene rasterizzata alla larghezza e all'altezza che gli viene data, cioè 1000 px x 350 px e quella bitmap viene quindi convertita nella dimensione richiesta. Se si impostano le percentuali di larghezza e altezza, la bitmap viene creata alla dimensione finale e non c'è ridimensionamento della bitmap.

Aggiornamento:

Questo è tutto discutibile con Firefox 24 e al di là, però, si può fare quello che ti piace e che funziona sempre correttamente cioè senza pixellation.