SVG Le basi del linguaggio

SVG: Le basi del linguaggio

5 minuti
17/11/2024
Tempo di lettura: 8 min.

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:

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>
SVG curveto Bezier curves
Visualizzazione punti di controllo curveto

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
fillColore di riempimento / colore della scritta. Espressi indicandone il nome o la codifica rgb.
opacityLivello di opacità tra 0 e 1.
strokeColore della linea che costituisce il bordo dell’elemento / della scritta.
stroke-widthSpessore della linea.
stroke-dasharrayStile della linea (es. normale o tratteggiata).
stroke-linecapDisegno degli estremi della linea. Possibili valori: butt, round, square.
font-familyTipo di font.
font-sizeDimensione dei caratteri.
font-styleStile del testo.
font-weightGrandezza dei caratteri.
text-decorationAspetto del testo.
text-anchorAllineamento del testo
baseline-shiftPosizionamento del testo come apice superiore o inferiore. Valori possibili: super o sub
letter-spacingDistanza tra i caratteri
word-spacingDistanza tra le parole