svg/javascript: gráficos e interactividad en la web

SVG/JavaScriptRicardo Borillo Domenech <[email protected]>

Table of ContentsIntroducción ............................................................................................................................... 1Beneficios de la utilización de SVG ................................................................................................ 3SVG: Estructura básica de un documento ......................................................................................... 4SVG: Definición del sistema de coordenadas .................................................................................... 4SVG: Geometría ......................................................................................................................... 5

Rectángulo ........................................................................................................................ 5Círculo .............................................................................................................................. 5Elipse ............................................................................................................................... 6Línea ................................................................................................................................ 6Polilínea ............................................................................................................................ 7Polígono ............................................................................................................................ 8Texto ................................................................................................................................ 8Caminos ............................................................................................................................ 9

SVG: Elementos disponibles ....................................................................................................... 11SVG ............................................................................................................................... 11G ................................................................................................................................... 11Referencias dentro de SVG ................................................................................................. 12DEFS .............................................................................................................................. 12DESC y TITLE ................................................................................................................. 13SYMBOL ........................................................................................................................ 13USE ............................................................................................................................... 13IMAGE ........................................................................................................................... 15Transformaciones .............................................................................................................. 16

SVG: Scripting ......................................................................................................................... 17Funciones de ejemplo para el de DOM .................................................................................. 18Funciones de ejemplo para el uso del modelo de objetos de SVG ............................................... 20

SMIL ...................................................................................................................................... 21HTML/XHTML ....................................................................................................................... 26Implementación, herramientas y enlaces de interés .......................................................................... 28

IntroducciónPara empezar diremos que SVG significa Scalable Vector Graphics y que define un lenguaje basado en XML para laconstrucció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 comoMathML o CML definen conjuntos concretos de tags destinados a un fin específico como son el lenguajematemá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.

1

• 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 unarecomendació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 laGDI+ de Windows.

Implicaciones de este cambio:

• Mozilla soporta documentos que contienen SVG, MathML, XHTML o XUL en un mismo documento. Esto esposible 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 XMLDOM).

SVG es un lenguaje para la descripción de gráficos vectoriales en 2D en XML.

SVG permite la utlización de tres tipos de objectos gráficos:

• 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.

SVG soporta características avanzadas como:

• Transformación anidadas (matrices de transformación).

• Clipping Paths.

• Alpha Masks.

• Filtros gráficos.

• Interactividad y dinamismo, soportandos 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 com#ponen un documento SVG. Además, existe la posibilidad de asignar eventos a los distintos elementos (onmouseovero onclick).

SVG/JavaScript

2

Gracias a la estandarización de los elementos en SVG y su integración con XHTML, podemos tener conviviendoscripts 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 tenganextensió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.

• No pierde calidad si se hace zoom o si se redimensiona.

• Puede escalarse.

• Ideal para ser impreso.

• Pueden mostrase de forma progresiva (igual que los GIF), no teniendo que esperar a que todo el documento seadescargado.

• 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

SVG/JavaScript

3

• 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>

<!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

SVG/JavaScript

4

En SVG el área de dibujo es infinita. A continuación veremos varias formas de decirle al visor de SVG en qué áreaestamos interesados. El área utilizado por el documento creado se conoce como Viewport. Podemos establecer eltamañ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 laderecha y la Y hacia abajo. El punto (0, 0) se conoce como origen de coordenadas.

SVG: GeometríaRectá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 lavisualizació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" 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".

SVG/JavaScript

5

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(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.

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>

SVG/JavaScript

6

“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 atributopodemos definir la línea como una sucesión de tramos visibles e invisibles. El atributo "stroke-dasharray" permitedefinir 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>

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 240,0 240,20"

style="stroke:red; stroke-width:2; fill:none;" transform="translate(20,20)" /></svg>

SVG/JavaScript

7

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:1" /></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: 0.6"><tspan x="10" y="100">Texto en SVG</tspan>

</text></svg>

Figure 8. texto.svg

SVG/JavaScript

8

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 deAdobe, 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>

CaminosDefinició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.

• 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 casose 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>

Figure 9. caminos.svg

SVG/JavaScript

9

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

Figure 10. camino-bezier.svg

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

Figure 11. camino-elipse.svg

Debido a la complejidad de definir figuras geométricas basadas en caminos, se hace mucho más recomendable eluso de programas gráficos de edición para este menester.

SVG/JavaScript

10

SVG: Elementos disponiblesSVG

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>

GEl elemento “G" se utiliza como contenedor para agrupar distintos objetos y así poder realizar sobre ellos accionesde forma global. Podemos asignarle un ID y así realizar transformaciones, animaciones u otras acciones. Las defini#ciones de grupos pueden utilizarse de forma aninada.

<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" /><rect x="150" y="150" width="100" height="100" fill="blue" />

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

</svg>

Figure 12. elemento-g.svg

SVG/JavaScript

11

Referencias dentro de SVGLas referencias dentro de SVG permiten la reutilización de distintas definiciones de objetos en cualquier punto deldocumento. Así, podemos definir filtros u otras propiedades de ajuste gráfico de forma general dentro del docu#mento 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 realizadasmediante 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 denombres asociado al mismo:

xmlns:xlink="http://www.w3.org/1999/xlink"

DEFSSección de declaración de los elementos que posteriormente podrán ser referenciados dentro del documento. Laforma 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"><defs><linearGradient id="MyGradient"></linearGradient>

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

</svg>

SVG/JavaScript

12

DESC y TITLESon dos elementos que no tiene ningun tipo de representación gráfica. Sólo se utilizan para la documentación yespecificación del documento SVG. Cualquier contenedor o elemento gráfico dentro del documento puede definir supropio título y descripción.

SYMBOLEste elemento permite definir patrones de objeto gráfico para después poder instanciarlos con un USE. MedianteSYMBOL 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.

USECualquier elemento gráfico de tipo SYMBOL, G, USE u otros elementos pueden potencialmente ser consideradoscomo 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>

Figure 13. elemento-use-1.svg


<defs><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/JavaScript

13



<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>



<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>

<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>

SVG/JavaScript

14

<g style="stroke-width:40"><use id="MyUse" xlink:href="#MyPath" class="MyUseClass" style="stroke-dashoffset:50" />

</g></svg>


IMAGEEste elemento permite la inclusión de imágenes externas rasterizadas en el área definida por las coordenadas de seadjuntan.

<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>

Figure 17. elemento-image.svg

SVG/JavaScript

15

TransformacionesPermiten realizar cambios de coordenadas sobre los elementos representados. Sobre cualquier objeto dentro de undocumento SVG podermos 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>

Figure 18. transformacion-gato.svg

SVG/JavaScript

16

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>

Figure 20. scripting-dom.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[

SVG/JavaScript

18

Figure 21. scripting-recorte.svg

Funciones de ejemplo para el uso del modelo de objetos deSVG

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);

}

SVG/JavaScript

20

#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" 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>

SVG/JavaScript

22

<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></text>

</g></svg>

Figure 22. smil-ventana.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>

Figure 23. smil-mas.svg

SVG/JavaScript

23

<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><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>

Figure 25. smil-movimiento.jpg

HTML/XHTML

SVG/JavaScript

26

SVG, al ser un formato XML, donde mejor se integra es en otros documentos XML. Si partimos de la versión XMLde 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 recursosdisponibles 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 renderizadode SVG (sin la utilización de ningun plugin externo). Esto quiere decir que podremos añadir código SVG "inline" enel 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 ciertodebido al estado del desarrollo del proyecto. A día de hoy la versión que de Mozilla SVG que más funciones soportaes 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>

Figure 26. mozilla-inline.xhtml

SVG/JavaScript

27

Implementación, herramientas y enlaces de interés

• 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


• ZSVGGraph en Zope

http://www.txoutcome.org/scripts/zope/readings/zsvg_graph_site

SVG/JavaScript

28

http://www.w3.org/Graphics/SVG/SVG-Implementations.htm8#viewer

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.txoutcome.org/scripts/zope/readings/zsvg_graph_site

• 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.

• JASC WebDraw. Edicion de graficos en SVG

http://www.jasc.com/products/webdraw/

SVG/JavaScript

29

http://svg.kde.org/

http://www.jasc.com/products/webdraw/

svg/javascript: gráficos e interactividad en la web

Documents