html5 - etiqueta - svg tag g

Gráficos Firefox SVG borrosos

Question

Tengo un diseño web receptivo 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 mi ventana del 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 (échale un vistazo en fullsize para ver la diferencia):

Tal vez estoy usando la forma incorrecta de incrustarlo. Así es mi aspecto CSS y HTML:

<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%;
}

Tome el SVG con el enlace en el CSS si desea echarle un vistazo. Está hecho con Adobe Illustrator.

¿Alguna idea de como arreglarlo?

Answer 1

El problema es que cuando usas SVG como imagen de fondo, Firefox elige a qué tamaño representar los vectores y luego ajusta los píxeles según la imagen 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 caso de prueba que muestra el problema y los archivos, podemos ayudarlo con el código y las soluciones reales.

Answer 2

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 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 su ejemplo particular, aquí está el cambio que debe hacerse:

<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">

Eso hizo el truco para mí y debería hacer lo mismo por ti; Sin embargo, no puedo estar al 100% sin un caso de prueba para trabajar.

NB: Al establecer tanto el ancho como la altura en un 100%, se rompió el renderizado de SVG de Safari en mi caso particular. Asegúrese de establecer solo el ancho al 100%.

Answer 4

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í.

Answer 5

Para hacer que una escala de imagen SVG sea del tamaño de su contenedor , asegúrese de que su etiqueta svg tenga un conjunto viewBox :

<svg viewBox="0 0 347 189">

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

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

Esto, de forma predeterminada, mantendrá su relación de aspecto al escalar hasta el ancho o alto más grande que se ajuste, cualquiera que sea la dimensión que llegue primero al límite.

Puede cambiar la estrategia de preserveAspectRatio en todo tipo de formas interesantes, si ese comportamiento en particular no es el que busca.

Answer 6

Actualización 2013-10: confirmado corregido en v24 que ahora se convirtió en el canal de publicación

Actualización 2013-07: ¡ Se solucionó el error! Fix lo convertirá en Firefox 24, que se lanzará en algún lugar entre septiembre y octubre

Leí acerca de una solución algo simple para este problema en alguna parte que ahora uso en mis proyectos (agregaré la fuente cuando la encuentre de nuevo):

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

archivo original:

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

digamos que el ancho máximo será 3x tan grande, entonces su SVG debería contener esto:

<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 procesan SVG antes de redimensionarlos en lugar de hacerlo al revés, como se supone que debe hacerse con el vector gfx.

ACTUALIZACIÓN: los créditos van a David Bushell, quien escribió un maravilloso artículo sobre Resolution Independence With SVG .