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

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

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

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>

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

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

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

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

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/>

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

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

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

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

PERFILES SVG (I) Perfiles SVG Full SVG Basic SVG Tiny 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

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…

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

SOPORTE ACTUAL (I) Navegadores con soporte nativo Plugins disponibles 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

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