SVG en Firefox

Firefox 2 sigue avanzando en la mejora de la implementación de Gráficos vectoriales escalables (SVG). Aunque el único elemento añadido a los ya soportados por Firefox 1.5 ha sido <textPath>, se han resuelto varios fallos y se ha incorporado parte de la especificación.

Firefox SVG es un subconjunto de SVG 1.1, pero no es ninguno de los perfiles oficiales (Tiny, Basic, Full). Al final de este documento se puede encontrar una lista completa de los elementos SVG y su estado de implementación en Firefox 2.0. El resto del documento aporta información sobre las limitaciones en la implementación.

La particular implementación que hemos realizado puede dificultar la creación de contenidos. Le pedimos que tenga paciencia mientras trabajamos en la implementación completa de esta extensa especificación.

Mientras lee esto, usted puede preguntarse cuántos de estos detalles sobre de la implementación pueden haber cambiado. Por desgracia la hoja de ruta actual sitúa la publicación de Firefox con la nueva versión de Gecko en el primer trimestre de 2007. Sin embargo si desea empezar a experimentar con las nuevas funcionalidades, tiene a su disposición en las compilaciones nocturnas las últimas evoluciones. También puede consultar la tabla actualizada sobre la implementación de SVG en la versión de desarrollo.

Rendimiento

Firefox usa el mismo motor de renderizado, cairo, en todas las plataformas. Por lo tanto sus características de interpretación serán similares. El rendimiento en Linux es el más difícil de predecir, esto es debido a las distintas implementaciones que hacen los diversos servidores X de la extensión RENDER.

En Windows el renderizado de SVG es bastante más rápido que en otras plataformas.

Rango de coordenadas

Si el contenido posee una geometría con un inmenso rango de coordenadas, habrá que tener cuidado con los problemas ocasionados por el uso interno de cairo para la representación de punto fijo de 16.16 bits para los cálculos. Cairo no recorta las primitivas antes del proceso de rasterización por lo que las coordenadas finales que excedan el rango de -32678 a 32677 tras la transformación provocarán errores de renderizado y posiblemente un rendimiento muy bajo.

Texto en Windows 98

Un lamentable efecto secundario de usar Cairo como backend de renderizado en Windows es que el renderizado de texto no funcionará en Windows 98. En realidad la cosa es aún peor, si aparece cualquier texto durante el renderizado de contenidos SVG, todo el dibujo se parará.

Selección de fuente

Si está familiarizado con CSS probablemente sabrá que pueden especificar fuentes alternativas para las propiedades 'font', por si los glifos de una fuente concreta no están disponibles. El actual motor de renderizado de SVG sólo tratará de usar la primera fuente especificada, y si ésta no existe, usará una fuente del sistema. Las fuentes secundarias nunca son usadas, por ejemplo, font-family="Arial,LucidaSansUnicode" no generará una fuente LucidaSansUnicode, aun en el caso de que Arial no esté disponible.

Impresión

Por desgracia, actualmente en la impresión no se aprovechan las propiedades vectoriales de SVG para generar una salida óptima, por contra, se renderiza según la resolución de la pantalla y luego la salida se hace como imagen.

Al imprimir en MS-Windows, el tamaño de la fuente será mucho más grande que el especificado por SVG.

Opacidad de grupos

La propiedad de opacidad de grupo opacity permite que los objetos contenedores SVG puedan ser tratados como capas semitransparentes, y está separada de las propiedades "fill-opacity" y "stroke-opacity". La implementación actual de "opacity" consume bastantes recursos, debería ser usada con mesura. "fill-opacity" y "stroke-opacity" son mucho más rápidas, y dependiendo de su contenido pueden aportar los mismos resultados.

Fuentes rotadas

En las plataformas Microsoft Windows y Mac OSX, un texto rotado no es rellenado completamente. El error es por lo general despreciable y puede solucionarse usando un relleno un poquito más grueso. A continuación se muestra un ejemplo con la diferencia:

<image>

<image> no soporta imágenes SVG en Firefox 1.5, sólo los formatos de imagen rasterizados que Firefox maneja.

Todas las instancias de <image> tienen una copia separada de la imagen que está siendo usada, lo cual es algo a tener en cuenta si tu contenido está usando múltiples copias de una imagen para un icono o algo parecido. Desafortunadamente, <use> en contenido <image> cuenta como otra copia en este caso.

De manera adicional, un uso intensivo de imágenes rasterizadas en SVG puede degradar sobremanera el rendimiento en Firefox 1.5.

Eventos

Soportamos los atributos de SVG para eventos, a excepción de onfocusin, onfocusout, y onactivate.

Nuestro actual manejo del evento onload no es estándar, pero creemos que aún así no impide su uso correcto. Mientras que el código especificado por el atributo onload sea llamado para cada elemento, un evento SVGLoad será llamado únicamente para el elemento <svg> raíz. Algunos métodos DOM devolverán basura o error si son llamados antes de que el elemento correspondiente haya sido renderizado, algo que tendrás que tener en cuenta al escribir código onload. Dichos métodos son getBBox, getScreenCTM, etc...

No damos soporte a los eventos para el teclado específicos de Adobe (onkeydown, onkeyup).

Interoperabilidad

Si está trabajando con contenidos SVG actuales, puede encontrar problemas al cargarlos en Firefox. La mayoría de los problemas suelen ser triviales y son el resultado de una implementación más estricta en Firefox. En Guías de estilo para crear SVG, Jonathan Watt explica problemas comunes.

Situaciones de uso de SVG

Firefox 1.5 maneja SVG como un documento completo, o como referencia para los elementos embed, object, e iframe. Actualmente no puede ser usado en HTML o XHTML como fuente del elemento img, ni para las propiedades CSS relativas a las imágenes.

Animaciones

Firefox 1.5 no implementa la animación declarativa, pero soporta scripting dinámico. Doug Shepers lo ha usado para crear SmilScript, una pequeña biblioteca de Javascript que implementa parte de la animación declarativa de SVG.

Fallos corregidos en Firefox 2

Firefox 2 ha arreglado algunos fallos en su implementación para SVG. Esta sección presenta un repaso rápido a los arreglos más interesantes.

• Se ha solucionado un problema al rellenar y rotar texto en el que la posición del dibujo no era reiniciada correctamente entre dos operaciones (bug 333615).

• Los gradientes radiales ahora mantienen los atributos fx y fy para asegurar que se encuentran dentro de la circunferencia de un círculo (bug 330682).

• La longitud del texto ahora puede ser calculada usando su método getComputedTextLength(), lo que mejora la compatibilidad con ciertos sitios web (bugs 311031 and 264380).

• Los elementos <tspan> ahora soportan correctamente los atributos dx y dy y funcionan si los atributos x e y no han sido especificados (bug 311063).

• Se ha mejorado la lógica de invalidación en el redibujado, lo que evita el parpadeo de los píxeles en ciertos casos (bug 312269).

• Arreglado un fallo que impedía que los eventos fuesen manejados apropiadamente por objetos expuestos por el camino de recorte de otro objeto (bug 315861).

• Arreglado un fallo que podía provocar el cierre de la aplicación si un elemento <path> tenía un atributo d con una cadena vacía (bug 318379).

• El atributo overflow ahora funciona para el elemento marker, usando la sintaxis overflow="visible", la cual antes no funcionaba correctamente (bug 320623).

• Ahora se puede acceder al atributo <style> del elemento marker sin que se lance ninguna excepción (bug 323589).

• Ahora se pueden usar valores porcentuales en el radio de un gradiente radial (bug 323669).

• El método documentElement.createSVGAngle() ahora está implementado (bug 327437).

• Cuando un elemento <stop> se convierte en hijo de otro elemento <stop> dicho elemento deja de ser un aserto (bug 328137).

• Ahora funciona el cambio de la altura, anchura y orientación de los pinceles (bug 325728).

• El tamaño de las fuentes impresas en Windows ya no es tan grande como el especificado por el SVG (bug 314707).

Estado de la implementación de los elementos