• Scalable Vector Graphics è un formato vettoriale proposto dal W3C
• Essendo un formato vettoriale può essere ridimensionato a piacere senza perdita di risoluzione
• È un formato testuale basato sull' XML
• Può contenere forme semplici o complesse, piene o vuote, ma anche testo e immagini importate
• Può essere salvato in un file di immagine, da solo, oppure essere inserito direttamente nell'HTML, tramite il tag SVG

• File standalone e viene inserito nell'html così:
• SVG nell'html

Molti dei parametri sono numerici. Per essi si deve indicare un'unità di misura, scelta tra:

<Nessuna unità>

equivale a pixel

em

la larghezza o l'altezza del carattere M nel font corrente

ex

L'altezza del font corrente

px

Pixel

in

Pollici

cm

Centimetri

mm

Millimetri

pt

Punti tipografici, un punto corrisponde a 1/72 pollici

pc

Pica, un'altra misura tipografica corrispondente a 12 punti o 1/6 di pollice

%

La percentuale dell'altezza o larghezza del contenitore dell'oggetto oppure dell'intera immagine, se l'oggetto non è contenuto in un altro

Spesso occorre indicare dei colori.
Valgono tutti i modi di indicare i colori in HTML:

<nome>

Tutti i nomi di colori validi, elencati qui

#<rr><gg><bb> oppure #<r><g><b>

dove <r> indica la quantità di rosso, <g> la quantità di verde e <b> la quantità di blu ed hanno valore compreso tra 00 ed ff nel primo caso e tra 0 ed f nel secondo.

rgb(<rosso>, <verde>, &l;blue>)

dove <rosso>, <verde> e &l;blue> indicano rispettivamente le quanitità di rosso, verde e blue, comprese tra 0 e 255, intere

rgb(<rosso>%, <verde>%, &l;blue>%)

dove <rosso>, <verde> e &l;blue> indicano rispettivamente le percentuali rosso, verde e blue, comprese tra 0 e 100, intere

Tutte le forme di base di SVG hanno degli attributi comuni:

stroke=<colore>

indica il colore del tratto, ad esempio stroke="red"

stroke-width=<valore>

indica la dimensione del tratto, ad esempio stroke-width="2px"

fill=<colore>

indica il colore di riempimento (per le forme chiuse. Se non è indicato, la forma è trasparente (ha solo il contorno), ad esempio fill="rgb(0,255, 0)"

opacity=<numero minore o guale a 1>

Indica l'opacità della forma, dove 1.0 indica completamente opaco e 0.0 completamente trasparente, ad esempio opacity="0,5"

fill-opacity=<numero minore o guale a 1>

Indica l'opacità del riempimento, dove 1.0 indica completamente opaco e 0.0 completamente trasparente, ad esempio fill-opacity="0,75"

stroke-opacity=<numero minore o guale a 1>

Indica l'opacità del bordo, dove 1.0 indica completamente opaco e 0.0 completamente trasparente, ad esempio stroke-opacity="0,25"

stroke-linecap=<modo>

Indica come termina la riga e può essere butt (troncata) round (arrotondata) square (quadrata). Tra butt e square la differenza è che in butt la linea termina alle coordinate previste, mentre in square la linea termina con un quadrato centrato sule coordinate quindi si allunga di metà dello spessore, ad esempio stroke-linecap="round"

stroke-dasharray=$lt;elenco di lunghezze di tratto e spazio bianco>

consente di fare linee tratteggiate, indicando la lungezza di ogni trattino dello schema di tratteggio e di ogni spazio tra i trattini, ad esempio stroke-dasharray="10px, 5px"

Altri attributi

Esistono molti altri attributi, che troveremo in documentazione

style=<stringa>

indica una stringa di stile, che potrà contenere le parole chiave precedenti, con il relativo valore separato da :, separata l'una dall'altra da ;. come nell'attributo style di HTML, ad esempio style="stroke: blue; stroke-width:2px; fill:rgb(0, 255, 255)"

per creare un disegno potremo usare le classiche forme di base delle quali indicherò gli attributi:

rect

x e y

Indicano la posizione dell'angolo in alto a sinistra del cetrangolo

width ed height

Indicano rispettivamente la larghezza e l'altezza del rettangolo

circle

cx e cy

Indicano la posizione del centro

r

Indica il raggio

ellipse

cx e cy

Indicano la posizione del centro

rx ed ry

Indicano il raggio orizzontale e verticale

line

x1 e y1

Indicano la posizione del primo estremo

x2 e y2

Indicano la posizione del secondo estremo

polygon

points

Indica un elenco di coppie di coordinate dei punti. Ogni coppia è separata da una virgola, tra una coppia e l'altra ci va uno spazio. L'ultimo punto viene congiunto con il primo

fill-rule

Serve nel caso i lati della figura si intersecano, creando degli spazi interni. Se vale nonzero le parti interne saranno piene, se vale evenodd saranno vuote

ployline

points

Indica un elenco di coppie di coordinate dei punti. Ogni coppia è separata da una virgola, tra una coppia e l'altra ci va uno spazio.

fill-rule

Serve nel caso i lati della figura si intersecano, creando degli spazi interni. Se vale nonzero le parti interne saranno piene, se vale evenodd saranno vuote

path

Una path è un percorso, come fosse fatto da una matita, composto da spostamenti e linee tracciate. Le linee possono essere rette o curve con varie caratteristiche particolari. Il i comandi delle path sono decisamente troppo complessi per spiegarli qui. Rimando quindi all'apposito capitolo " testo sacro" The ‘path’ element.
Qui mi limito a riportare un esempio.

Esercizio

Creare un file SVG stand-alone oppure un SVG incorporato nell'HTML di dimensione 10cm X 15cm contenete l'immagine di un "omino" disegnato con le figure di base

In un'immagine SVG possono essere caricate delle immagini di tipo bitmap ottenute, ad esempio, da file immagine di tutti i tipi accettati dall'HTML. Viene inserita in SVG con l'elemento image con i seguenti parametri:

width e height

OBBLIGTORI la larghezza e l'altzza dell'immagine

xlink:href

OBBLIGTORIO l'URL (IRI) dell'immagine da caricare

x e y

La posizione dell'angolo in alto a sinistra dell'immagine

Esercizio

Creare un file SVG stand-alone oppure un SVG incorporato nell'HTML di dimensione 10cm X 10cm contenete un cerchio più grande possibile, con colore e dimensione del bordo e colore del riempimento a scelta con al centro l'immaginetta del panorama, con largheza 3cm ed altezza 2cm, circondata da un rettangolo con bordo da 3 px, distante 2mm dall'immagine.

In SVG si può inserire del testo. Lo si farà con gli elementi text e tspan che consentono di associare molte caratteristiche al testo disegnato.
text racchiuderà un blocco di testo da disegnare. tspan puà essere inserito in un blocco di testo per assegnare caratteristiche diverse ad un parte del testo, come il tag span dell'HTML. I blocchi text e tspan posseggono molte caratteristiche specifiche:

x ed y

indicano la posizione dell'inizio della linea di base del testo da disegnare.

font-size

La dimensione del testo

font-family

Indica la famiglia di font da utilizzare, come nell'HTML o nel CSS

font-style

lo stile del font, norma, italic, oblique

font-variant

la variante: small-caps

font-weight

il peso del font: bold, bolder, lighter

font-stretch

l'allungamento del font: wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded

Tutti gli elementi inseriti in un'immagine possono essere spostati e deformati tramite le trasformazioni.
Le trasformazioni servono a ruotare, ridimensionare o distorcere un elemento.
Molto spesso quello che vogliamo ruotare, deformare o modificare non è però un singolo elemento, una forma di base o un testo semplice ma una forma complessa creata con più elementi. Per ottenere questo possiamo utilizzare l'elemento <g> che ci consente appunto di aggruppare più elementi di base creando un nuovo elemento composto al quale attribuire attributi e trasfromazioni.
Se impostiamo attributi in un gruppo, questi sono automaticamente ereditati da tutti gli elementi del gruppo, quindi potremo ad esempio associare ad un gruppo un font ed una dimensione del testo. Tutti gli elementi di testo del gruppo erediteranno queste caratteristiche, mentre gli elementi non di testo semplicemente li ignoreranno.
Tutte le trasformazioni si inseriscono nell'attibuto transform che può essere associato ad ogni elemento.
Le trasformazioni saranno specificate come una stringa contenete tutte le trasformazioni che si vogliono applicare all'elemento.
Le trasformazioni indicate saranno applicate in sequenza.
La matematica usata per le trasformazioni si basa sulla moltiplicazione del vettore ottenuto dalle coordinate di ogni singolo punto, con l'ultimo elemento impostato ad 1 con una matrice quadrata 3 X 3 con l'ultima riga impostata a 0, 0, 1, ma qui mi fermo...
Le trasformazioni possibili sono:

translate(<tx> [<ty>])

trasla l'elemento di tx e ty; se ty non è specificato, viene considerato 0.

scale(<sx> [<sy>])

scala (riduce o ingrandisce l'elemento) secondo le proporzioni sx ed sy; se sy non è indicato verrà assunto uguale ad sx.

rotate(<rotate-angle> [<cx> <cy>])

ruota l'elemento dell'angolo rotate-angle espresso in gradi attorno alle coordinate cx e cy; se cx e cy non sono specificate, la rotazione è effettuta rispetto all'origine degli assi.

skewX(<skew-angle>)

deforma l'elemento ruotando di skew-angle gradi l'asse Y.

skewY(<skew-angle>)

deforma l'elemento ruotando di skew-angle gradi l'asse X.

matrix(<a> <b> <c> <d> <e> <f>)

consente di impostare a piacere i sei elementi variabili della matrice descritta prima, utilizzata già per implementare tutte le trasformazioni descritte.

Gli elementi di un'immagine possono anche essere modificati tramite dei filtri.
Un filtro è la composizione di una serie di effetti che l'SVG mette a disposizione e deve essere definito, con un nome, in modo da poterlo applicare ad un elemento.
Il filtro viene definito tramite l'elemento <filter> all'interno del quale verranno inseriti uno o più effetti, che sono quegli elementi di SVG il cui nome comincia con fe.
Tutte le definizioni dei filtri andranno raccolte all'interno di un elemento <defs> che non possiede parametri.
L'elemento <filter> possiede i seguenti parametri:

x e y

l'inizio dell'area su cui agisce il filtro

width ed height

la larghezza e l'altezza dell'area su cui agisce il filtro

Per applicare un filtro ad un elemento, dovrò aggiungere un parmetro all'elemento stesso:

filter="uri"

dove uri farà riferimento all'id del filtro in questo modo: url(#<id del filtro>

Questi parametri saranno definiti a partire dal rettangolo dell'elemento a cui viene applicato il filtro. Un filtro può anche specificare che le coordinate sono espresse in base allo spazio utente dell'immagine.
Non faccio un elenco di filtri disponibili, ma mi limito a fare un piccolo esempio.

È possibile ritagliare un elemento oppure applicargli una maschera.
Nel primo caso useremo un percorso (path, nel secondo caso un elemento di disegno come riferimento per la forma.
Se facciamo un ritaglio (clip) la forma di questo elemento verrà usata per decidere quali pixel visualizzare e quali no dell'elemento a cui applico il ritaglio.
Se applichiamo una maschera il valore di ogni singolo pixel dell'elemento usato come maschera determinerà la trasparenza del pixel corrispondente del nostro elemento.
Gli attributi per applicare maschere o ritagli sono:

clip-path

specifica l'url del percorso definito in <defs> usare per il ritatlio

clip-rule

che può valere nonzero o evenodd indica come trattare le parti interne del percorso

mask

specifica l'url dell'elemento definto in <defs> da usare come maschera

L'elemento che useremo come maschera andrà creato all'interno della seione <defs> come i filtri.
Passo ad un semplice esempio.

Con SVG è possibile anche fare in modo che alcuni parametri del disegno o dei filtri si modifichino nel tempo, creando un'animazione. Facciamo ad esempio scorrere il cetnro del cerchio bianco su un percorso circolare:

Un'immagine SVG possiede un DOM (Document Object Model) tramite il quale, con il linguaggio javascritp è possibile manipolare l'immagine stessa.
Ad esempio nell'immagine qui sotto c'è uno script connesso al cherchio traslucido. Provate a cliccarlo:

Wikipedia IT

https://it.wikipedia.org/wiki/Scalable_Vector_Graphics

Wikipedia EN

https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

W3C

https://www.w3.org/Graphics/SVG/

Specifica originale (W3C)

https://www.w3.org/TR/SVG11/

Tutorial w3schools

https://www.w3schools.com/graphics/svg_intro.asp