Firefox no anti-aliasing escala fondo svg

Question

Estoy trabajando en un diseño receptivo que requiere el gráfico del encabezado para escalar con el ancho de la ventana gráfica. Me he ido a la mierda pensando que esto escalaría bien. (Pruebo el soporte de svg en el sitio completo, y reemplazo un gif con el svg). En Firefox (13.0 en Windows 7) no es antialiasing en tamaños pequeños. De vez en cuando se ve bien en algunos tamaños, y lo hace si corrijo las dimensiones, pero quiero evitar hacer eso. Chrome y Safari hacen anti-alias de la imagen, y se ve bien.

Estoy configurando el background-size: 100% 100% para escalar el contenedor, he intentado cosas como cover también, pero parece no hacer la diferencia.

He intentado agregar image-rendering: optimizeQuality; también, pero esto no parece haber ayudado.

He configurado una página de prueba en http://axminster.digital.linneydesign.com/svg/ - la superior es la imagen de fondo, y la que está debajo es exactamente el mismo archivo, pero se agrega en el html directamente como img. Al escalar el navegador a tamaños pequeños, verá el pixelado superior uno, pero el inferior permanecerá sin problemas.

¿Alguna idea sobre cómo puedo suavizar esta imagen de fondo sin fijar sus dimensiones?

gracias.

Answer 1

Proporcione el elemento externo <svg> en el archivo svg (sophie-conran.svg) con un ancho y una altura del 100%.

Lo que sucede es que la imagen svg se trama en el ancho y alto que le da, es decir, 1000px x 350px y ese mapa de bits se convierte al tamaño requerido. Si realiza los porcentajes de ancho y alto, entonces el mapa de bits se crea con el tamaño final y no hay escala de mapa de bits.

Actualización:

Todo esto es discutible con Firefox 24 y más allá, sin embargo, se puede hacer lo que le gusta y siempre funcionará correctamente es decir, sin pixelación.