Escuela Politécnica Superior de Ingeniería de Gijón

Presentación del tema: "Escuela Politécnica Superior de Ingeniería de Gijón"— Transcripción de la presentación:

1 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

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

3 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

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

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

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