Introduccin a SVG

1
Introducción a SVG

• Jaime García Marsá
• jaime_at_legendarya.com

2
Qué es SVG?

• Es un lenguaje XML definido por el Consorcio Web
  para la representación de gráficos vectoriales

3
Mapas de bits
4
Gráficos vectoriales
(700,100)?
(400,300) r 200
(100,500)?
5
Características Vectoriales

• No sirven para representar fotografías
• Se pueden escalar sin perder calidad
• Ocupan menos espacio
• Son fáciles de modificar

6
XML

• Ejemploltsvggt ltcircle cx10 cy10
  r10/gtlt/svggt

7
XML

• Ejemploltsvggt ltcircle cx10 cy10
  r10/gtlt/svggt

8
XML

• Ejemploltsvggt ltcircle cx10 cy10 r10
  /gtlt/svggt

9
XML

• Ejemploltsvggt ltcircle cx10 cy10 r10
  /gtlt/svggt

10
XML

• Ejemploltsvggt ltcircle cx10 cy10 r10
  /gtlt/svggt

11
Aplicaciones

• Animaciones
• Presentar la información
• Nuevos grados de interacción

12
Ventajas

• XML (texto)?
• Integración (XSL, CSS, DOM, SMIL,...)?
• Vectorial (Escalable, poco espacio)?
• Accesible (buena estructuración,...)?

13
Accesibilidad
ltggt lttitlegtVentas de la empresa por
regiónlt/titlegt ltdescgt Este diagrama muestra
las ventas de la compañía lt/descgt lt!-- Bar
chart defined as vector data --gt lt/ggt
14
Accesibilidad
ltggt lttitlegtVentas de la empresa por
regiónlt/titlegt ltdescgt Este diagrama muestra
las ventas de la compañía lt/descgt lt!-- Bar
chart defined as vector data --gt lt/ggt
15
Accesibilidad
ltggt lttitlegtVentas de la empresa por
regiónlt/titlegt ltdescgt Este diagrama muestra
las ventas de la compañía lt/descgt lt!-- Bar
chart defined as vector data --gt lt/ggt
16
Accesibilidad
ltggt lttitlegtVentas de la empresa por
regiónlt/titlegt ltdescgt Este diagrama muestra
las ventas de la compañía lt/descgt lt!-- Bar
chart defined as vector data --gt lt/ggt
17
Versiones

• Versión 1.1
• SVG Basic (SVGB)?
• SVG Tiny (SVGT)?
• SVG Print

18
Versión 1.2 (last call)?

• Texto en varias líneas
• Mayor integración (Xforms, SMIL, XML Events,...)?
• Múltiples páginas
• sXBL (XML Binding Language)?

19
Implementaciones

• Adobe SVG Viewer
• Corel SVG Viewer
• Navegador Mozilla
• Navegador Ópera
• Linux (Gnome y KDE)?
• Diversos dispositivos móviles (Tiny 1.1)?
• Renesis Viewer (v 1.2)?