SVG
Comenzando con SVG Este tutorial te ayudará a comenzar a usar SVG.
Gráficos vectoriales escalables (SVG) es un lenguaje de marcado XML para describir gráficos vectorialesen dos dimensiones. Básicamente, es a los gráficos lo que HTML es al texto.
SVG es un estándar Web abierto basado en texto. Está expresamente diseñado para trabajar con otros estándares web como CSS, DOM, y SMIL.
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 with HTML, CSS and JavaScript. Usa SVG para mejorar una página HTML normal o aplicación web.
Comunidad
- Ver foros de Mozilla...
Herramientas
- Área de pruebas SVG
- Validador SVG (Discontinuado)
- Más Herramientas...
- Otros recursos: XML, CSS, DOM, Canvas
Ejemplos
- Google Maps (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 del Proyecto SVG de Mozilla
- Preguntas frecuentes acerca de SVG y Mozilla
- Diapositivas y demos de la charla sobre SVG 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 en svg-wow.org
- Extension Firefox (Grafox) para añadir soporte al subconjunto de animación SMIL
- Manipulación interactiva de fotos
- Transformaciones HTML usando
foreignObject
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 y Cajas 3D
- jVectorMap (mapas interactivos para visualización de datos)
- JointJS (Librería JavaScript para la creación de diagramas)