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)
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.
Smooth Curveto (S x2,y2 x,y)
Quadratic Bezier Curveto (Q x1,y1 x,y)
Smooth Quadratic Bezier Curveto (T x,y)
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;fontsize:24;fill:black">Units.it</text>
</a>
Trasformazioni - 1
Vengono applicati come attributi agli elementi grafici.
• 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]].
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;fontsize:12;fill:black">
testo traslato e ruotato
</text>
</g>
Vedi esempio...
Template
In 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 raster
L'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
<linearGradient>, <radialGradient>
• Pattern
<pattern id="pois" … >
<circle cx="15" cy="15" r="10" …/>
</pattern>
• Clipping
<clipPath id="ellisse">
<ellipse cx="250" cy="250" …/>
</clipPath>
• Masking
<mask id="maschera" …>
<rect x="10" …/>
<filter id="ombra">
</mask>
<feGaussianBlur … /> crea ombra
<feOffset … /> trasla ombra
<feMerge> ordina elementi
<feMergeNode … "/>
<feMergeNode … "/>
</feMerge>
• Filtri grafici
</filter>
Vedi esempio...
Effetti dinamici
Gli 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 - 1
Con 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 - 2
Per 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...
Quesito
E’ 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…
Proposta
Philip 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…
Cosa
Propongono:
• 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
Come
Realizzano:
• 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 grammar
Definiscono 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/Res
ources/world3D.xsd.html
Proiezione
Scelgono la proiezione parallela:
prospettiva “da molto lontano”
Illuminazione
Scelgono l’illuminazione a direzioni libere:
la luminosità è data dall’angolo tra il light vector e la
normale alla superficie
Rendering e interazione
Scelgono 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>
Elaborazione
Problemi:
• 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 nascoste
Back Face Culling
Sono problemi che potrebbe risolvere il software
generatore, invece del trasformatore 3D - 2D
Il risultato
Il 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 futuro
Gli 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