Comenzando con SVGEste tutorial te ayudará a comenzar a usar SVG.

Gráficos vectoriales escalables(SVG) es un lenguaje de marcadoXML para describirgráficos vectorialesen dos dimensiones. Básicamente, es a los gráficos lo queHTML es al texto.

SVG es un estándar Web abierto basado en texto. Está expresamente diseñado para trabajar con otros estándares web comoCSS,DOM, ySMIL.

Documentación

Referencia de elementos SVG

Detalles sobre cada uno de los elementos SVG.

Referencia de atributos SVG

Detalles sobre cada uno de los atributos SVG.

Referencia del interfaz DOM SVG

Detalles acerca del API SVG DOM, para interacción con JavaScript.

Aplicando efectos SVG a contenido HTML

SVG trabaja con withHTML,CSS andJavaScript. Usa SVG paramejorar una página HTML normal o aplicación web.

Comunidad

• Ver foros de Mozilla...
  • como lista de correo
  • como grupo de noticias
  • como RSS

Herramientas

• Área de pruebas SVG
• Validador SVG (Discontinuado)
• Más Herramientas...
• Otros recursos:XML,CSS,DOM,Canvas

Ejemplos

• GoogleMaps (superposición de rutas) &Docs (gráficos con hojas de cálculo)
• Menús SVG de burbuja
• Directríces de autoría de SVG
• Una visión general delProyecto SVG de Mozilla
• Preguntas frecuentes acerca de SVG y Mozilla
• Diapositivas y demos de la charla sobreSVG y Mozilla en el SVG Open 2009
• SVG como imagen
• Animación SVG con SMIL
• Galería de arte SVG
• Más ejemplos (carto.net)

Animaciones e interacciones

Al igual que HTML, SVG tiene un modelo de objetos de documento (DOM) y eventos, y es accesible desde JavaScript. Esto permite al desarrollador crear animaciones ricas y permite e imágenes interactivas.

• Algunos SVG muy atractivos ensvg-wow.org
• Extension Firefox (Grafox) para añadir soporte al subconjunto de animaciónSMIL
• Manipulación interactiva defotos
• Transformaciones HTML usandoforeignObject de SVG

Mapeado, gráficos, juegos y experimentos 3D

Aunque un poco de SVG puede dar mucho recorrido a la hora de mejorar contenidos web, aquí tienes algunos ejemplos de uso de gran cantidad de SVG.

• Tetris
• Connect 4
• Mapa de población de los Estados Unidos de América
• Caja 3D box yCajas 3D
• jVectorMap (mapas interactivos para visualización de datos)
• JointJS (Librería JavaScript para la creación de diagramas)