w3schools - style svg with css

Firefox no anti-aliasing escalado fondo svg

Question

Estoy trabajando en un diseño receptivo que requiere que el gráfico del encabezado se escale 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 al contenedor, he intentado cosas como cover también, pero parece no hacer diferencia.

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

Configuré 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 agregó en el html directamente como una 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 la altura 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.

Actualizar:

Todo esto es discutible con Firefox 24 y más allá, puedes hacer lo que quieras y siempre funcionará correctamente, es decir, sin píxeles.