Scalable Vector Graphics (SVG) Iztok Cergol Elementi di grafica digitale A.A. 2005/06.

Presentazione sul tema: "Scalable Vector Graphics (SVG) Iztok Cergol Elementi di grafica digitale A.A. 2005/06."— Transcript della presentazione:

1 Scalable Vector Graphics (SVG) Iztok Cergol Elementi di grafica digitale A.A. 2005/06

2 Cosè linguaggio di grafica vettoriale bidimensionale basato su XML sviluppato da W3C versione corrente 1.1 (gennaio 2003)

3 Proprietà testuale vettoriale formato non proprietaio interattivo dinamico

4 Strumenti (edit) per lediting testuale va bene qualsiasi editor alcuni software di grafica sanno salvare in SVG (Adobe Illustrator, Corel Draw)

5 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

6

7 Struttura […]

8 Elementi - 1 linea polilinea cerchio

9 Elementi - 2 poligono rettangolo ellisse

10 Elementi - 3 cammino 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.

11 Elementi - 4 text Scritta gruppo link Units.it

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

13 Trasformazioni - 2 testo traslato e ruotato Vedi esempio...

14 Template In SVG è possibile creare dei template complessi che possono poi essere utilizzati all'interno dell'immagine: Un modello viene utilizzato all'interno dellimmagine SVG, tramite l'elemento : Vedi esempio...

15 Immagini raster L'elemento SVG che permette di inserire un'immagine è. Il suo funzionamento è molto simile a quello del tag utilizzato in HTML. Vedi esempio...

16 Altre funzionalità Gradienti Pattern Clipping Masking Filtri grafici, crea ombra trasla ombra ordina elementi Vedi esempio...

17 Effetti dinamici Gli effetti dinamici vengono creati tramite ECMAScript, un linguaggio di scripting che agisce sulla struttura DOM del documento (simile a JavaScript) <![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); } ]]> Vedi esempio...

18 Interattività SVG permette di rendere un documento interattivo, in grado cioé di rispondere a certi eventi: onclick onmousemove onmouseover onmouseout onmousedown onload Vedi esempio...

19 Animazioni - 1 Con la tecnica dello scripting si possono generare delle animazioni interattive: Start var posizionex=parseFloat(elemento.getAttribute("cx")); posizionex++; if (posizionex<351) { elemento.setAttribute("cx",posizionex); scrittaCx.firstChild.nodeValue=posizionex; setTimeout("anima()",intervallo); } Vedi esempio...

20 Animazioni - 2 Per animare unimmagine SVG esiste anche un altro linguaggio: SMIL – Synchronized Multimedia Integration Language - basato su XML - direttive dentro il codice XML (no scripting) - esempio: Vedi esempio...

21 Quesito E possibile aggiungere una dimensione allSVG? 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…

22 Proposta Philip Mansfield e Cemile B. Otkunc (due veterani dellSVG) 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…

23 Cosa Propongono: modello per salvare dati 3D implementazione di proiezione ed illuminazione metodo per salvare renderizzazioni 2D implementazione di interazione da parte dellutente nellesplorazione di una scena 3D

24 Come Realizzano: stabiliscono una nuova grammatica XML: world3D utilizzano ECMAScript per proiezioni e illuminazione salvano le renderizzazione in SVG per linterazione sfruttano le proprietà di SVG, e fanno gestire le trasformazioni a ECMAScript

25 world3D grammar Definiscono un XML Schema che descrive come deve essere fatto un documento che contiene una descrizione di oggetti 3D. Elementi principali: insieme di facce poligonali insieme di terne di coordinate, rappresentano i vertici coppia di vettori unitari, rappresentano le assi vettore che rappresenta la posizione della luce possibilità di definire un colore diverso per il bordo I punti sono identificati dallelemento http://www.idealliance.org/proceedings/xml03/slides/mansfield%26otkunc/Slides/Res ources/world3D.xsd.html

26 Proiezione Scelgono la proiezione parallela: prospettiva da molto lontano Illuminazione Scelgono lilluminazione a direzioni libere: la luminosità è data dallangolo tra il light vector e la normale alla superficie

27 Rendering e interazione Scelgono un architettura di elaborazione client-side: lo scripting client-side permette la ricostruzione al volo del DOM dellSVG lo scripting è molto più veloce delle trasformazioni XSLT

28 Esempio <!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"> cube.xml transformed to SVG <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"/>

29 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

30 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

31 Screenshots

32 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

33 Riferimenti http://www.w3c.org/TR/SVG http://www.html.it http://www.xmlconference.com http://www.adobe.com/svg