La Tecnología SVG

1. La Tecnología SVG Escuela Politécnica Superior de Ingeniería de Gijón Autor: ABEL RIONDA RODRÍGUEZ NOVIEMBRE 2006

2. ÍNDICE • Introducción • Características básicas • Características avanzadas • Perfiles • Aplicaciones de SVG • Soporte actual • Conclusiones

3. INTRODUCCIÓN Estudiar las características básicas de este lenguaje así como sus aplicaciones • Introducción • Características básicas • Características avanzadas • Perfiles • Aplicaciones de SVG • Soporte actual • Conclusiones

4. CARACTERÍSTICAS BÁSICAS (I) • Estructura de un documento SVG • Introducción • Características básicas • Características avanzadas • Perfiles • Aplicaciones de SVG • Soporte actual • Conclusiones -Naturaleza XML -Modelo de renderizado -Reutilización de código mediante <defs/> y <use>

5. CARACTERÍSTICAS BÁSICAS (II) • Sistemas de coordenadas • Introducción • Características básicas • Características avanzadas • Perfiles • Aplicaciones de SVG • Soporte actual • Conclusiones -Unidades: px,pt,in,com,mm,en,em,% -Importancia del atributo viewBox

6. CARACTERÍSTICAS BÁSICAS (III) • Transformaciones • Introducción • Características básicas • Características avanzadas • Perfiles • Aplicaciones de SVG • Soporte actual • Conclusiones -Atributo transform -Escalado, translación, rotación y skew -Utilización de etiqueta <g/> -Posibilidad de aplicar una matriz de transformación -Más complejo -Las nuevas coordenadas se calculan como

7. CARACTERÍSTICAS BÁSICAS (IV) • Elementos geométricos • Introducción • Características básicas • Características avanzadas • Perfiles • Aplicaciones de SVG • Soporte actual • Conclusiones -<line/> -<circle/> -<rect/> -<ellipse/> -<polyline/> -<polygon/> -<path/>. Curvas de bezier cuadráticas, cúbicas, arcos elípticos… • Elementos de texto -<text/> • Estilos -Posibilidad de aplicar estilos CSS a SVG -Atributos importantes: fill y stroke

8. CARACTERÍSTICAS BÁSICAS (V) • Estilos (continuación) • Introducción • Características básicas • Características avanzadas • Perfiles • Aplicaciones de SVG • Soporte actual • Conclusiones -Atributo style embebido -Bloque style en el propio documento -Referencia a un documento CSS

9. CARACTERÍSTICAS BÁSICAS (VI) • Efectos • Introducción • Características básicas • Características avanzadas • Perfiles • Aplicaciones de SVG • Soporte actual • Conclusiones -Gradientes -Para los atributos fill y stroke -<linearGradient/> <radialGradient/> -Filtros -<filter/> -Efectos de brillo, color, iluminación, efectos morfológicos… -Clipping Path -<clipPath/>

10. CARACTERÍSTICAS AVANZADAS (I) • Interactividad • Introducción • Características básicas • Características avanzadas • Perfiles • Aplicaciones de SVG • Soporte actual • Conclusiones • Javascript • Tipos: • Eventos a través del ratón: onmouseout, onmouseover,onmousemove,onclick… • Eventos de interfaz: onfocusin, onfocusout, activate • Eventos de teclado: onkeydown,onkeyup,onkeypress • Eventos de estado: onSVGLoad,onSVGUnload,onSVGError • Scripts embebidos o externos: • Ejemplo

11. CARACTERÍSTICAS AVANZADAS (II) • Animación • Introducción • Características básicas • Características avanzadas • Perfiles • Aplicaciones de SVG • Soporte actual • Conclusiones • SMIL • Tipos: • Animación de transformaciones (escalado, rotación..): <animateTransform/> • Animación de color:<animateColor/> • Animación a través de un Path:<animateMotion/> • Animación de valores numéricos (<animate/>) y no numéricos <set/> • Atributos destacables:begin,end,from,to,dur,calcMode,fill,repeatDur… • Ejemplo

12. CARACTERÍSTICAS AVANZADAS (III) • Accesibilidad • Introducción • Características básicas • Características avanzadas • Perfiles • Aplicaciones de SVG • Soporte actual • Conclusiones • Etiquetas <title/> y <desc/> • Hiperenlaces • XLINK

13. CARACTERÍSTICAS AVANZADAS (IV) • Metadatos • Introducción • Características básicas • Características avanzadas • Perfiles • Aplicaciones de SVG • Soporte actual • Conclusiones • Etiquetas <metadata/> • Importancia en la búsqueda semántica • Basados en RDF o DublinCore

14. PERFILES SVG (I) • Perfiles • Introducción • Características básicas • Características avanzadas • Perfiles • Aplicaciones de SVG • Soporte actual • Conclusiones • SVG Full • Orientado a dispositivos de escritorio • SVG Basic • Orientado a PDAs • SVG Tiny • Orientado a móviles

15. APLICACIONES DE SVG (I) • Aplicaciones SIG • Introducción • Características básicas • Características avanzadas • Perfiles • Aplicaciones de SVG • Soporte actual • Conclusiones • Uso de AJAX • getURL() o XMLHTTPRequest() • Ejemplo • Representación estadística • Librería de gráficos SVG • Características: • Varios tipos de gráficos: barras, líneas,sectorial,dispersión.. • Generación en diversos perfiles y exportación a otros formatos • Opciones de interactividad ,Animación,Scroll y Zoom • Configuración de la presentación: disposición de elementos ,opciones • de ejes, rejilla…

16. APLICACIONES DE SVG (II) • Representación estadística (continuación) • Introducción • Características básicas • Características avanzadas • Perfiles • Aplicaciones de SVG • Soporte actual • Conclusiones • Aplicaciones multidispositivo • CCPP/WURFL

17. SOPORTE ACTUAL (I) • Navegadores con soporte nativo • Introducción • Características básicas • Características avanzadas • Perfiles • Aplicaciones de SVG • Soporte actual • Conclusiones • Mozilla Firefox 2.0 • Opera (desde la versión 8) • Amaya • NetFront • Plugins disponibles • Adobe (multiplataforma) • SdVG:Desarrollado por BitFlash para móviles • Otras herramientas • Librerías Java: • Batik • Tinyline • Editores: • Inkscape

18. CONCLUSIONES • ¿Futuro de SVG? • Introducción • Características básicas • Características avanzadas • Perfiles • Aplicaciones de SVG • Soporte actual • Conclusiones • Nuevos navegadores con soporte nativo • Más aplicaciones en SVG • Adobe ha anunciado el abandono del soporte del plugin SVG