Gráficos Firefox SVG borrosos

Question

Tengo un diseño web sensible con un logotipo/imagen SVG que es dinámico con su contenedor. Todos los navegadores principales parecen ser compatibles con SVG.

Mi SVG es dinámico, así que si amplío la ventana de mi navegador, el SVG también lo hace. En Chrome e IE9 funciona como un encanto. En Firefox, el SVG es borroso en algunos tamaños. Pero no puedo decir que todo el tiempo esté borroso cuando haya superado el tamaño SVG inicial. Parece que no se reenvía correctamente todo el tiempo mientras estoy escalando la ventana de mi navegador.

Eso es lo que parece a veces (echar un vistazo a que en fullsize para ver la diferencia):

Tal vez estoy usando el camino equivocado para incrustarlo. Eso es lo que mi CSS y HTML se parecen:

<div id="logo"></div> 

CSS:

#logo { 
    background-image: url('http://dl.dropbox.com/u/569168/jess.svg'); 
    height: 22em; 
    background-repeat: no-repeat; 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
} 

Grab el SVG con el enlace de la CSS, si usted quiere tener una mirada en ella. Está hecho con Adobe Illustrator.

¿Alguna idea de cómo solucionarlo?

Answer 1

actualización 2013-10: Confirmado fija en v24 que hizo ahora en el canal de liberación

---

actualización 2013-07: Bug is solved! Fix hará en Firefox 24, que será lanzado en algún lugar entre septiembre y octubre

---

Leí acerca de una solución algo simple a este problema en alguna parte que ahora uso en mis proyectos (agregará fuente cuando lo encuentro de nuevo):

simplemente configure el ancho y la altura del contenedor svg a los valores máximos que la imagen probablemente tenga y usted está bien. Funciona en todos los navegadores actuales bien. única restricción es que Firefox y Opera (sí, los mismos dos navegadores que causaron este desastre) no trabajan bien con muy grandes imágenes -> no utiliza los valores demasiado altos para las dimensiones

archivo original:

<svg width="64px" height="128px"> 

digamos el ancho maxium será 3x tan grande, entonces su SVG debe contener lo siguiente:

<svg width="192px" height="384px"> 

(sí, el nodo svg puede tener más atributos ...)

La razón por la que esto funciona es que Opera y FF hacen IVS antes de cambiar el tamaño de ellos en lugar de al revés, ya que se supone que debe hacerse con GFX vector

ACTUALIZACIÓN: Los créditos van a David Bushell que escribió un artículo maravilloso en Resolution Independence With SVG .

Answer 2

El problema es que cuando utiliza SVG como imagen de fondo, Firefox elige el tamaño al que se renderizarán los vectores, y luego escala esos píxeles basados ​​en imágenes según sea necesario. Aquí hay un error relacionado: https://bugzilla.mozilla.org/show_bug.cgi?id=600207

La solución más simple aquí no es usar SVG como imagen de fondo, sino incrustar su SVG directamente, o hacer referencia a ella a través de una etiqueta <img>.

Si coloca un estuche de prueba que muestra el problema y los archivos, podemos ayudarlo con el código real y las soluciones.

Answer 3

Me he encontrado con el mismo problema, yo mismo. Pude arreglarlo en Firefox editando el SVG en un editor de texto y cambiando el valor del atributo de ancho del elemento <svg> al 100%, pero dejando todos los demás valores de atributo solo. En el ejemplo particular, aquí está el cambio a realizar:

<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" 
    x="0px" 
    y="0px" 
    width="100%" 
    height="189px" 
    viewBox="0 0 347 189" 
    enable-background="new 0 0 347 189" 
    xml:space="preserve"> 

Que hizo el truco para mí y debe hacer lo mismo para usted; Sin embargo, no puedo estar al 100% sin un caso de prueba para trabajar.

Nota: Al establecer tanto el ancho como el, la altura hasta el 100% rompió la versión de Safari del SVG en mi caso particular. Asegúrese de establecer solo el ancho al 100%.

Answer 4

para hacer una imagen SVG scale to the size of its container, asegúrese de que su etiqueta de SVG tiene un conjunto viewBox:

<svg viewBox="0 0 347 189"> 

pero no width o height atributos, es decir, no:

<svg width="347px" height="189px" viewBox="0 0 347 189"> 

Esto, por defecto, retendrá su relación de aspecto escalando hasta el ancho o alto más grande que se ajuste, cualquiera que sea la dimensión que golpee primero el límite.

Puede cambiar la estrategia preserveAspectRatio de muchas maneras interesantes, si ese comportamiento particular no es el que busca.

Answer 5

La solución más fácil es escalar el SVG en un editor de imágenes vectoriales como Illustrator. Escala a la resolución renderizada en el navegador (o superior). Dado que es un vector, su escalado no afectará el tamaño del archivo.

Answer 6

Otro "gotcha" similar que encontré fue cuando exporté un svg del ilustrador, el ancho y las alturas no eran números redondos, así que cuando abrí el SVG en un editor el ancho era algo así como "100.6789px". Al editar cuidadosamente la imagen en illustrator primero para que sean números redondos y luego usar el mismo ancho y alto para firefox, resolvió las imágenes borrosas para mí.