SVG en Firefox 1.5

Firefox 1.5 marca la publicaci贸n del primer navegador de Mozilla que soporta el formato de gr谩ficos vectoriales escalables (SVG). El camino de este proyecto ha sido largo, nos satisface poner a disposici贸n de los desarrolladores esta tecnologia y estamos impacientes por ver sus frutos.

Firefox SVG es un subconjunto de SVG 1.1, pero no es ninguno de los perfiles oficiales (Tiny, Basic, Full). En este documento se puede encontrar una lista completa de los elementos que han sido implementados en Firefox 1.5. Adem谩s encontrar谩 informaci贸n sobre las limitaciones en su implementaci贸n.

La peculiar implementaci贸n que hemos realizado puede dificultar el 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 cuandos de estos detalles sobre de la implementaci贸n pueden haber cambiado. Por desgracia el mapa de ruta actual situa la publicaci贸n de Firefox con Gecko 1.9 en el primer trimestre de 2007. Sin embargo si usted desea comenzar a experimentar con las nuevas funcionalidades, tiene a su disposici贸n en las nightly builds las 煤ltimas evoluciones, y si lo desea puede consultar la tabla actualizada sobre la implementaci贸n de SVG en la versi贸n de desarrollo. Como podreis comprobar, la cosa avanza a buen ritmo 鈽.


Performance

Firefox usa el mismo motor de renderizado, cairo, en todas las plataformas en las que navega. Por lo tanto sus caracter铆sticas de interpretaci贸n ser谩n similares. La Performance en linux es la 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.

Coordinate range

Si tu contenido posee geometr铆a con un gran rango de coordenadas, necesitar谩s tener cuidado con los problemas causados por el uso interno de cairo de una representaci贸n en punto fijo de 16.16 bit para sus c谩lculos. Cairo no clip primitives antes de la rasterizaci贸n, por lo que las coordenadas finales tras la transformaci贸n que excedan el rango desde -32678 a 32677 causar谩n errores de renderizado y posiblemente un funcionamiento bastante lento.

Texto en Windows 98

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

Selecci贸n de fuente

Si usted est谩 familiarizado con CSS probablemente sabr谩 que puede 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 esta 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 grupo

La propiedad de opacidad de grupo "opacity" permite que los objetos contenedores SVG puedan ser tratados como capas semi-transparentes, y sea separado de propiedades "fill-opacity" y "stroke-opacity" La implementacion 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.

Actualmente la opacidad de grupo est谩 implementado solo para <g> pero no para <text> o <svg>

Stroking fonts

On the MS-Windows and OS-X platforms, the stroke of the text will not exactly match the fill. The error is typically quite small, and can be covered by using a slightly thicker stroke. An example of this difference:


Imagen:Text-fill-stroke.png

<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 de sobremanera el rendimiento en Firefox 1.5.

Eventos

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

Nuestro manejo del evento "onload" es actualmente no-est谩ndar, pero creemos que a煤n as铆 no impide su uso correcto. Mientras que el c贸digo especificado por el atributo "onload" ser谩 llamado para cada elemento, un evento SVGLoad es 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 SVG Authoring Guidelines Jonathan Watt's explica los problemas comunes.

Situaciones del uso

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

Animaci贸n

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.

Elementos, estado de la implementaci贸n

Elemento Notas
M贸dulo Estructura
svg
  • Implementado.
  • currentScale and currentTranslate DOM attributes are implemented, but there is no pan and zoom user interface.
  • SVGSVGElement
    • Atributos no implementados: contentScriptType, contentStyleType, viewport, useCurrentView, currentView
    • Bindings no implementados: pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll, createSVGAngle, getElementById
g
  • Implementado.
defs
  • Implementado.
desc
  • Implementado.
  • Only stored in the DOM, no user interface.</td>
title
  • Implementado.
metadata
  • Implementado.
  • Only stored in the DOM, no user interface.</td>
symbol
  • Implementado.
use
  • Implementado.
  • Only works for internal document references (bug 269482).
  • Doesn't completely follow <svg:use> cascading rules (bug 265894).
  • Doesn't deliver events to a SVGElementInstance tree (bug 265895).
Conditional Processing Module
switch
  • Implementado.
Image Module
image
  • Implementado.
  • Only works for raster images (bug 272288).
Style Module
style
  • Implementado.
Shape Module
path
  • Implementado.
  • SVGPathElement Interfaz
    • Atributos no implementados: pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList
    • Bindings no implementados: getTotalLength, getPointAtLength, getPathSegAtLength
  • SVGPathSegList Interface
    • Bindings no implementados: replaceItem()
rect
  • Implementado.
circle
  • Implementado.
line
  • Implementado.
ellipse
  • Implementado.
polyline
  • SImplementado.
polygon
  • Implementado.
M贸dulo Texto
text
  • Implementado.
  • SVGTextElement
    • Atributos no implementados: rotate, textLength, lengthAdjust
    • Bindings no implementados: getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString
    • Bindings not functional at onload time: getExtentOfChar
tspan
  • Implementado.
  • SVGTSpanElement
    • Atributos no implementados: rotate, textLength, lengthAdjust
    • bindings no implementados: getNumberOfChars, getComputedTextLength, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString
tref
  • No implementado.
textPath
  • No implementado.
altGlyph
  • No implementado.
altGlyphDef
  • No implementado.
altGlyphItem
  • No implementado.
glyphRef
  • No implementado.
M贸dulo Marker
marker
  • Implementado.
M贸dulo Color-Profile
color-profile
  • No implementado.
M贸dulo Gradientes
linearGradient
  • Implementado.
radialGradient
  • Implementado.
stop
  • Implementado.
M贸dulo Pattern
pattern
  • No implementado.
M贸dulo Clip
clipPath
  • Implementado.
  • Won't handle clip paths with have elements with different clip-rule properties or that reference other clipPaths. (bug 267224).
M贸dulo Mask
mask
  • No implementado.
M贸dulo Filtro
filter
  • No implementado.
feBlend
  • No implementado.
feColorMatrix
  • No implementado.
feComponentTransfer
  • No implementado.
feComposite
  • No implementado.
feConvolveMatrix
  • No implementado.
feDiffuseLighting
  • No implementado.
feDisplacementMap
  • No implementado.
feFlood
  • No implementado.
feGaussianBlur
  • No implementado.
feImage
  • No implementado.
feMerge
  • No implementado.
feMergeNode
  • No implementado.
feMorphology
  • No implementado.
feOffset
  • No implementado.
feSpecularLighting
  • No implementado.
feTile
  • No implementado.
feTurbulence
  • No implementado.
feDistantLight
  • No implementado.
fePointLight
  • No implementado.
feSpotLight
  • No implementado.
feFuncR
  • No implementado.
feFuncG
  • No implementado.
feFuncB
  • No implementado.
feFuncA
  • No implementado.
M贸dulo Cursor
cursor
  • No implementado.
M贸dulo hiperenlace
a
  • Implementado en un binding XBL - object no es del tipo SVGAElement.
  • Solo est谩n implementados los atributos xlink:href y xlink:show
  • Sobre el atributo target vea bug 300868
M贸dulo visi贸n
view
  • No implementado.
M贸dulo Script
script
  • Implementado.
M贸dulo Animaci贸n
animate
  • No implementado.
set
  • No implementado.
animateMotion
  • No implementado.
animateTransform
  • No implementado.
animateColor
  • No implementado.
mpath
  • No implementado.
M贸dulo Fuentes
font
  • No implementado.
font-face
  • No implementado.
glyph
  • No implementado.
missing-glyph
  • No implementado.
hkern
  • No implementado.
vkern
  • No implementado.
font-face-src
  • No implementado.
font-face-uri
  • No implementado.
font-face-format
  • No implementado.
font-face-name
  • No implementado.
definition-src
  • No implementado.
M贸dulo Extensibilidad
foreignObject
  • Implementado, but not built.