La Tecnología SVG
Autor:
ABEL RIONDA RODRÍGUEZ
NOVIEMBRE 2006
Escuela Politécnica Superior de Ingeniería de Gijón
• Introducción• Características básicas• Características avanzadas• Perfiles • Aplicaciones de SVG• Soporte actual• Conclusiones
ÍNDICE
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
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
<?xml version="1.0" encoding="iso-8859-1" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg id="main" xmlns=http://www.w3.org/2000/svg>[…]</svg>
-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
(0,0) x
y
<svg id="main" width="400" height="400"xmlns=http://www.w3.org/2000/svg viewBox="0 0 10 5">[…]</svg>
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/>
<g id="grupo" grupo transform="scale(2,1.5) "><!-- código SVG al que se aplica el escalado-></g>
-Posibilidad de aplicar una matriz de transformación
<g id="grupo" grupo transform="matrix(a,b,c,d,e,f) "><!-- código SVG al que se aplica el escalado-></g>
x1 =ax0 +cy0+e
y1=bx0+dy0+f
-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…
-<text/>
Elementos de texto
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
<rect x ="10" y= "20" width="200" height="200" style="fill:red;stroke:black">
-Bloque style en el propio documento
<?xml version="1.0" encoding="iso-8859-1" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg id="main" xmlns=http://www.w3.org/2000/svg><style type="text/css"><![CDATA[.miestilo{ fill:red;stroke:black }]]><rect class="miestilo" x ="10" y= "20" width="200" height="200">
</svg>
-Referencia a un documento CSS<?xml-stylesheet type="text/css" href="misEstilos.css"?><?xml version="1.0" encoding="iso-8859-1" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg id="main" xmlns=http://www.w3.org/2000/svg><rect class="miestilo" x ="10" y= "20" width="200" height="200">
</svg>
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
<?xml version="1.0" encoding="iso-8859-1" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg id="main" xmlns="http://www.w3.org/2000/svg">
<rect x ="10" y= "20" style="fill:red" width="200" height="200" onmouseover="cambiaColor(evt)"/>
<script type="text/ecmascript"><![CDATA[var data;function cambiaColor(evt){var pathobj=evt.target;var pathstyle = pathobj.style;pathstyle.setProperty ('fill', "yellow",null);}]]></script></svg>
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
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="8cm" height="3cm" viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example anim01 - demonstrate animation elements</desc> <rect x="1" y="1" width="798" height="298" fill="none" stroke="blue" stroke-width="2" /> <animate attributeName="x" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="300" to="0" /> <animate attributeName="y" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="0" /> <animate attributeName="width" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="300" to="800" /> <animate attributeName="height" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="300" /> </rect>
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/>
<svg id="main" width="400" height="400"xmlns=http://www.w3.org/2000/svg <title>An example of a computer network</title>[...]<g id="ComputerA"> <title>Computer A</title> <desc>A common desktop PC</desc> </g> <g id="ComputerB"> <title>Computer B</title> <desc>A common desktop PC</desc> </g></svg>
Hiperenlaces
-XLINK
<a xlink:href="http://www.w3.org"> <ellipse cx="2.5" cy="1.5" rx="2" ry="1" fill="red" /> </a>
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
<metadata><rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:dc ="http://purl.org/dc/elements/1.1/"> <rdf:Description rdf:about=""><foaf:Image rdf:about=""><foaf:maker rdf:resource="http://www.fundacionctic.org"/></foaf:Image><dc:title>Exportaciones</dc:title><dc:subject>Exportaciones en algunos países</dc:subject><dc:creator>Abel </dc:creator><dc:publisher>Abel </dc:publisher><dc:description>SVG Statistical Chart</dc:description><dc:date>12/11/2006</dc:date><dc:language>en</dc:language><dc:rights></dc:rights><dc:contributor></dc:contributor><dc:coverage></dc:coverage><dc:type></dc:type><dc:format></dc:format><dc:identifier></dc:identifier><dc:source></dc:source><dc:relation></dc:relation></rdf:Description></rdf:RDF></metadata>
PERFILES SVG (I)
Perfiles• Introducción• Características
básicas• Características
avanzadas• Perfiles • Aplicaciones de
SVG• Soporte actual• Conclusiones
-SVG FullOrientado a dispositivos de escritorio-SVG Basic Orientado a PDAs-SVG TinyOrientado 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 formatosOpciones de interactividad ,Animación,Scroll y ZoomConfiguración de la presentación: disposición de
elementos ,opcionesde 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 -CCPP/WURFL
Datosentrada
Librería SVG(PINTAIUS)
Aplicaciones multidispositivo
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
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
Top Related