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.
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.
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.
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á.
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.
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.
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.
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> 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.
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).
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.
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.
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.
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.
fx y fy para asegurar que se encuentran dentro de la circunferencia de un círculo (bug 330682).getComputedTextLength(), lo que mejora la compatibilidad con ciertos sitios web (bugs 311031 and 264380).<tspan> ahora soportan correctamente los atributos dx y dy y funcionan si los atributos x e y no han sido especificados (bug 311063).<path> tenía un atributo d con una cadena vacía (bug 318379).overflow ahora funciona para el elemento marker, usando la sintaxis overflow="visible", la cual antes no funcionaba correctamente (bug 320623).<style> del elemento marker sin que se lance ninguna excepción (bug 323589).documentElement.createSVGAngle() ahora está implementado (bug 327437).<stop> se convierte en hijo de otro elemento <stop> dicho elemento deja de ser un aserto (bug 328137).| Elemento | Notas |
|---|---|
| Módulo de estructura | |
| svg |
|
| g |
|
| defs |
|
| desc |
|
| title |
|
| metadata |
|
| symbol |
|
| use |
|
| Módulo de procesamiento condicional | |
| switch |
|
| Módulo de imagen | |
| image |
|
| Módulo de estilo | |
| style |
|
| Módulo de formas | |
| path |
|
| rect |
|
| circle |
|
| line |
|
| ellipse |
|
| polyline |
|
| polygon |
|
| Módulo de texto | |
| text |
|
| tspan |
|
| tref |
|
| textPath |
|
| altGlyph |
|
| altGlyphDef |
|
| altGlyphItem |
|
| glyphRef |
|
| Módulo de pinceles | |
| marker |
|
| Color Módulo de perfiles | |
| color-profile |
|
| Módulo de gradientes | |
| linearGradient |
|
| radialGradient |
|
| stop |
|
| Módulo de patrones | |
| pattern |
|
| Módulo de recorte | |
| clipPath |
|
| Módulo de máscaras | |
| mask |
|
| Módulo de filtros | |
| filter |
|
| feBlend |
|
| feColorMatrix |
|
| feComponentTransfer |
|
| feComposite |
|
| feConvolveMatrix |
|
| feDiffuseLighting |
|
| feDisplacementMap |
|
| feFlood |
|
| feGaussianBlur |
|
| feImage |
|
| feMerge |
|
| feMergeNode |
|
| feMorphology |
|
| feOffset |
|
| feSpecularLighting |
|
| feTile |
|
| feTurbulence |
|
| feDistantLight |
|
| fePointLight |
|
| feSpotLight |
|
| feFuncR |
|
| feFuncG |
|
| feFuncB |
|
| feFuncA |
|
| Módulo de cursores | |
| cursor |
|
| Módulos de hiperenlaces | |
| a |
|
| Módulo de vista | |
| view |
|
| Módulo de scripting | |
| script |
|
| Módulo de animación | |
| animate |
|
| set |
|
| animateMotion |
|
| animateTransform |
|
| animateColor |
|
| mpath |
|
| Módulo de fuentes | |
| font |
|
| font-face |
|
| glyph |
|
| missing-glyph |
|
| hkern |
|
| vkern |
|
| font-face-src |
|
| font-face-uri |
|
| font-face-format |
|
| font-face-name |
|
| definition-src |
|
| Módulo de extensibilidad | |
| foreignObject |
|
{{ languages( { "fr": "fr/SVG_dans_Firefox_1.5", "ja": "ja/SVG_in_Firefox_1.5", "pl": "pl/SVG_w_Firefoksie" } ) }}