SVG: Le basi del linguaggio
La grafica vettoriale descrive le immagini come serie di forme geometriche. Al contrario, la grafica raster le descrive come insieme di pixel.
Gli oggetti che possono essere descritti come SVG sono: forme vettoriali (linee e curve), immagini raster e testo.
Questi possono essere raggruppati, trasformati, colorati (anche con gradienti o patterns) e avere un stile.
Il motivo per cui le immagini SVG sono ottime per il web è che sono file testuali che possono quindi essere compressi in maniera molto efficiente.
Il contenuto di ogni file SVG deve essere racchiuso nel seguente elemento principale:
<?xml version="1.0" standalone="yes"?>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"></svg>Se si utilizzano i tag SVG all’interno del codice HTML, senza esportarli in un file .svg separato, si possono omettere gli attributi version e xmlns, oltre alla dichiarazione del tag xml.
PrimoEsempio.svg
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="310" height="136">
<text x="10" y="100" style="fill: red; font-family: minstral; font-size: 32;" >Primo esempio di SVG</text>
</svg>Il file svg può essere incluso nella pagina HTML utilizzando il tag object:
<object width="320" height="200" data="./graphics/PrimoEsempio.svg" type="image/svg+xml">Il browser non riesce a visualizzare PrimoEsempio.svg</object>Un’alternativa al tag <object> è <embed>, che è un tag autochiudente e richiede src invece di data.
I tag degli elementi SVG supportano il CSS sia interno che esterno. Inoltre, per alcune proprietà come fill, font-family e font-size, si possono utilizzare i fogli di stile come attributi dell’elemento.
Gli elementi presenti all’interno di un SVG vengono posizionati in una canvas, le cui coordinate iniziali (0,0) partono da in alto a sinistra. Quindi è possibile modificarne gli offset, come è stato fatto in PrimoEsempio utilizzando gli attributi x e y.
Oltre ai pixel, gli offset possono essere espressi anche in cm, mm e in.
Utilizzando javascript o il linguaggio SMIL, è possibile creare animazioni con gli elementi SVG.
Basic Shapes
Linea
Una linea è un segmento avente come coordinate del punto iniziale (x1,y1) e come coordinate del punto finale (x2,y2).
<line x1="100" y1="100" x2="200" y2="200" style="stroke:blue; stroke-width:10;" />Polilinea
Una polilinea identifica un disegno realizzato da una sequenza di linee. Per disegnare una polilinea bisogna specificare le coordinate dei punti che ostituiscono i suoi estremi.
<polyline points="0,0 50,50 50,20 150,80" style="stroke: rgb(0,0,255); stroke-width: 5; fill:none;">Da notare lo stile fill:none, necessario se si vuole evitare che venga utilizzato un riempimento tra il primo e l’ultimo punto.
Rettangolo
Per disegnare un rettangolo bisogna specificare le coordinate del vertice superiore sinistro, altezza e larghezza.
<rect x="25" y="25" width="250" height="150" style="fill: red; stroke: black;" />Cerchio
Per disegnare un cerchio bisogna specificare la coordinata del centro, attraverso gli attributi cx e cy, e il raggio (con l’attributo r).
<circle cx="50" cy="50" r="50" style="stroke: violet; fill: none;" />Ellisse
Per disegnare un’ellisse, oltre alla coordinata del centro, bisogna specificare il raggio orizzontale, rx, e quello verticale, ry.
<ellipse cx=”150″ cy=”150″ rx=”50″ ry=”100″ style=”stroke: orange;” />
Poligono
Un poligono si ottiene specificando le coordinate dei punti che costituiscono i suoi vertici.
<path d="M 50,100 L 100,50 L 150,50 L 150,150 Z" style="fill:brown;"/>Differisce dall’elemento polilinea in quanto il primo e l’ultimo punto sono collegati in modo da formare una superficie chiusa.
L’elemento Path
Un path consiste in una sequenza di segmenti che possono essere sia rettilinei che curvilinei. Ad ogni segmento corrisponde una serie di comandi, contenuti nell’attributo d, che permettono di specificarne le caratteristiche.
I comandi disponibili sono:
- moveto:
M x,y - lineto:
L x,y - horizontal lineto:
H x - vertical lineto:
V y - closepath:
Z
Per disegnare segmenti curvilinei, esistono altri comandi detti curve command, che utilizzano il meccanismo dei punti di controllo.
Un punto di contorllo è paragonabile ad un magnete che attira la curva deformandola. L’attrazione è tanto più potente quanto più il punto di controllo è vicino alla curva.
- 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
<svg height="600" width="800" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M 50,200 C 50,100 300,100 300,200" style="stroke: red; fill:none; stroke-width: 3" />
<path d="M 350,200 C 400,100 700,100 600,200" style="stroke: blue; fill:none; stroke-width: 3" />
<path d="M 50,400 S 50,300 300,400" style="stroke: green; fill:none; stroke-width: 3" />
<path d="M 350,400 Q 400,300 450,400 T 600,400" style="stroke: red; fill:none; stroke-width: 3" />
</svg>
Le distanze tra i punti possono essere espresse relativamente al punto precedente invece che in modo assoluto. Per utilizzare i comandi relativi, bisogna scriverli in minuscolo.
Gli elementi text e tspan
L’elemento text consente di inserire del testo in posizione assoluta tramite gli attributi x e y.
Per posizionarlo in maniera relativa, bisogna utilizzare l’elemento tspan all’interno di text, i cui attributi dx e dy consentono di indicare il numero di pixel cui traslare il testo rispetto all’elemento di testo precedente.
<text x="20" y="10">
Prima scritta
<tspan x="20" dy="20">Seconda scritta</tspan>
<tspan dx="10" dy="20">Terza scritta</tspan>
</text>L’elemento Image
Per inserire immagini raster si utilizza l’elemento image, in cui l’url dell’immagine va inserito con l’attributo xlink:ref.
<image x="20" y="30" width="320" height="200" xlink:href="CustomImage.png" />Raggruppare elementi
I singoli elementi grafici possono essere raggruppati in modo da poter condividere determinati attributi.
Per farlo, basta racchiuderli nel tag <g></g>.
Gli stili in SVG
Sono supportati i fogli di stile interni ed esterni. Per i fogli di stile interni, bisogna inserire nell’elemento root il tag <style>:
<style type="text/css"><![CDATA[
// definizione stili css
]></style>Oppure, se lo stile è contenuto in un file esterno, lo si può importare inserendo prima dell’elemento radice:
<?xml-stylesheet href="custom.css" type="text/css"?>Gli elementi SVG condividono alcune proprietà CSS che possono essere modificate inline utilizzandole come attributi:
| Proprietà | Descrizione |
|---|---|
| fill | Colore di riempimento / colore della scritta. Espressi indicandone il nome o la codifica rgb. |
| opacity | Livello di opacità tra 0 e 1. |
| stroke | Colore della linea che costituisce il bordo dell’elemento / della scritta. |
| stroke-width | Spessore della linea. |
| stroke-dasharray | Stile della linea (es. normale o tratteggiata). |
| stroke-linecap | Disegno degli estremi della linea. Possibili valori: butt, round, square. |
| font-family | Tipo di font. |
| font-size | Dimensione dei caratteri. |
| font-style | Stile del testo. |
| font-weight | Grandezza dei caratteri. |
| text-decoration | Aspetto del testo. |
| text-anchor | Allineamento del testo |
| baseline-shift | Posizionamento del testo come apice superiore o inferiore. Valori possibili: super o sub |
| letter-spacing | Distanza tra i caratteri |
| word-spacing | Distanza tra le parole |