SVG SVG. I sistemi di coordinate. Coordinate cartesiane. Unità di misura. Coordinate schermo

Transcript

1 Sistemi Multimediali Immagini vettoriali ed SVG Le immagini Esistono due tipologie d'immagini: Immagini Raster Immagini Vettoriali Marco Gribaudo Le immagini Le immagini raster definiscono la figura mediante una griglia di colori. Le immagini Le immagini vettoriali descrivono la figura mediante una serie di comandi con cui un programma puo' effettuare il disegno. Le primitive grafiche I comandi grafici prendono il nome di primitive. Essi effettuano i disegni unendo punti sullo schermo. Ogni libreria, software di authoring o standard di interscambio, supporta un diverso insieme di primitive. SVG SVG (Scalable Vector Graphics) e' un linguaggio basato su XML utilizzato per descrivere immagini vettoriali. I suoi TAG permettono di inserire primitive grafiche bidimensionali.

2 SVG Il preambolo e la chiusura definiscono la tipologia del file come SVG e caricano la corrispondnete DTD: SVG Gli attributi height e width specificano le dimensioni del disegno che si sta definendo: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " <svg width="800" height="600"> <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " <svg width="800" height="600"> </svg> </svg> I sistemi di coordinate Tutti disegni effettuabili mediante grafica vettoriale si basano su comandi che uniscono tra di loro in modo opportuno punti presenti sullo schermo. I punti vengono indicati mediante coordinate. Coordinate cartesiane x y In un piano cartesiano i punti vengono indicati da una ascissa (x) e da una ordinata (y). Coordinate schermo x y In grafica vettoriale si adoperano le coordiante schermo, identiche a quelle cartesiane, ma con le ordinate orientate in senso inverso. Unità di misura Lo coordinate sono sempre riferite ad opportune unita' di misura. In SVG le unita' si indicano aggiungendo due lettere dopo i valori numerici: em ex px pt pc cm mm in Dimensione delle lettere Altezza della lettera x Pixels (dimensione di default) Punti (1/72 di pollice) Pica (1/6 di pollice) Centimetri Millimetri Pollici

3 Unità di misura Ad esempio si possono specifcare le dimensioni della figura in Pixel: I segmenti In SVG i segmenti si indicano attraverso il comando <line>: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " <svg width="800px" height="600px">... </svg> <line x1="700" y1="20" x2="700" y2="25" style="stroke:white"/> Gli attributi x1 e y1 indicano le coordinate del pirmo estremo del segmento, mentre x2 e y2 le coordinate dll'altro estremo. I colori In SVG i colori si indicano utilizzando il sistema RGB e possono essere specifcati in 4 modi diversi: Il tratto Quando una primitiva specifica una linea (retta o curva), è possibile scegliere un tratto. red Utilizzando il nome del colore #ff0080 Con # ed il valore esadecimale come in HTML rgb(255,0,128) Con rgb() specificando tra parentesi le intensita' dei colori tra rgb(100%,0,50%) Con rgb() specificando tra parentesi le percentuali dei colori primari Si può specificare il colore, lo stile e lo spessore della stessa. Il tratto Il tratto in SVG il trattosi indica aggiungendo l'attributo style al tag della primitva: stroke:white; Il tratto Indica il colore del tratto. <line x1="700" y1="20" x2="700" y2="25" style="stroke:white; stroke-width:5;"/> Nel valore dell'attributo si indicano separati da un punto e virgola le caratteristiche del colore, dello spessore e dello stile. stroke-width:5px; Indica lo spessore. stroke-dasharray:5,3; Indica lo stile del tratto: I valori che lo seguono (sempre in numero pari) specificano la lunghezza dei segmenti pieni e di quelli vuoti dello stile.

4 Rettangoli I rettangoli si indicano attraverso il comando <rect>: Rettangoli Aggiungendo gli attributi rx e ry si possono realizzare spigoli arrotondati: <rect x="0" y="0" width="800" height="100" Gli attributi x e y indicano le coordinate dell'angolo in alto a sinistra del retangolo, mentre width e heigth rispettivamente la larghezza e l'altezza del rettangolo. Il comando fill all'interno dello stile indica il colore di riempimento. <rect x="0" y="0" width="800" height="100" rx="10" ry="10" In SVG si puo' specificare un fattore di smusso differente per le direzioni orizzontali e verticali. I cerchi I cerchi si indicano in SVG utilizzando il comando <circle>: Gli ellissi Gli ellissi si indicano utilizzando il comando <ellipse>: <circle cx="0" cy="0" r="20" Gli attributi cx e cy rappresentano le coordinate del centro, mentre r specifica il suo raggio. <ellipse cx="0" cy="0" rx="20" ry="40" Gli attributi cx e cy rappresentano le coordinate del centro, mentre rx ed ry le dimensioni dei semiassi orizzontali e verticali. I poligoni I poligoni aperti si indicano utilizzando il comando <polyline>: I poligoni I poligoni chiusi si indicano utilizzando il comando <polygon>: <polyline points="10 10, 20 20, 40 0, 50 10" style="fill:none; stroke:black;"/> L'attributo points contiene un elenco di coppie separate da virgola che specificano le coordinate x ed y dei punti che costituiscono il poligono. <polygon points="10 10, 20 20, 40 0, 50 10" Anche in questo caso l'attributo points contiene un elenco di coppie separate da virgola che specificano le coordinate x ed y dei punti che costituiscono il poligono.

5 I poligoni I poligoni Quando vi sono intersezioni, esistono due modalita' differenti con cui riempire il poligono: la modalita' pari-dispari e la modalita' non-zero. I poligoni La modalita pari-dispari o quella nonzero possono essere impostate nell'attributo style attraverso l'opzione fill-rule: <polygon points="10 10, 20 20, 40 0, 50 10" fill-rule: evenodd <polygon points="10 10, 20 20, 40 0, 50 10" fill-rule: nonzero Oltre a segmenti retti e' di solito possibile utilizzare anche linee curve. Una linea curva viene definita generalmente come un poligono speciale i cui vertici sono uinti da tratti curvilineii. In una curva di Herimite, si specificano i punti per cui essa passa, ed anche le tangenti (direzioni della curva) in essi. Le tangenti possono avere una direzione differente a destra ed a sinistra del punto a cui sono associate. In questo caso si parla di cuspidi.

6 In una curva di Bezier, vengono definiti oltre ai punti attraverso cui la curva passa, due altri punti di controllo che ne determinano la curvatura. Il segmento curvilineo risulta sempre incluso nel guscio convesso (immaginiamo di unirli con un elastico) determinato dai quattro punti. Per il resto le curve si comportano esattamente allo stesso modo dei poligoni. Possono essere aperte, chiuse, dotate di un tratto, di un riempimento, di un contorno. di Hermit e Bezier hanno esattamente le stesse potenzialita'. Cambia solo il modo in cui si specificano le tangenti. In SVG si possono realizzare curve di Bezier attraverso il comando <path>: <path d="m C 50 50, 70 20, , , , " style="fill:none; stroke:black;"/> L'attributo d contiene le coordinate dei punti della curva. All'inizio si specifica la lettera M seguita dalle coordinate del primo punto, quindi la lettera C seguita dalle coordinate dei restanti punti (di controllo e non) separate da virgole. I gruppi in SVG Le primitive SVG possono essere riunite in gruppi attraverso il comando <g>...</g>: <g id="gruppo1" style="stroke:black;"> <line x1="700" y1="20" x2="700" y2="25" style="stroke:white"/> <rect x="0" y="0" width="800" height="100" </g>

7 I gruppi in SVG L'attributo id e' un nome che identifica il ggruppo in modo univoco (una chiave). Utilizzando un'attributo style nel tag <g>, si specifica lo stile di default con cui disegnare gli elementi in esso contenuti. I gruppi in SVG I gruppi possono essere copiati per riferimento attraverso il comando <use>: <use xlink:href="#gruppo1" x="10" y="20"/> Il valore dell'attributo xlink:href corrisponde al valore dell'attributo id del gruppo da copiare, preceduto da #. x ed y rappresentano le coordinate in cui viene posizionata la copia. I gruppi in SVG Si possono creare librerie di simboli grafici attraverso il comando <defs>..</defs>: <defs> <g id="gruppo1" style="stroke:black;"> <line x1="700" y1="20" x2="700" y2="25" style="stroke:white"/> <rect x="0" y="0" width="800" height="100" </g> </defs> I gruppi definiti allinterno dei tag <defs> non vengono visualizzati, ma possono essere richiamati con <use>. Trasformazioni Agli oggetti possono esserre applicate alcune semplici trasformazioni. Queste trasformazioni, dette trasformazioni affini, non cambiano la forma dell'oggetto, ma lo ruotano e lo schiacciano mantenendo invariato il numero di componenti. Ridimensionamento Ridimensionamento La trasformazione più semplice è il ridimensionamento. Essa permette di ingrandire o rimpicciolire l'oggetto. Il ridimensionamento può essere differente lungo gli assi orizzontale e verticale, distorcendo la figura.

8 Riflessione Trasformazioni di scala in SVG Tutte le trasformazioni in SVG si effettuano utilizzando l'attributo transform. I valori di tale attributo elencano le trasformazioni che vengono applicate agli oggetti. Con la riflessione si puo' ribaltare un oggetto lungo l'asse orizzontale o verticale. Tutti i tag che rappresentano primitive (<rect>, <ellipse>,..), gruppi (<g>) o riferimenti (<use>) possono specificare l'attributo transform. Trasformazioni di scala in SVG Ridimensionamenti e riflessioni in SVG si effettuano utilizzando l'opzione scale(): Rotazione <use xlink:href="#gruppo1" x="10" y="20" transform="scale(2.0, 3.0)"/> I due valori tra parentesi specificano rispettivamente il fattore di ingrandimento (riduzione) orizzontale e quello verticale. Le riflesioni si ottengono utilizzando fattori negativi. <use xlink:href="#gruppo1" x="10" y="20" transform="scale(-1.0, 1.0)"/> La rotazione ruota la figura attorno ad un centro. Rotazione Rotazione La rotazione in SVG si ottiene utilizzando l'opzione rotate(): <use xlink:href="#gruppo1" x="10" y="20" transform="rotate(45.0, 20, 50)"/> Solitamente occorre specificare il punto attorno al quale avviene la rotazione. Il primo parametro specifica l'angolo di rotazione (espresso in gradi). Il secondo ed terzo parametro (entrambe opzionali) definiscono le coordinate del centro di rotazione.

9 Skew Skew In SVG per ottenere l'effetto di skew si adoperano le opzioni skewx e skewy: <use xlink:href="#gruppo1" x="10" y="20" transform="skewx(15.0)"/> <use xlink:href="#gruppo1" x="50" y="20" transform="skewy(15.0)"/> Lo skew piega leggermente la figura lungo gli assi orizzontali o verticali. Il parametro di questa opzione specifica l'angolo in gradi di cui viene piegato l'oggetto. I testi in SVG I testi in SVG sono solo a singola linea e si indicano con il tag <text>...</text>: I testi in SVG Possono essere disposti lungo un tracciato utilizzando il tag <textpath>...</textpath> <text x="20" y="30"> Quando sei qui con me, </text> Gli attributi x e y specificano la posizione a cui la scritta deve essere visualizzata. Il testo viene indicato tra i tag di apertura e chiusura. <defs> <path id="tracciato" d="m20 45C "/> </defs> <text> <textpath xlink:href="#tracciato"> Questa stanza non ha piu' pareti, </textpath> </text> L'attributo xlink:href indica il nome del comando path che specifica il tracciato. I caratteri in SVG I caratteri si specificano all'interno della proprieta' style: I caratteri in SVG E' possibile utilizzare caratteri diversi in un testo attraverso il tag <tspan>...</tspan>: <text x="20" y="60" style="font-family:courier; font-weight:bold;"> Ma alberi, </text> Gli attributi che si possono specificare sono gli stessi che si possono specificare in un foglio di stile CSS di una pagina HTML: font-family, font-size, font-weight, font-style, text-decoration, wordspacing, letter-spacing. <text x="20" y="90"> Alberi <tspan style="font-weight:bold;"> infiniti</tspan> </text> I tag tspan racchiudono la parte di testo a cui si vuole assegnare il carattere alternativo.

10 I paragrafi Anche se in SVG non vi sono i paragrafi, si puo' comunque allineare il testo attraverso la proprieta' text-anchor: <text x="20" y="120" style="text-anchor:end"> Suona un'armonica </text> I valori start, middle ed end corrispondono all'allineamento sinistro, centrale e destro. Riempimenti avanzati Le parti interne dei poligoni e delle altre figure chiuse possono essere riempite con effetti più complessi rispetto al colore uniforme. Tra i riempimenti avanzati i gradienti sono quelli più semplici. Riempimenti avanzati Riempimenti avanzati In un gradiente lineare i colori si susseguono lungo una linea retta. E' possibile stabilire la direzione della retta. In un gradiente radiale i colori si susseguono in modo circolare a partire da un centro, che puo' essere specificato dall'utente. Gradienti in SVG I gradienti lineari in SVG sono realizzati attraverso il tag <lineargradient>...: Gradienti in SVG Utilizzando gli attributi x1, y1, x2 e y2 si puo' variare l'inclinazione: <lineargradient id="gtob"> <stop offset="0%" style="stop-color:green"/> <stop offset="100%" style="stop-color:blue"/> </lineargradient> <lineargradient id="gtob" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:green"/> <stop offset="100%" style="stop-color:blue"/> </lineargradient> I tag <stop> specificano il colore che il gradiente assume in punti specifici della sfumatura. L'attributo offset inidca il punto in cui la sfumatura assume la tinta specificata. I valori indicano in percentuale i punti di inizio e di fine di un segmento la cui direzione denota la direzione della sfumatura.

11 Gradienti in SVG Il tag <radialgradient> serve a realizzare gradienti radiali: <radialgradient id="rgtob" cx="20%" cy="50%" r="50%"> <stop offset="0%" style="stop-color:green"/> <stop offset="100%" style="stop-color:blue"/> </radialgradient> Gradienti in SVG I gradienti si applicano alle figure utilizzando il valore url(#) alla proprieta' fill del tag style dell'oggetto da riempire. <rect x="10" y="10" width="400" height="200" style="fill:url(#rgtob)"/> Gli attributi cx, cy e r specificano le coordinate del centro del gradiente, ed il raggio della circonferenza che lo include. In questo caso rgtob e' il valore che e' stato dato all'attributo id del gradiente che si intende assegnare al rettangolo. Gradienti in SVG Con l'attributo spreadmethod si possono specificare i modi in cui il gradiente viene ripetuto: <lineargradient id="gtob" x1="0%" y1="0%" x2="50%" y2="50%" spreadmethod="reflect"> <stop offset="0%" style="stop-color:green"/> <stop offset="100%" style="stop-color:blue"/> </lineargradient> Il valore pad indica che il gradiente non viene ripetuto. repeat indica una ripteizione normale e reflect una ripetizione speculare.