La Tecnolog

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 -Reutilizac
ión de código mediante ltdefs/gt y ltusegt
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 ltg/gt
-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

-ltline/gt -ltcircle/gt -ltrect/gt -ltellipse/gt -ltpolylin
e/gt -ltpolygon/gt -ltpath/gt. Curvas de bezier
cuadráticas, cúbicas, arcos elípticos

• Elementos de texto

-lttext/gt

• 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 -ltlinearGradient
/gt ltradialGradient/gt
-Filtros
-ltfilter/gt -Efectos de brillo, color,
iluminación, efectos morfológicos
-Clipping Path
-ltclipPath/gt
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,onSVGErro
  r
• 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..) ltanimateTransform/gt
• Animación de colorltanimateColor/gt
• Animación a través de un PathltanimateMotion/gt
• Animación de valores numéricos (ltanimate/gt) y no
  numéricos ltset/gt
• Atributos destacablesbegin,end,from,to,dur,calcMo
  de,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 lttitle/gt y ltdesc/gt

• 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 ltmetadata/gt
• 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)
• SdVGDesarrollado 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