Table of Contents
Introducción ............................................................................................................................... 1
Beneficios de la utilización de SVG ................................................................................................ 3
SVG: Estructura básica de un documento ......................................................................................... 4
SVG: Definición del sistema de coordenadas .................................................................................... 4
SVG: Geometría ......................................................................................................................... 5
Rectángulo ........................................................................................................................ 5
Círculo .............................................................................................................................. 5
Elipse ............................................................................................................................... 6
Línea ................................................................................................................................ 6
Polilínea ............................................................................................................................ 7
Polígono ............................................................................................................................ 8
Texto ................................................................................................................................ 8
Caminos ............................................................................................................................ 9
SVG: Elementos disponibles ....................................................................................................... 11
SVG ............................................................................................................................... 11
G ................................................................................................................................... 11
Referencias dentro de SVG ................................................................................................. 12
DEFS .............................................................................................................................. 12
DESC y TITLE ................................................................................................................. 13
SYMBOL ........................................................................................................................ 13
USE ............................................................................................................................... 13
IMAGE ........................................................................................................................... 15
Transformaciones .............................................................................................................. 16
SVG: Scripting ......................................................................................................................... 17
Funciones de ejemplo para el de DOM .................................................................................. 18
Funciones de ejemplo para el uso del modelo de objetos de SVG ............................................... 20
SMIL ...................................................................................................................................... 21
HTML/XHTML ....................................................................................................................... 26
Implementación, herramientas y enlaces de interés .......................................................................... 28
Introducción
Para empezar diremos que SVG significa Scalable Vector Graphics y que define un lenguaje basado en XML para la
construcción de gráficos vectoriales 2D con multitud de efectos y características avanzadas.
• XML o XHTML representan los datos, la información a representar. Algunos lenguajes basados en XML como
MathML o CML definen conjuntos concretos de tags destinados a un fin específico como son el lenguaje
matemático o químico.
• CSS o XSL definen la presentación que tendrán los datos en diversos medios.
1
SVG/JavaScript
SVG es el equivalente, basado en estándares, a la opción comercial de Macromedia: Flash. SVG es una
recomendación del W3, el contenido de cada fichero es XML y no un formato binario cerrado.
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<g style="fill-opacity:0.7; stroke:black; stroke-width:0.1cm;">
<circle cx="6cm" cy="2cm" r="100" style="fill:red;" transform="translate(0,50)" />
<circle cx="6cm" cy="2cm" r="100" style="fill:blue;" transform="translate(70,150)" />
<circle cx="6cm" cy="2cm" r="100" style="fill:green;" transform="translate(-70,150)"/>
</g>
</svg>
Desde Febrero del 2004 la implementación de Mozilla que soporta SVG ha sido dotada con la posibilidad de cambi#
ar el backend de renderizado SVG en función de la plataforma. Actualmente, el más avanzado es el basado en la
GDI+ de Windows.
• Mozilla soporta documentos que contienen SVG, MathML, XHTML o XUL en un mismo documento. Esto es
posible gracias a que Mozilla soporta espacios de nombres (XML Namespaces).
• Todo este contenido puede ser accedido via scripting utilizando el SVG DOM, el cual es compatible con el XML
DOM).
• Objetos gráficos vectoriales (líneas, elipses, rectángulos, etc). Estos pueden ser agrupados, formateados, trans#
formados y compuestos para su visualización.
• Imágenes.
• Texto.
• Clipping Paths.
• Alpha Masks.
• Filtros gráficos.
El SVG DOM permite a los lenguajes de script el acceso a todos los elementos, propiedades y atributos que com#
ponen un documento SVG. Además, existe la posibilidad de asignar eventos a los distintos elementos (onmouseover
o onclick).
2
SVG/JavaScript
Gracias a la estandarización de los elementos en SVG y su integración con XHTML, podemos tener conviviendo
scripts dentro de XHTML y SVG dentro del mismo documento.
El tipo MIME que utiliza SVG es "image/svg+xml" [RFC3023]. Se recomienda que los ficheros SVG tengan
extensión .SVG o .SVGZ (en minúsculas) en todas las plataformas.
http://www.w3.org/2000/svg
• Clipping.
• Animaciones.
• Puede escalarse.
• Pueden mostrase de forma progresiva (igual que los GIF), no teniendo que esperar a que todo el documento sea
descargado.
• Pueden distribuirse en formato comprimido GZIP para la reducción del tiempo de descarga .SVGZ.
• XML 1.0
• XML Namespaces
• XPointer
3
SVG/JavaScript
• CSS
• XSL
• UNICODE
4
SVG/JavaScript
En SVG el área de dibujo es infinita. A continuación veremos varias formas de decirle al visor de SVG en qué área
estamos interesados. El área utilizado por el documento creado se conoce como Viewport. Podemos establecer el
tamaño del Viewport utilizando los atributos "width" y "height" del elemento <SVG>.
Los valores que pueden tomar estos atributos pueden ser simplemente números (si expresamos el tamaño en píxeles)
o en unas unidades concretas (puntos, pulgadas, picas, centímetros, milímetros, etc).
SVG: Geometría
Rectángulo
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
<rect x="25" y="25" width="100" height="100" fill="blue" opacity="0.5" />
<rect x="50" y="50" rx="20" ry="20" width="100" height="100" fill="red" opacity="0.5" />
<rect x="75" y="75" width="100" height="100" fill="green" opacity="0.5" />
</svg>
"x" e "y". Desplazamiento del objeto respecto al origen de coordenadas. “width" y “height". Ancho y alto del objeto.
“rx" y “ry". Redondean las esquinas del objeto. El resto de atributos añaden propiedades sobre el estilo de la
visualización.
Figure 1. rectangulo.svg
Círculo
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
<circle cx="100px" cy="100px" r="50px" style="fill:red; stroke:black; stroke-width:0.1cm"
<circle cx="100px" cy="100px" r="50px" style="fill:green; stroke:black; stroke-width:0.1c
<circle cx="100px" cy="100px" r="50px" style="fill:blue; stroke:black; stroke-width:0.1cm
</svg>
“cx" e “cy". Desplazamiento del objeto respecto al origen de coordenadas el cual indica el centro del objeto. “r".
5
SVG/JavaScript
Radio del objeto. El resto de atributos añaden propiedades sobre el estilo de la visualización.
Figure 2. circulo.svg
Elipse
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
<ellipse cx="96.5" cy="143" rx="59.5" ry="41" style="fill:rgb(255,229,242); stroke:rgb(24
</svg>
“cx" y “cy". Desplazamiento del objeto respecto al origen de coordenadas el cual indica el centro del objeto. “rx" y
“ry". Definen el radio horizontal y vertical de la elipse.
Figure 3. elipse.svg
Línea
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
<line x1="10" y1="10" x2="150" y2="150" stroke="red" stroke-width="2" />
</svg>
6
SVG/JavaScript
“x1" y “y1". Coordenadas del inicio de la línea. “x2" y “y2". Coordenadas del fin de la línea.
Figure 4. linea.svg
La continuidad de las líneas pude ser modificada gracias al atributo de estilo "stroke-dasharray". Con este atributo
podemos definir la línea como una sucesión de tramos visibles e invisibles. El atributo "stroke-dasharray" permite
definir una lista de números separados por comas de forma que por parejas nos marcan la continuidad de la línea.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
<line x1="10" y1="10" x2="150" y2="150" stroke="red" stroke-width="8" stroke-dasharray="1
</svg>
Figure 5. linea-dash.svg
Polilínea
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100">
<polyline points="0,0 0,20 40,20 40,0 80,0 80,20 120,20 120,0 160,0 160,20 200,20 200,0 2
style="stroke:red; stroke-width:2; fill:none;" transform="translate(20,20)" />
</svg>
7
SVG/JavaScript
Figure 6. polilinea.svg
Polígono
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="200">
<polygon points="100,0,50,174,0,128,0,0"
style="stroke:none; stroke-width:1; stroke-opacity:1; fill:#d5fbfd; fill-opacity
</svg>
Figure 7. poligono.svg
Texto
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="200">
<text style="font-size: 72; font-weight: 900; fill: yellow; stroke: black; stroke-width:
<tspan x="10" y="100">Texto en SVG</tspan>
</text>
</svg>
Figure 8. texto.svg
8
SVG/JavaScript
También existe la posibilidad de introducir elemenos definidos en otros espacios de nombres como es XHTML. Así,
podemos insertar pedazos de XHTML dentro del documento SVG. Este ejemplo no funciona con el plugin de
Adobe, para visualizarlo utilizar el Mozilla.
Caminos
Definición de un conjunto de líneas de forma encadenada y con diferentes formas.
• T. Creación de una línea curva suave cuadrática de Bezier hasta la coordenada indicada.
• Z. Cerrar el comino.
Todos estos comandos tienen también su equivalente en minúsculas, de forma que el posicionamiento en este caso
se considerará relativo y no absoluto.
Figure 9. caminos.svg
9
SVG/JavaScript
Debido a la complejidad de definir figuras geométricas basadas en caminos, se hace mucho más recomendable el
uso de programas gráficos de edición para este menester.
10
SVG/JavaScript
G
El elemento “G" se utiliza como contenedor para agrupar distintos objetos y así poder realizar sobre ellos acciones
de forma global. Podemos asignarle un ID y así realizar transformaciones, animaciones u otras acciones. Las defini#
ciones de grupos pueden utilizarse de forma aninada.
11
SVG/JavaScript
<linearGradient id="MyGradient">
</linearGradient>
<rect style="fill:url(#MyGradient)"/>
Otro tipo de referencias aceptadas en SVG y que se refieren a recursos externos al documento, son las realizadas
mediante XLink:
<svg xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="foo.gif" />
</svg>
Para utlizar enlaces XLink dentro del documento, es necesario especificar previamente la definición del espacio de
nombres asociado al mismo:
xmlns:xlink="http://www.w3.org/1999/xlink"
DEFS
Sección de declaración de los elementos que posteriormente podrán ser referenciados dentro del documento. La
forma de referenciar los elementos declarada está descrita en el apartado anterior (Referencias dentro de SVG).
12
SVG/JavaScript
DESC y TITLE
Son dos elementos que no tiene ningun tipo de representación gráfica. Sólo se utilizan para la documentación y
especificación del documento SVG. Cualquier contenedor o elemento gráfico dentro del documento puede definir su
propio título y descripción.
SYMBOL
Este elemento permite definir patrones de objeto gráfico para después poder instanciarlos con un USE. Mediante
SYMBOL conseguimos reutilizar elementos que se declaran de forma reiterativa dentro del documento y así mejor#
as la legibilidad y la semántica del documento SVG.
USE
Cualquier elemento gráfico de tipo SYMBOL, G, USE u otros elementos pueden potencialmente ser considerados
como patrones y ser susceptibles de reutilizarse mediante la utilización de USE.
13
SVG/JavaScript
14
SVG/JavaScript
<g style="stroke-width:40">
<use id="MyUse" xlink:href="#MyPath" class="MyUseClass" style="stroke-dashoffset:50" />
</g>
</svg>
IMAGE
Este elemento permite la inclusión de imágenes externas rasterizadas en el área definida por las coordenadas de se
adjuntan.
15
SVG/JavaScript
Transformaciones
Permiten realizar cambios de coordenadas sobre los elementos representados. Sobre cualquier objeto dentro de un
documento SVG podermos realizar las siguientes transformaciones:
• Rotación. Giro en grados que debe realizar el elemento con respecto al origen de coordenadas.
16
SVG/JavaScript
SVG: Scripting
Tenemos dos métodos para modificar el contenido de un fichero SVG mediante Scripting:
• Considerando el documento como un fichero XML estándar y utilizando DOM para su manipulación.
• Considerando el documento como un fichero específico SVG y utlizando el modelo de objetos de SVG para su
manipulación.
17
SVG/JavaScript
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="236" height="295">
<script type="text/ecmascript"><![CDATA[
18
SVG/JavaScript
19
SVG/JavaScript
20
SVG/JavaScript
function Scaleout() {
var xform = document.getElementById('foo').createSVGTransform();
xform.setScale(0.5,0.5);
var id = svg_element.suspendRedraw(1000);
transform_list.appendItem(xform);
svg_element.unsuspendRedraw(id);
}
function DOMTest() {
var p = document.getElementById('barx').points.getItem(0);
for (var i=50;i<250;++i) {
p.x = i;
}
}
function DOMTest2() {
var p = document.getElementById('bary').points.getItem(0);
for (var i=50;i<250;++i) {
p.y = i;
}
}
SMIL
SMIL permite la incorporacion de animaciones basadas en tiempo dentro de un documento SVG. Realmente, dentro
del documento SVG contamos con una serie de apoyos para poder animar cualquiera de elementos que hemos
definido. Hay que tener en cuenta que cada animación definida variará los valores de uno de los atributos del ele#
mento durante el periodo especificado (ya esté delimitado por la ejecución de un evento o por un tiempo fijo).
Ejemplos de animaciones:
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg width="500" height="510" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
21
SVG/JavaScript
22
SVG/JavaScript
23
SVG/JavaScript
24
SVG/JavaScript
25
SVG/JavaScript
HTML/XHTML
26
SVG/JavaScript
SVG, al ser un formato XML, donde mejor se integra es en otros documentos XML. Si partimos de la versión XML
de HTML, es decir, XHTML, nos encontraremos con que podemos embeber el codigo SVG dentro del propio docu#
mento XHTML. Esto es gracias a que XHTML soporta distintos espacios de nombres.
Con este tipo de documento integramos tecnologías como CSS, Scripting, XML y ahora SVG. Todos estos recursos
disponibles en un único tipo de documento XHTML.
Sobre esta base nace el proyecto SVG Mozilla que intenta hacer de este navegador un motor nativo de renderizado
de SVG (sin la utilización de ningun plugin externo). Esto quiere decir que podremos añadir código SVG "inline" en
el documento XHTML y que el navegador lo interpretará al igual que hace con el código HTML.
En teoría consigueremos el mismo comportamiento que con el plugin de Adobe, aunque ahora no sea del todo cierto
debido al estado del desarrollo del proyecto. A día de hoy la versión que de Mozilla SVG que más funciones soporta
es la basada en el GDI+ de Windows
27
SVG/JavaScript
http://www.w3.org/Graphics/SVG/SVG-Implementations.htm8#viewer
• Mozilla SVG
http://ftp.mozilla.org/pub/mozilla/nightly/latest-trunk/
http://www.adobe.com/svg
http://xml.apache.org/batik
http://cocoon.apache.org [???]
http://www.croczilla.com/~alex/fosdem2003/
http://www.croczilla.com/~alex/fosdem2004/
• ZSVGGraph en Zope
http://www.txoutcome.org/scripts/zope/readings/zsvg_graph_site
28
SVG/JavaScript
• KSVG
http://svg.kde.org/
KSVG is an implementation of the World Wide Web Consortium's Scalable Vector Graphics recommendation.
It is designed to be a plugin for the Konqueror web browser.
http://www.jasc.com/products/webdraw/
29