svg tecnologías base de cliente svg curso de especialización en desarrollo web avanzado

SVG

Tecnologías base de cliente

SVG

Curso de especialización en desarrollo web avanzado 1/31Ricardo Borillo [email protected]

SVG


SVG

Índice de contenidoSVG......................................................................................................................................................3Introducción .........................................................................................................................................3Beneficios de la utilización de SVG ....................................................................................................4SVG: Estructura básica de un documento ...........................................................................................5SVG: Definición del sistema de coordenadas ......................................................................................6SVG: Geometría ...................................................................................................................................6

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

SVG: Elementos disponibles .............................................................................................................13SVG ...............................................................................................................................................13G ....................................................................................................................................................13Referencias dentro de SVG ...........................................................................................................14DEFS .............................................................................................................................................14DESC y TITLE .............................................................................................................................15SYMBOL ......................................................................................................................................15USE ...............................................................................................................................................15IMAGE ..........................................................................................................................................17Transformaciones ..........................................................................................................................17

SVG: Scripting ...................................................................................................................................18Funciones de ejemplo para el de DOM .........................................................................................19Funciones de ejemplo para el uso del modelo de objetos de SVG ................................................23

SMIL ..................................................................................................................................................24HTML/XHTML ................................................................................................................................32Referencias ........................................................................................................................................33


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:


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.


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 DOMStyle y DOMEvent

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


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"


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.


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.


SVG

La continuidad de las líneas pude ser modificada gracias al atributo de estilo "strokedasharray". Con este atributo podemos definir la línea como una sucesión de tramos visibles e invisibles. El atributo "strokedasharray" 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>


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>

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>


SVG

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.

● 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" />


SVG

<path d="M 10 10 L 65 90 A 5 10 0 0 0 75 90" style="stroke: black; fill: #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).


SVG

● 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" /> <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

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


SVG

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

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

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

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

<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)" /> <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">


SVG

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

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


SVG

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


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


SVG

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


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


SVG

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


SVG

<rect x="40" y="40" width="20" height="4"/> <rect x="48" y="32" width="4" height="20"/> </g> </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>


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


SVG

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


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


SVG

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>

Referencias ● SVG: Gráficos e interactividad en la Web:

http://xmlutils.com/conferenciasvg.html

● SVG: Gráficos e interactividad en la Web: Ejemplos

http://xmlutils.com/conferenciasvgsamples.zip

● Blobular: An SVG experiment:


SVG

http://www.themaninblue.com/experiment/Blobular/

● Lista de implementacion de referencia w3c:

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

● Mozilla SVG:

http://ftp.mozilla.org/pub/mozilla/nightly/latesttrunk/

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


svg tecnologías base de cliente svg curso de especialización en desarrollo web avanzado

Documents