SVG è l'acronimo di Scalable Vector Graphics.
SVG è un formato basato su XML per disegnare immagini vettoriali. Viene utilizzato per disegnare immagini vettoriali bidimensionali.
Di seguito sono riportate le caratteristiche principali di SVG:
SVG, Scalable Vector Graphics è un linguaggio basato su XML per definire la grafica vettoriale.
SVG ha lo scopo di visualizzare immagini sul Web.
Essendo immagini vettoriali, l'immagine SVG non perde mai qualità, indipendentemente da come viene ingrandita o ridimensionata.
Le immagini SVG supportano l'interattività e l'animazione.
SVG è uno standard W3C.
Altri formati di immagine come le immagini raster possono anche essere bastonate con immagini SVG.
SVG si integra bene con XSLT e DOM di HTML.
Di seguito sono riportati i vantaggi dell'utilizzo di immagini SVG:
Utilizza qualsiasi editor di testo per creare e modificare immagini SVG.
Essendo basate su XML, le immagini SVG sono ricercabili, indicizzabili e possono essere inserite in script e compresse.
Le immagini SVG sono altamente scalabili in quanto non perdono mai la qualità, indipendentemente dal modo in cui vengono ingrandite o ridimensionate.
Buona qualità di stampa a qualsiasi risoluzione.
SVG è uno standard aperto.
Di seguito sono riportati gli svantaggi dell'utilizzo di immagini SVG:
La dimensione del formato del testo è maggiore rispetto alle immagini raster formattate in binario.
Le dimensioni possono essere grandi anche per immagini piccole.
Il tag "rect" di SVG viene utilizzato per disegnare un rettangolo.
Il tag "circle" di SVG viene utilizzato per disegnare un cerchio.
Il tag "ellipse" di SVG viene utilizzato per disegnare un'ellisse.
Il tag "line" di SVG viene utilizzato per disegnare una linea.
Il tag "poligono" di SVG viene utilizzato per disegnare una forma chiusa costituita da linee rette collegate.
Il tag "polilinea" di SVG viene utilizzato per disegnare una forma aperta costituita da linee rette collegate.
Il tag 'path' di SVG viene utilizzato per disegnare qualsiasi percorso.
Il tag "text" di SVG viene utilizzato per disegnare il testo.
L'attributo 'x' del tag di testo di SVG rappresenta le coordinate dell'asse x dei glifi.
L'attributo "y" del tag di testo di SVG rappresenta le coordinate dell'asse y dei glifi.
L'attributo 'dx' del tag di testo di SVG rappresenta lo spostamento insieme all'asse x.
L'attributo 'dy' del tag di testo di SVG rappresenta lo spostamento insieme all'asse y.
L'attributo 'rotation' del tag di testo di SVG imposta la rotazione da applicare a tutti i glifi.
L'attributo 'textlength' del tag di testo di SVG imposta la lunghezza di rendering del testo.
La proprietà 'tratto' definisce il colore del testo, della linea o del contorno di qualsiasi elemento.
La proprietà 'stroke-width' definisce lo spessore del testo, della linea o del contorno di qualsiasi elemento.
La proprietà 'stroke-linecap' definisce diversi tipi di fine di una linea o contorno di qualsiasi tracciato.
Proprietà 'stroke-dasharray' utilizzata per creare linee tratteggiate.
SVG utilizza l'elemento <filter> per definire i filtri. L'elemento <filter> utilizza un attributo id per identificarlo in modo univoco. I filtri sono definiti all'interno degli elementi <def> e quindi sono referenziati dagli elementi grafici tramite i loro ID.
SVG fornisce un ricco set di filtri. Di seguito è riportato l'elenco dei filtri comunemente utilizzati:
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
SVG utilizza l'elemento <pattern> per definire i pattern. I modelli vengono definiti utilizzando l'elemento <pattern> e vengono utilizzati per riempire gli elementi grafici in modo affiancato.
Il gradiente si riferisce alla transizione graduale di un colore a un altro colore all'interno di una forma. SVG fornisce due tipi di sfumature:
Gradienti lineari
Gradienti radiali
Gradienti lineari rappresenta la transizione lineare di un colore a un altro da una direzione all'altra. Viene definito utilizzando l'elemento <linearGradient>.
Gradienti radiali rappresenta la transizione circolare di un colore in un altro da una direzione all'altra. Viene definito utilizzando l'elemento <radialGradient>.
Sì! Le immagini SVG possono essere rese reattive alle azioni dell'utente. SVG supporta eventi del puntatore, eventi della tastiera e eventi del documento.
Sì! SVG supporta le funzioni JavaScript / ECMAScript. Il blocco di script deve essere nel blocco CDATA, considerare il supporto dei dati dei caratteri in XML.
Sì! Gli elementi SVG supportano eventi del mouse, eventi della tastiera. Abbiamo utilizzato l'evento onClick per chiamare una funzione javascript.
Nelle funzioni javascript, document rappresenta il documento SVG e può essere utilizzato per ottenere gli elementi SVG.
Nelle funzioni javascript, l'evento rappresenta l'evento corrente e può essere utilizzato per ottenere l'elemento di destinazione su cui è stato generato l'evento.
L'elemento <a> viene utilizzato per creare un collegamento ipertestuale. L'attributo "xlink: href" viene utilizzato per passare l'IRI (Internationalized Resource Identifiers) che è complementare all'URI (Uniform Resource Identifiers).
L'immagine SVG può essere incorporata utilizzando i seguenti modi:
utilizzando il tag di incorporamento
utilizzando il tag oggetto
utilizzando iframe
Il tag "rect" di SVG viene utilizzato per disegnare un rettangolo. Di seguito sono riportati gli attributi comunemente usati:
x- Coordinata dell'asse x dell'angolo superiore sinistro del rettangolo. L'impostazione predefinita è 0.
y- Coordinata dell'asse y della parte superiore sinistra del rettangolo. L'impostazione predefinita è 0.
width - larghezza del rettangolo.
height - altezza del rettangolo.
rx - utilizzato per arrotondare l'angolo del rettangolo arrotondato.
ry - utilizzato per arrotondare l'angolo del rettangolo arrotondato.
Esempio -
<rect
x = "100" y = "30"
width = "300" height = "100"
style = "fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" >Il tag "circle" di SVG viene utilizzato per disegnare un cerchio. Di seguito sono riportati gli attributi comunemente usati:
cx- Coordinata dell'asse x del centro del cerchio. L'impostazione predefinita è 0.
cy- Coordinata dell'asse y del centro del cerchio. L'impostazione predefinita è 0.
r - raggio del cerchio.
Esempio -
<circle
cx = "100" cy = "100" r = "50"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)" >Il tag "ellipse" di SVG viene utilizzato per disegnare un'ellisse. Di seguito sono riportati gli attributi comunemente usati:
cx- Coordinata dell'asse x del centro dell'ellisse. L'impostazione predefinita è 0.
cy- Coordinata dell'asse y del centro dell'ellisse. L'impostazione predefinita è 0.
rx - raggio dell'asse x dell'ellisse.
ry - raggio dell'asse y dell'ellisse.
Esempio -
<ellipse
cx = "100" cy = "100"
rx = "90" ry = "50"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">Il tag "line" di SVG viene utilizzato per disegnare una linea. Di seguito sono riportati gli attributi comunemente usati:
x1- Coordinata dell'asse x del punto iniziale. L'impostazione predefinita è 0.
y1- Coordinata dell'asse y del punto iniziale. L'impostazione predefinita è 0.
x2- Coordinata dell'asse x del punto finale. L'impostazione predefinita è 0.
y2- Coordinata dell'asse y del punto finale. L'impostazione predefinita è 0.
Esempio -
<line
x1 = "20" y1 = "20"
x2 = "150" y2 = "150"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">Il tag 'polygon' di SVG viene utilizzato per disegnare un poligono. Di seguito è riportato l'attributo comunemente usato:
points - Elenco di punti per formare un poligono.
Esempio -
<polygon
points = "150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">Il tag "polilinea" di SVG viene utilizzato per disegnare un poligono aperto. Di seguito è riportato l'attributo comunemente usato:
points - Elenco di punti per formare un poligono.
Esempio -
<polyline
points = "150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
stroke = "black"
stroke-width = "3"
fill = "none">Il tag 'path' di SVG viene utilizzato per disegnare un percorso a flusso libero. Di seguito è riportato l'attributo comunemente usato:
d - dati del percorso, di solito un insieme di comandi come moveto, lineto ecc.
Esempio -
<path
d = "M 100 100 L 300 100 L 200 300 z"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">Il comando M dell'elemento del percorso si sposta da un punto a un altro.
Il comando L dell'elemento percorso crea una linea.
Il comando H dell'elemento percorso crea una linea orizzontale.
Il comando V dell'elemento percorso crea una linea verticale.
Il comando C dell'elemento percorso crea una curva.
Il comando S dell'elemento del percorso crea una curva morbida.
Il comando Q dell'elemento percorso crea una curva di Bézier quadratica.
Il comando T dell'elemento percorso crea una curva di Bézier quadratica liscia.
Un comando di elemento percorso crea un arco ellittico.
Il comando Z dell'elemento percorso chiude il percorso.
Quando i comandi sono in maiuscolo, rappresentano il percorso assoluto. Nel caso in cui vengano utilizzati i comandi in minuscolo, viene utilizzato il percorso relativo.