Scalable Vector Graphics(SVG)

Iztok Cergol

Elementi di grafica digitale A.A. 2005/06

Cos’è

• linguaggio di grafica vettoriale bidimensionale

• basato su XML

• sviluppato da W3C

• versione corrente 1.1 (gennaio 2003)

Proprietà

• testuale

• vettoriale

• formato non proprietaio

• interattivo

• dinamico

Strumenti (edit)

• per l’editing testuale va bene qualsiasi editor

• alcuni software di grafica sanno salvare in SVG (Adobe Illustrator, Corel Draw)

Strumenti (view)

• alcuni web browser hanno supporto nativo per SVG (Firefox 1.5, Konqueror, Opera 8.5)

• altri richiedono plug-in (Adobe, Corel)

• esistono viewer stand-alone

• in Java esiste Batik – toolkit per gestione SVG

Struttura

<?xml version="1.0" encoding="iso-8859-1" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//Dtd SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/Dtd/svg11.dtd"> <svg width="300" height="200" version="1.1"

xmlns="http://www.w3.org/2000/svg">

[…]

</svg>

Elementi - 1

• linea<line x1="10" y1="10" x2="100" y2="100" style="stroke:red"/>

• polilinea<polyline points="10,10 50,50 90,10" style="stroke:red;fill:none"/>

• cerchio<circle cx="100" cy="100" r="50" style="stroke:red;fill:red"/>

Elementi - 2

• poligono<polygon points="250,250 297,284 279,340 220,340 202,284"

style="stroke:red;fill:red"/>

• rettangolo<rect x="10" y="10" rx="2" ry="2" width="100" height="50"

style="fill:red"/>

• ellisse<ellipse cx="100" cy="100" rx="70" ry="50" style="fill:red"/>

Elementi - 3

• cammino<path d="M100,150 L150,100 L200,150 Z" style="fill:red"/>

Moveto (M x,y)

Lineto (L x,y)

Closepath (Z)

Horizontal lineto (H x)

Vertical lineto (V y)

Curveto (C x1,y1 x2,y2 x,y)

Smooth Curveto (S x2,y2 x,y)

Quadratic Bezier Curveto (Q x1,y1 x,y)

Smooth Quadratic Bezier Curveto (T x,y)

I comandi possono essere usati anche in versione "relativa". Questo consente di esprimere le coordinate dei punti, all'interno del comando, relativamente alle coordinate del punto corrente. Un comando relativo si indica scrivendo il comando stesso in minuscolo.

Elementi - 4

• text<text x="10" y="20">Scritta</text>

• gruppo<g style="fill:green;stroke:black;stroke-width:3">   <circle cx="100" cy="100" r="50"/>   <rect x="200" y="50" width="100" height="100"/></g>

• link<a xlink:href="http://www.units.it">   <text x="55" y="60" style="font-width:bold;font-family:times;font-

size:24;fill:black">Units.it</text></a>

Trasformazioni - 1• translate(tx,ty): permette di traslare la posizione dell'elemento grafico di tx unità lungo l'asse X e di ty unità lungo l'asse Y;

• scale(sx,sy): effettua un'operazione di scaling con un fattore indicato da sx, lungo l'asse X, e da sy, lungo l'asse Y;

• rotate(ra,cx,cy): permette di ruotare l'elemento grafico di un angolo pari a ra. Gli attributi cx e cy (che sono opzionali) indicano le coordinate del punto attorno al quale effettuare la rotazione;

• skewX(sa): applica una trasformazione che inclina l'asse X di un angolo pari al valore indicato da sa;

• skewY(sa): applica una trasformazione che inclina l'asse Y di un angolo pari al valore indicato da sa;

• matrix(a,b,c,d,e,f): applica all'elemento grafico la matrice di trasformazione (3x3) indicata da [[a c e] [b d f] [0 0 1]].

Vengono applicati come attributi agli elementi grafici.

Trasformazioni - 2

<g transform="translate(10,250) rotate(270)"> <rect x="10" y="10" width="100" height="50"

style="fill:red;stroke:black;stroke-width:2"/> <text x="10" y="80" style="font-family:times;font-

size:12;fill:black"> testo traslato e ruotato   </text></g>

Vedi esempio...

TemplateIn SVG è possibile creare dei template complessi che possono poi essere utilizzati all'interno dell'immagine:<defs>   <symbol id="template1">      <rect x="5" y="5" width="10" height="10"/>      <rect x="20" y="5" width="10" height="10"/>      <rect x="20" y="20" width="10" height="10"/>      <rect x="5" y="20" width="10" height="10"/>   </symbol></defs>

Un modello viene utilizzato all'interno dell’immagine SVG, tramite l'elemento <use>:

<use x="100" y="100" xlink:href="#template1" style="fill:none;stroke:black;stroke-width:2"/>

Vedi esempio...

Immagini rasterL'elemento SVG che permette di inserire un'immagine è <image>. Il suo funzionamento è molto simile a quello del tag <img> utilizzato in HTML.

<svg width="400" height="400" xmlns:xlink="http://www.w3.org/1999/xlink" >

<image x="10" y="10" width="200" height="200" xlink:href=“img.jpg"/>

</svg>

Vedi esempio...

Altre funzionalità

• Gradienti

• Pattern

• Clipping

• Masking

• Filtri grafici

<linearGradient>, <radialGradient>

<pattern id="pois" … > <circle cx="15" cy="15" r="10" …/></pattern>

<clipPath id="ellisse"> <ellipse cx="250" cy="250" …/></clipPath>

<mask id="maschera" …> <rect x="10" …/></mask> <filter id="ombra">

      <feGaussianBlur … /> crea ombra      <feOffset … /> trasla ombra      <feMerge> ordina elementi         <feMergeNode … "/>         <feMergeNode … "/>      </feMerge>

   </filter> Vedi esempio...

Effetti dinamiciGli effetti dinamici vengono creati tramite ECMAScript, un linguaggio di scripting che agisce sulla struttura DOM del documento (simile a JavaScript)<script type="text/ecmascript"><![CDATA[      function aggiungiRect(){         var svgdoc=document.getElementById("elementoRadice");         var newrect=document.createElement("rect");         newrect.setAttribute("x",10);         newrect.setAttribute("y",150);         newrect.setAttribute("width",250);         newrect.setAttribute("height",100);         newrect.setAttribute("style","fill:blue;stroke:black;stroke-width:2;");         svgdoc.appendChild(newrect);      }   ]]></script> Vedi esempio...

InterattivitàSVG permette di rendere un documento interattivo, in grado cioé di rispondere a certi eventi:

• onclick• onmousemove• onmouseover• onmouseout• onmousedown• onload

<rect id="rettangolo1" … onclick="cambiaColore(evt,'yellow')" />

Vedi esempio...

Animazioni - 1Con la tecnica dello scripting si possono generare delle animazioni interattive:

<circle id="cerchio" cx="50" … /><g onclick="startAnimazione(evt)"> <rect x="100" y="150" … /> <text x="200" y="180" text-anchor="middle" >Start</text></g>

var posizionex=parseFloat(elemento.getAttribute("cx"));posizionex++; if (posizionex<351) { elemento.setAttribute("cx",posizionex); scrittaCx.firstChild.nodeValue=posizionex; setTimeout("anima()",intervallo); } Vedi esempio...

Animazioni - 2Per animare un’immagine SVG esiste anche un altro linguaggio:

SMIL – Synchronized Multimedia Integration Language- basato su XML- direttive dentro il codice XML (no scripting)- esempio:<circle cx="100" cy="100" … >    <animate attributeName="cx" attributeType="XML" begin="1s" dur="5s"

fill="freeze" from="100" to="400" repeatCount="indefinite" /></circle>

Vedi esempio...

QuesitoE’ possibile aggiungere una dimensione all’SVG?E’ possibile descrivere un oggetto in tre dimensioni e visualizzarlo nel browser?

Nella storia di Internet si era già sentito il bisogno di poter avere dei contenuti 3D:

• VRML - Virtual Reality Modeling Language • X3D - Extensible 3D Graphics

Non supportati nativamente, plug-in introvabili…

PropostaPhilip Mansfield e Cemile B. Otkunc (due veterani dell’SVG)

• al convegno Xml Conference (7-12/12/2003)• il 9 dicembre 2003• al Pennsylvania Convention Center• con una presentazione fatta in SVG…

fanno una proposta…

CosaPropongono:

• modello per salvare dati 3D

• implementazione di proiezione ed illuminazione

• metodo per salvare renderizzazioni 2D

• implementazione di interazione da parte dell’utente nell’esplorazione di una scena 3D

ComeRealizzano:

• stabiliscono una nuova grammatica XML: world3D

• utilizzano ECMAScript per proiezioni e illuminazione

• salvano le renderizzazione in SVG

• per l’interazione sfruttano le proprietà di SVG, e fanno gestire le trasformazioni a ECMAScript

world3D grammarDefiniscono un XML Schema che descrive come deve essere fatto un documento che contiene una descrizione di oggetti 3D.

Elementi principali:<polyhedra> insieme di facce poligonali<face> insieme di terne di coordinate, rappresentano i vertici<viewPlane> coppia di vettori unitari, rappresentano le assi <lightSource> vettore che rappresenta la posizione della luce<edge> possibilità di definire un colore diverso per il bordo

I punti sono identificati dall’elemento <vector x=“” y=“” z=“”/>

http://www.idealliance.org/proceedings/xml03/slides/mansfield%26otkunc/Slides/Resources/world3D.xsd.html

ProiezioneScelgono la proiezione parallela:prospettiva “da molto lontano”

IlluminazioneScelgono l’illuminazione a direzioni libere:la luminosità è data dall’angolo tra il light vector e la normale alla superficie

Rendering e interazioneScelgono un architettura di elaborazione client-side:

• lo scripting client-side permette la ricostruzione “al volo” del DOM dell’SVG• lo scripting è molto più veloce delle trasformazioni XSLT

Esempio

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="-600 -600 1200 1200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>cube.xml transformed to SVG</desc> <g id="ThreeDimensionalShape" transform="scale(1,-1)“ stroke-width="2“

stroke-linejoin="bevel" stroke="#0000ff"> <polygon fill="#880088" points="141.96846,315.47812 33.93691,171.13047 141.96846,142.26094 250,286.60859"/> <polygon fill="#440044" points="141.96846,55.65235 250,26.782820 141.96846,142.26094 33.93691,171.13047"/> <polygon fill="#CC00CC" points="358.03154,171.13047 250,286.60859 141.96846,142.26094 250,26.782820"/> </g></svg>

ElaborazioneProblemi:• ordine di disegno

Dag (Directed Acyclic Graph), costruito da Face Pair Sorting, formato da due algoritmi: Point-in-Polygon e Point-in-Front-of-Face

• facce nascosteBack Face Culling

Sono problemi che potrebbe risolvere il software generatore, invece del trasformatore 3D - 2D

Il risultatoIl risultato di queste considerazioni è un visualizzatore di oggetti world3d chiamato Aquila della SchemaSoft.

La GUI di Aquila è implementata in ECMAScript e dispone di 4 bottoni per:• rotazione• zoom• traslazione• modifica colore luce

Screenshots

Il futuroGli sviluppatori di Aquila si propongono di aggiungere:

• effetti di curvatura alle facce

• differenti metodi di proiezione

• controlli di direzione e diffusione della luce

• proprietà di riflessione

Riferimenti

• http://www.w3c.org/TR/SVG

• http://www.html.it

• http://www.xmlconference.com

• http://www.adobe.com/svg