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
Elementi SVG
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)"
Forme di base
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
Immagini
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.
Testo
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
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.
Filtri
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.
Maschere e ritaglio
È 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.
Animazioni
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:
Scripting
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: