Vous êtes sur la page 1sur 30

SVG

Tecnologías base de cliente
SVG

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 1/30
SVG

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 2/30
SVG

Índice de contenido
SVG......................................................................................................................................................4
Introducción .........................................................................................................................................4
Beneficios de la utilización de SVG ....................................................................................................5
SVG: Estructura básica de un documento ...........................................................................................6
SVG: Definición del sistema de coordenadas ......................................................................................7
SVG: Geometría ...................................................................................................................................7
Rectángulo ......................................................................................................................................7
Círculo ............................................................................................................................................8
Elipse ..............................................................................................................................................9
Línea ...............................................................................................................................................9
Polilínea .........................................................................................................................................10
Polígono ........................................................................................................................................10
Texto ..............................................................................................................................................11
Caminos ........................................................................................................................................11
SVG: Elementos disponibles .............................................................................................................13
SVG ...............................................................................................................................................13
G ....................................................................................................................................................13
Referencias dentro de SVG ...........................................................................................................14
DEFS .............................................................................................................................................14
DESC y TITLE .............................................................................................................................15
SYMBOL ......................................................................................................................................15
USE ...............................................................................................................................................15
IMAGE ..........................................................................................................................................17
Transformaciones ..........................................................................................................................18
SVG: Scripting ...................................................................................................................................19
Funciones de ejemplo para el de DOM .........................................................................................19
Funciones de ejemplo para el uso del modelo de objetos de SVG ................................................22
SMIL ..................................................................................................................................................22
HTML/XHTML ................................................................................................................................28
Referencias ........................................................................................................................................30

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 3/30
SVG

SVG

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. 
Repasando algunas de las tecnologías o estándares del W3, tenemos que: 
● 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. 
● SVG define la representación de gráficos dentro de cualquier documento. 
● SMIL permite realizar animaciones basadas en tiempo. 
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 cambiar el backend de renderizado SVG en función de la plataforma. Actualmente, el 
más avanzado es el basado en la GDI+ de Windows. 
Implicaciones de este cambio: 
● 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 vía scripting utilizando el SVG DOM, el cual es 
compatible con el XML DOM). 
SVG es un lenguaje para la descripción de gráficos vectoriales en 2D en XML. 
SVG permite la utilización de tres tipos de objetos gráficos: 

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 4/30
SVG

● Objetos gráficos vectoriales (líneas, elipses, rectángulos, etc). Estos pueden ser agrupados, 
formateados, transformados y compuestos para su visualización. 
● Imágenes. 
● Texto. 
SVG soporta características avanzadas como: 
● Transformación anidadas (matrices de transformación). 
● Clipping Paths. 
● Alpha Masks. 
● Filtros gráficos. 
● Interactividad y dinamismo, soportados tanto de forma declarativa como vía scripting. 
El SVG DOM permite a los lenguajes de script el acceso a todos los elementos, propiedades y 
atributos que componen un documento SVG. Además, existe la posibilidad de asignar eventos a los 
distintos elementos (onmouseover o onclick). 
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. 
Espacio de nombre utilizado por SVG: 
http://www.w3.org/2000/svg

DOCTYPE para la versión 1.0: 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

DOCTYPE para la versión 1.1: 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Beneficios de la utilización de SVG


● Renderizado con antialiasing. 
● Patrones de relleno y gradientes. 
● Filtros y efectos avanzados. 
● Clipping. 
● Animaciones. 

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 5/30
SVG

● No pierde calidad si se hace zoom o si se redimensiona. 
● Puede escalarse (gráficos vectoriales). 
● Ideal para ser impreso. 
● 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. 
● Pueden ser indexados y buscados debido a que su contenido es XML y es textual. 
● Pueden ser transformados por hojas de estilos (XSL o CSS). 
● Integración con otras tecnologías XML del W3 y compatible con: 
○ XML 1.0 
○ XML Namespaces 
○ XLink y XML Base para la referencia a URIs 
○ XPointer 
○ CSS 
○ XSL 
○ DOM nivel 1 y 2 incluyendo DOM­Style y DOM­Event 
○ SMIL 1.0. Sólo algunas de sus funcionalidades 
○ HTML 4 y XHTML 1.0 
○ UNICODE 
○ WAI. Accesibilidad a contenidos web 

SVG: Estructura básica de un documento


<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
...
</svg>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://ww.w3.org/TR/xhtml1/xhtml1-transitional.dtd">
<html>
<body>
<embed src="http://a.com/b.svg" width="210" height="26"
type="image/svg+xml" />
</body>
</html>

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 6/30
SVG

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://ww.w3.org/TR/xhtml1/xhtml1-transitional.dtd">
<html>
<body>
<object type="image/svg+xml" data="layout02.svgz"
width="550" height="550">
<a href="layout02.svgz">
<img alt="layout02" src="layout02.png"/>
</a>
</object>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://ww.w3.org/TR/xhtml1/xhtml1-transitional.dtd">
<html>
<body>
<object type="image/svg+xml" data="layout02.svgz"
width="550" height="550">
<embed src="http://a.com/b.svg" width="210"
height="26" type="image/svg+xml" />
</object>
</body>
</html>

SVG: Definición del sistema de


coordenadas
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). 
El   origen   de   coordenadas   comienza   en   la   esquina   superior   izquierda,   incrementándose   la 
coordenada X hacia la derecha y la Y hacia abajo. El punto (0, 0) se conoce como origen   de 
coordenadas. 

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"

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 7/30
SVG

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. 
 

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" transform="translate(-20,20)" />
<circle cx="100px" cy="100px" r="50px"
style="fill:green; stroke:black; stroke-width:0.1cm"
transform="translate(10,-20)"/>
<circle cx="100px" cy="100px" r="50px"
style="fill:blue; stroke:black; stroke-width:0.1cm"
transform="translate(40,40)" />
</svg>

“cx" e “cy". Desplazamiento del objeto respecto al origen de coordenadas el cual indica el centro 
del objeto. “r". Radio del objeto. El resto de atributos añaden propiedades sobre el estilo de la 
visualización. 

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 8/30
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(242,0,125); stroke-width:3"/>
</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.  

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>

“x1" y “y1". Coordenadas del inicio de la línea. “x2" y “y2". Coordenadas del fin de la línea. 

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 9/30
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/DTD/svg10.dtd">
<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="18, 4, 4, 18" />
</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 240,0 240,20"
style="stroke:red; stroke-width:2; fill:none;"
transform="translate(20,20)" />
</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:1" />
</svg>

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 10/30
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: 0.6">
<tspan x="10" y="100">Texto en SVG</tspan>
</text>
</svg>

 
También existe la posibilidad de introducir elementos 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. 
<foreignObject x="82" y="100" width="40px" height="10px"
requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML">
<html xmlns="http://www.w3.org/1999/xhtml">
<span class="forobjpts">(100,100)</span>
</html>
</foreignObject>

Caminos
Definición de un conjunto de líneas de forma encadenada y con diferentes formas. 
Comandos disponibles para definir caminos: 
● M. Permite moverse a un punto determinado sin pintar ninguna línea. 
● L. Creación de una línea hasta la coordenada indicada. 
● H. Creación de una línea horizontal hasta la coordenada indicada. 

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 11/30
SVG

● V. Creación de una línea vertical hasta la coordenada indicada. 
● C. Creación de una línea curva hasta la coordenada indicada. 
● S. Creación de una línea curva suave (smooth) hasta la coordenada indicada. 
● Q. Creación de una línea curva cuadrática de Bezier hasta la coordenada indicada. 
● T. Creación de una línea curva suave cuadrática de Bezier hasta la coordenada indicada. 
● A. Creación de una línea elíptica 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. 
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
<path d="M10 10 h 100 v 30 h -100 v -30 Z" fill="blue" />
<path d="M10 80 H 110 V 130 H 10 V 80 Z" fill="red" />
<path d="M10 80 C 10 80 60 30 110 80 Z" fill="green" />
</svg>

 
<path d="M50,100 Q200,0 200,200 100,500 600,200" style="fill:none;
stroke:blue; stroke-width:2" />

 
<path d="M 10 10 L 65 90 A 5 10 0 0 0 75 90" style="stroke: black; fill:

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 12/30
SVG

#ffcccc" />

 
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. 

SVG: Elementos disponibles


SVG
El elemento SVG es la raiz de todo documento y pude contener el siguiente conjunto de atributos 
básicos: 
● Definiciones de espacios de nombres (xmlns="http://www.w3.org/2000/svg"). 
● Versión de SVG a la que se refiere el documento (version="1.1"). 
● Coordenada x a partir de la cual se definirá el documento (x). 
● Coordenada y a partir de la cual se definirá el documento (Y). 
● Ancho de la representación gráfica (width). 
● Alto de la representación gráfica (height). 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="10"
y="10" width="500px" height="400px">
...
</svg>

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 definiciones de grupos pueden utilizarse de forma anidada. 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="500" height="400">
<g opacity="0.2">
<rect x="100" y="100" width="100" height="100" fill="red" />

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 13/30
SVG

<rect x="150" y="150" width="100" height="100" fill="blue" />


</g>
<rect x="200" y="200" width="100" height="100" fill="navy" />
</svg>

Referencias dentro de SVG


Las   referencias  dentro de SVG permiten la reutilización de distintas  definiciones de objetos  en 
cualquier punto del documento. Así, podemos definir filtros u otras propiedades de ajuste gráfico de 
forma general dentro del documento y aplicarlas dinámicamente vía scripting. 
<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). 
<svg width="8cm" height="3cm" xmlns="http://www.w3.org/2000/svg">

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 14/30
SVG

<defs>
<linearGradient id="MyGradient">
</linearGradient>
</defs>
<rect style="fill:url(#MyGradient)"/>
</svg>

DESC y TITLE
Son dos elementos que no tiene ningún 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í mejoras 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. 
<svg width="10cm" height="3cm" viewBox="0 0 100 30"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<rect id="MyRect" width="60" height="10"/>
</defs>
<rect x="0.1" y="0.1" width="99.8" height="29.8" fill="none"
stroke="blue" stroke-width="0.2" />
<use x="20" y="10" xlink:href="#MyRect" />
</svg>

 
<svg width="10cm" height="3cm" viewBox="0 0 100 30"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 15/30
SVG

<symbol id="MySymbol" viewBox="0 0 20 20">


<desc>MySymbol - four rectangles in a grid</desc>
<rect x="1" y="1" width="8" height="8"/>
<rect x="11" y="1" width="8" height="8"/>
<rect x="1" y="11" width="8" height="8"/>
<rect x="11" y="11" width="8" height="8"/>
</symbol>
</defs>

<rect x="0.1" y="0.1" width="99.8" height="29.8" fill="none"


stroke="blue" stroke-width="0.2" />
<use x="45" y="10" width="10" height="10" xlink:href="#MySymbol" />
</svg>

 
<svg width="10cm" height="3cm" viewBox="0 0 100 30"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<rect id="MyRect" x="0" y="0" width="60" height="10"/>
</defs>
<rect x="0.1" y="0.1" width="99.8" height="29.8" fill="none"
stroke="blue" stroke-width="0.2" />
<use xlink:href="#MyRect" transform="translate(20,2.5) rotate(10)" />
</svg>

 
<svg width="12cm" height="3cm" viewBox="0 0 1200 300"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs style="stroke-miterlimit: 10">
<path id="MyPath" d="M300,50 900,50 900,250 300,250"
class="MyPathClass" style="stroke-dasharray:300,100" />
</defs>

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 16/30
SVG

<style type="text/css">
<![CDATA[
#MyUse { fill: blue }
#MyPath { stroke: red }
use { fill-opacity: .5 }
path { stroke-opacity: .5 }
.MyUseClass { stroke-linecap: round }
.MyPathClass { stroke-linejoin: bevel }
use > path { shape-rendering: optimizeQuality }
g > path { visibility: hidden }
]]>
</style>

<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. 
<svg width="200" height="200" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="50" y="50" width="100px" height="100px"
xlink:href="modele33.jpg">
<title>My image</title>
</image>
</svg>

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 17/30
SVG

Transformaciones
Permiten   realizar   cambios   de   coordenadas   sobre   los   elementos   representados.   Sobre   cualquier 
objeto dentro de un documento SVG podremos realizar las siguientes transformaciones: 
• Escalado. Utilizado para la redimensión o para el cambio de orientación. 
• Traslación.   Cambiar   la   ubicación   actual   de   un   elemento,   cambiando   asi   el   origen   de 
coordenadas. 
• Rotación.   Giro   en   grados   que   debe   realizar   el   elemento   con   respecto   al   origen   de 
coordenadas. 
<svg width="140" height="170">
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;" />
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933" />
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933" />

<g id="whiskers">
<line x1="75" y1="95" x2="135" y2="85" style="stroke: black;" />
<line x1="75" y1="95" x2="135" y2="105" style="stroke: black;" />
</g>
<use xlink:href="#whiskers"
transform="scale(-1 1) translate(-140 0)" />
</svg>

 
<svg width="200" height="200">
<defs>
<g id="base">
<circle cx="80" cy="80" r="30"
style="stroke: black; fill: none;" />
</g>
</defs>

<g transform="translate(50, 10)">


<use xlink:href="#base" transform="rotate(10)" />
<use xlink:href="#base" transform="rotate(12)" />
<use xlink:href="#base" transform="rotate(14)" />
<use xlink:href="#base" transform="rotate(16)" />
<use xlink:href="#base" transform="rotate(18)" />
<use xlink:href="#base" transform="rotate(20)" />
<use xlink:href="#base" transform="rotate(22)" />
<use xlink:href="#base" transform="rotate(24)" />
<use xlink:href="#base" transform="rotate(26)" />

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 18/30
SVG

<use xlink:href="#base" transform="rotate(28)" />


</g>
</svg>

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 utilizando el modelo  de 
objetos de SVG para su manipulación. 

Funciones de ejemplo para el de DOM


<?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="300" height="300" onload="pinta()">

<script type="text/ecmascript">
<![CDATA[
function pinta() {
var circleNode = svgDocument.createElement("circle");
circleNode.setAttribute("cx", 300*Math.random());
circleNode.setAttribute("cy", 300*Math.random());
circleNode.setAttribute("r", 30);
circleNode.setAttribute("style", "stroke: none; " +
"opacity: 0.3; " +
"fill: rgb(" + 255*Math.random() + "," +
255*Math.random() + "," +
255*Math.random() + ");");
setTimeout("window.pinta()", 300);
document.getElementById("dr").appendChild(circleNode);
}
]]>
</script>

<g id="dr" />


</svg>

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 19/30
SVG

 
<?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[
var drag = false;
var dx = 0;
var dy = 0;
var x = 0;
var y = 0;

var frame = document.documentElement.getElementById("frame");


var filtered = document.documentElement.getElementById("filtered");
var clip = document.documentElement.getElementById("clipRecorte");

frame.addEventListener("mousedown", mousedown_listener, false);


frame.addEventListener("mouseup", mouseup_listener, false);
frame.addEventListener("mousemove", mousemove_listener, false);

function mousedown_listener(evt) {
drag = true;
dx = filtered.getAttribute("x") - evt.clientX;
dy = filtered.getAttribute("y") - evt.clientY;
}

function mouseup_listener(evt) {
drag = false;
alert('x: ' + filtered.getAttribute("x") + ', ' +
'y: ' + filtered.getAttribute("y"));
}

function mousemove_listener(evt) {
if (drag) {
x = evt.clientX + dx;
y = evt.clientY + dy;

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 20/30
SVG

filtered.setAttribute("x", x);
filtered.setAttribute("y", y);

clip.getChildNodes().item(1).setAttribute("d",
"M" + x + "," + y + " " +
"L" + (100+x) + "," + y + " " +
"L" + (100+x) + "," + (100+y) + " " +
"L" + x + "," + (100+y) + " Z");
}
}
]]>
</script>

<defs>
<clipPath id="clipRecorte">
<path d="M0,0 L100,0 L100,100 L0,100 Z" />
</clipPath>
</defs>

<g id="target">
<image width="236" height="295" xlink:href="wilber-wizard.png"
opacity="0.3" />
<image width="236" height="295" xlink:href="wilber-wizard.png"
clip-path="url(#clipRecorte)" />

<g id="frame">
<rect id="filtered" width="100" height="100"
style="fill: red; fill-opacity: 0; stroke: red;
stroke-width: 1; shape-rendering: optimizeSpeed;" />
</g>
</g>
</svg>

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 21/30
SVG

Funciones de ejemplo para el uso del modelo de objetos de


SVG
function init() {
transform_list = document.getElementById('all').transform.baseVal;
svg_element = document.getElementById('all').ownerSVGElement;
}

function Rotate() {
var xform = document.getElementById('foo').createSVGTransform();
xform.setRotate(30,50,300);
var id = svg_element.suspendRedraw(1000);
transform_list.appendItem(xform);
svg_element.unsuspendRedraw(id);
}

function Translate() {
var xform = document.getElementById('foo').createSVGTransform();
xform.setTranslate(10,-10);
var id = svg_element.suspendRedraw(1000);
transform_list.appendItem(xform);
svg_element.unsuspendRedraw(id);
}

function Scalein() {
var xform = document.getElementById('foo').createSVGTransform();
xform.setScale(1.5,1.5);
transform_list.appendItem(xform);
}

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 incorporación de animaciones basadas en tiempo dentro de un documento SVG. 
Realmente,   dentro   del   documento   SVG   contamos   con   una   serie   de   apoyos   para   poder   animar 

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 22/30
SVG

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 elemento durante el periodo especificado (ya esté 
delimitado por la ejecución de un evento o por un tiempo fijo). 
Para asociar una animación podemos: 
● Definirla a parte y asociarla a través del ID del elemento: 
<animate xlink:href="#bubblesrect" attributeName="y"
begin="aboutbubbles.click" dur="4s" to="10" fill="freeze"/>

<animate xlink:href="#bubblesrect" attributeName="y"


begin="aboutbubbles.click" end="aboutbubbles.click"
to="10" fill="freeze"/>

● Definirla directamente en el elemento que la necesita: 
<rect id="bubbleslabelrectinvis" pointer-events="all" x="272"
y="72" width="86" height="24" rx="10" ry="10">
<set attributeName="opacity" attributeType="CSS" to="0.5"
begin="bubbleslabelrectinvis.click" end="bubblescrossrect.click"/>
</rect>

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">
#bubbleslabelrectinvis { fill:#f00; stroke: #700; stroke-width: 3; }
#aboutbubbles { visibility: hidden; }
.textrect { stroke:#888; stroke-width:2; fill:#eee; }
.text { stroke-width:0; font-size:12; font-family:Arial;
font-weight:300; fill:#444; }
.cross { stroke:#888; stroke-width:3; stroke-linejoin:round;
stroke-miterlimit:0; stroke-linecap:round; }
</style>

<g id="base">
<rect id="bubbleslabelrectinvis" pointer-events="all" x="272" y="72"
width="86" height="24" rx="10" ry="10">
<set attributeName="opacity" attributeType="CSS" to="0.5"
begin="bubbleslabelrectinvis.click"
end="bubblescrossrect.click;
bubblescross01.click; bubblescross02.click"/>
</rect>
</g>

<defs>
<g>
<animate xlink:href="#bubblesrect" attributeName="y"
begin="aboutbubbles.click"
dur="4s" to="10" fill="freeze"/>
<animate xlink:href="#bubblescrossrect" attributeName="y"
begin="aboutbubbles.click"
dur="4s" to="20" fill="freeze"/>
<animate xlink:href="#bubblescross01" attributeName="y1"

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 23/30
SVG

begin="aboutbubbles.click"
dur="4s" to="24" fill="freeze"/>
<animate xlink:href="#bubblescross01" attributeName="y2"
begin="aboutbubbles.click"
dur="4s" to="32" fill="freeze"/>
<animate xlink:href="#bubblescross02" attributeName="y1"
begin="aboutbubbles.click"
dur="4s" to="32" fill="freeze"/>
<animate xlink:href="#bubblescross02" attributeName="y2"
begin="aboutbubbles.click"
dur="4s" to="24" fill="freeze"/>
<animate xlink:href="#bubblesminrect" attributeName="y"
begin="aboutbubbles.click"
dur="4s" to="20" fill="freeze"/>
<animate xlink:href="#bubblesminline" attributeName="y1"
begin="aboutbubbles.click"
dur="4s" to="28" fill="freeze"/>
<animate xlink:href="#bubblesminline" attributeName="y2"
begin="aboutbubbles.click"
dur="4s" to="28" fill="freeze"/>
</g>
</defs>

<g id="aboutbubbles">
<set attributeName="visibility" attributeType="CSS" to="visible"
begin="bubbleslabelrectinvis.click" fill="freeze"/>
<set attributeName="visibility" attributeType="CSS" to="hidden"
begin="bubblescrossrect.click; bubblescross01.click;
bubblescross02.click" fill="freeze"/>

<rect id="bubblesrect" class="textrect" x="160" y="130"


width="220" height="75" rx="10" ry="10" />
<rect id="bubblescrossrect" class="textrect" x="350" y="140"
width="16" height="16" rx="1" ry="1" />
<line id="bubblescross01" class="cross" x1="354" y1="152"
x2="362" y2="144" />
<line id="bubblescross02" class="cross" x1="354" y1="144"
x2="362" y2="152" />
<rect id="bubblesminrect" class="textrect" x="326"
y="140" width="16" height="16" rx="1" ry="1" />
<line id="bubblesminline" class="cross" x1="330" y1="150"
x2="338" y2="150" />

<rect id="bubblesmaxrect" class="textrect" x="326" y="140" width="0"


height="0" rx="1" ry="1">
<animate attributeName="y" begin="aboutbubbles.click"
dur="4s" to="10" fill="freeze"/>
</rect>

<rect id="bubblesmaxbox" class="textrect" x="329" y="143" width="0"


height="0" rx="1" ry="1">
<animate attributeName="y" begin="aboutbubbles.click" dur="4s"
to="10" fill="freeze"/>
</rect>

<text id="bubblestext" class="text">


<tspan id="bubblestext00" x="170" y="158">
<animate attributeName="y" begin="aboutbubbles.click"
dur="4s" to="38" fill="freeze"/>
Ventana contextual
</tspan>

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 24/30
SVG

</text>
</g>
</svg>

 
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
<animate attributeName="viewBox" begin="zoomIn.click" to="0 0 50 50"
dur="12s" fill="freeze"/>
<g id="zoomIn">
<rect x="40" y="40" width="20" height="4"/>
<rect x="48" y="32" width="4" height="20"/>
</g>
</svg>

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 25/30
SVG

<svg viewBox="-400 -200 1200 600">


<g>
<circle cx="100" cy="50" r="1000" style="fill:#000"/>
<circle cx="100" cy="50" r="0" style="fill:#F75">
<animate attributeName="r" begin="0s" dur="10.8s"
from="0" to="1200"/>
</circle>
<circle cx="200" cy="100" r="0" style="fill:#FA8">
<animate attributeName="r" begin="2s" dur="10.8"
from="0" to="1200"/>
</circle>
<circle cx="300" cy="150" r="0" style="fill:#FCB">
<animate attributeName="r" begin="3.5s" dur="10.8"
from="0" to="1200"/>
</circle>
<circle cx="400" cy="200" r="0" style="fill:#FDC">
<animate attributeName="r" fill="freeze" begin="4.5s"
dur="10.8s" from="0" to="1200"/>
</circle>
<circle cx="500" cy="250" r="0" style="fill:#FED">
<animate attributeName="r" fill="freeze" begin="5.25s"
dur="10.8s" from="0" to="1200"/>
</circle>
<circle cx="600" cy="300" r="0" style="fill:#FEF">
<animate attributeName="r" fill="freeze" begin="5.75"
dur="10.8s" from="0" to="1200"/>
</circle>
</g>
</svg>

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 26/30
SVG

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg-root" width="100%" height="100%" viewBox="0 0 480 360">
<g id="test-body-content" font-family="Arial" font-size="30">
<g transform="translate(0, 0)">
<rect x="60" y="20" width="60" height="210" fill="#dfdfdf"
stroke="#dfdfdf" stroke-width="1">
<animate id="largo1" attributeName="width"
begin="0s" dur="4s" from="60" to="210" fill="freeze"/>
<animate id="ancho1" attributeName="height"
begin="0s" dur="4s" from="210" to="310" fill="freeze"/>
<animate id="largo2" attributeName="width"
begin="largo1.end" dur="4s" from="210"
to="60" fill="freeze"/>
<animate id="ancho2" attributeName="height"
begin="ancho1.end" dur="4s" from="310"
to="210" fill="freeze"/>

<animateMotion id="abajo1" from="0,0" to="80,80"


begin="largo2.end" dur="3s" fill="freeze"/>
<animateMotion id="zigzag1" values="80,80;10,0;0,10"
begin="abajo1.end" dur="3s" fill="freeze"/>
<animateMotion id="arco1" path="M0,10 C0,10 40,40 80,0"
begin="zigzag1.end" dur="3s" fill="freeze"/>
</rect>
<rect x="60" y="20" width="50" height="20" fill="#00ff55"
stroke="#008855" stroke-width="1">
<animate attributeName="width"
begin="0s" dur="4s" from="50" to="200" fill="freeze"/>
<animate attributeName="height"
begin="0s" dur="4s" from="200" to="300" fill="freeze"/>
<animate attributeName="width"
begin="4s" dur="4s" from="200" to="50" fill="freeze"/>
<animate attributeName="height"
begin="4s" dur="4s" from="300" to="200" fill="freeze"/>

<animateMotion from="0,0" to="80,80" begin="8s"


dur="3s" fill="freeze"/>
<animateMotion values="80,80;10,0;0,10" begin="11s"
dur="3s" fill="freeze"/>
<animateMotion path="M0,10 C0,10 40,40 80,0" begin="14s"
dur="3s" fill="freeze"/>
</rect>
</g>

<g>
<rect x="320" y="100" width="40" height="40" fill="#ffffff">
<animate id="fadein" attributeName="fill" attributeType="auto"
from="#ffffff" to="#ff0000" begin="indefinite"
dur="3s" fill="freeze"/>
<animate id="fadeout" attributeName="fill" attributeType="auto"
from="#ff0000" to="#ffffff" begin="indefinite"
dur="3s" fill="freeze"/>
</rect>

<g id="buttons">
<a xlink:href="#fadein">
<rect x="320" y="10" width="60" height="40" fill="green"/>
<text fill="white" font-size="10" font-weight="bold"
x="330" y="20">Oscuro</text>
</a>

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 27/30
SVG

<a xlink:href="#fadeout">
<rect x="320" y="50" width="60" height="40" fill="maroon"/>
<text fill="white" font-size="10" font-weight="bold"
x="330" y="60">Claro</text>
</a>
</g>
</g>
</g>
</svg>

HTML/XHTML
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 documento 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   ningún   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 conseguiremos el mismo comportamiento que con el plugin de Adobe, aunque ahora no 

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 28/30
SVG

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 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<head>
<title>Test SVG dentro de XHTML</title>
<style type="text/css">
polygon[class="base"] { fill:blue; }
</style>
</head>
<body>
<h1 class="top">Poligonos renderizados por Mozilla</h1>

<svg:svg width="200px" height="200px">


<svg:polygon points="20,20 30,60 60,30" class="base" />
<svg:foreignObject x="5" y="60" width="40" height="10">
<span class="forobjpts" style="color:blue;">Poligono</span>
</svg:foreignObject>
</svg:svg>
</body>
</html>

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 29/30
SVG

Referencias
● SVG: Gráficos e interactividad en la Web:
http://xml­utils.com/conferencia­svg.html
● SVG: Gráficos e interactividad en la Web: Ejemplos 
http://xml­utils.com/conferencia­svg­samples.zip
● Blobular: An SVG experiment:
http://www.themaninblue.com/experiment/Blobular/
● Lista de implementacion de referencia w3c:
http://www.w3.org/Graphics/SVG/SVG­Implementations.htm8#viewer
● Mozilla SVG:
http://ftp.mozilla.org/pub/mozilla/nightly/latest­trunk/
● Adobe SVG Viewer:
http://www.adobe.com/svg
● Apache Batik y Apache Cocoon:
http://xml.apache.org/batik
http://cocoon.apache.org
● Presentacion SVG en Mozilla:
http://www.croczilla.com/~alex/fosdem2003/
● Desarrollo de aplicaciones en Mozilla:
http://www.croczilla.com/~alex/fosdem2004/
● ZSVGGraph en Zope:
http://www.txoutcome.org/scripts/zope/readings/zsvg_graph_site
● Inkscape:
http://www.inkscape.org/
● JASC WebDraw. Edicion de graficos en SVG:
http://www.jasc.com/products/webdraw/
● KSVG:
http://svg.kde.org/

Curso de especialización en desarrollo web avanzado
Ricardo Borillo Domenech
borillo@uji.es 30/30