Riferimento SVG
I disegni e le immagini SVG vengono creati con diversi elementi. Qui trovi una tabella degli elementi SVG con descrizioni e attributi corrispondenti.
SVG (Scalable Vector Graphics) è un linguaggio di markup basato su XML per descrivere grafica bidimensionale che rimane nitida a qualsiasi dimensione. Ogni forma, sfumatura, filtro o animazione in un documento SVG è scritta con un elemento dedicato. Questa pagina è una tabella di riferimento rapido di ogni elemento SVG standard, raggruppato per scopo, con una breve descrizione e gli attributi più frequentemente utilizzati. Usala come complemento ai capitoli pratici — inizia con introduzione a SVG e SVG in HTML5 — e torna qui quando hai bisogno di ricordare cosa fa un elemento o quali attributi accetta.
Nella colonna Attributi, una voce come attr="…" descrive il valore che un attributo scrivibile si aspetta, mentre presentation attributes: … elenca i gruppi di attributi di presentazione stilizzabili tramite CSS supportati dall'elemento. Gli elementi deprecati sono contrassegnati e, dove esiste un'alternativa, puntano alla sostituzione moderna.
Forme di base
Primitive geometriche usate per disegnare la grafica visibile di un SVG.
| Elemento | Descrizione | Attributi |
|---|---|---|
<circle> | Disegna un cerchio. Vedi il capitolo SVG circle. | cx="centro sull'asse x del cerchio" cy="centro sull'asse y del cerchio" r="raggio del cerchio (obbligatorio)" presentation attributes: Color, FillStroke, Graphics |
<ellipse> | Disegna un'ellisse. Vedi il capitolo SVG ellipse. | cx="centro sull'asse x dell'ellisse" cy="centro sull'asse y dell'ellisse" rx="raggio lungo l'asse x (obbligatorio)" ry="raggio lungo l'asse y (obbligatorio)" presentation attributes: Color, FillStroke, Graphics |
<line> | Disegna una linea retta tra due punti. Vedi il capitolo SVG line. | x1="punto di inizio x della linea" y1="punto di inizio y della linea" x2="punto di fine x della linea" y2="punto di fine y della linea" presentation attributes: Color, FillStroke, Graphics, Markers |
<path> | Disegna una forma arbitraria da una serie di comandi di percorso. Vedi il capitolo SVG path. | d="un insieme di comandi che specificano il percorso" pathLength="la lunghezza totale del percorso" transform="un elenco di trasformazioni" presentation attributes: Color, FillStroke, Graphics, Markers |
<polygon> | Disegna una forma chiusa da un elenco di almeno tre punti. Vedi il capitolo SVG polygon. | points="i punti del poligono (almeno tre sono obbligatori)" fill-rule="parte degli attributi di presentazione FillStroke" presentation attributes: Color, FillStroke, Graphics, Markers |
<polyline> | Disegna una forma aperta composta da segmenti di linea retta collegati. Vedi il capitolo SVG polyline. | points="i punti sulla polilinea (obbligatorio)" presentation attributes: Color, FillStroke, Graphics, Markers |
<rect> | Disegna un rettangolo, opzionalmente con angoli arrotondati. Vedi il capitolo SVG rectangle. | x="angolo in alto a sinistra sull'asse x del rettangolo" y="angolo in alto a sinistra sull'asse y del rettangolo" rx="raggio dell'angolo sull'asse x (per arrotondare l'elemento)" ry="raggio dell'angolo sull'asse y (per arrotondare l'elemento)" width="larghezza del rettangolo (obbligatorio)" height="altezza del rettangolo (obbligatorio)" presentation attributes: Color, FillStroke, Graphics |
Testo
Elementi per il rendering e il layout del testo all'interno di un SVG. Vedi il capitolo SVG text.
| Elemento | Descrizione | Attributi |
|---|---|---|
<text> | Disegna una sequenza di testo in una posizione data. | x="un elenco di posizioni sull'asse x; la n-esima posizione viene assegnata all'n-esimo carattere (default 0)" y="un elenco di posizioni sull'asse y (vedi x; default 0)" dx="lunghezze che spostano i caratteri rispetto alla posizione assoluta dell'ultimo glifo (vedi x)" dy="lunghezze che spostano i caratteri rispetto alla posizione assoluta dell'ultimo glifo (vedi x)" rotate="un elenco di rotazioni; la n-esima rotazione viene applicata all'n-esimo carattere" textLength="una lunghezza target che il visualizzatore tenta di adattare al testo regolando la spaziatura e/o i glifi (default: la lunghezza normale del testo)" lengthAdjust="cosa regolare per adattarsi a textLength: 'spacing' o 'spacingAndGlyphs'" presentation attributes: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
<textPath> | Dispone il testo lungo la forma di un elemento <path> referenziato. | href="riferimento URI al percorso su cui è disposto il testo" |
<tspan> | Contrassegna una sotto-sequenza di testo all'interno di un elemento <text> o <tspan> per stilizzarla o riposizionarla. | Identico all'elemento <text>, e in aggiunta: href="riferimento a un elemento <text>" |
Sfumature e pattern
Server di vernice che riempiono o tracciano le forme con sfumature o tessere ripetute. Vedi i capitoli sfumature lineari e sfumature radiali.
| Elemento | Descrizione | Attributi |
|---|---|---|
<linearGradient> | Definisce una sfumatura che trasforma i colori lungo un vettore rettilineo. | id="un id univoco usato per riferirsi a questa sfumatura (obbligatorio per referenziarla)" gradientUnits="'userSpaceOnUse' o 'objectBoundingBox' (default 'objectBoundingBox')" gradientTransform="la trasformazione da applicare alla sfumatura" x1="inizio x del vettore della sfumatura (numero o %; default 0%)" y1="inizio y del vettore della sfumatura (default 0%)" x2="fine x del vettore della sfumatura (default 100%)" y2="fine y del vettore della sfumatura (default 0%)" spreadMethod="'pad', 'reflect' o 'repeat'" href="riferimento a un'altra sfumatura i cui attributi e stop vengono ereditati come default (ricorsivo)" |
<radialGradient> | Definisce una sfumatura che trasforma i colori verso l'esterno da un punto centrale. | gradientUnits="'userSpaceOnUse' o 'objectBoundingBox' (default 'objectBoundingBox')" gradientTransform="trasformazione da applicare alla sfumatura" cx="centro della sfumatura (numero o %; default 50%)" cy="centro della sfumatura (default 50%)" r="raggio della sfumatura (default 50%)" fx="punto focale della sfumatura (default 0%)" fy="punto focale della sfumatura (default 0%)" spreadMethod="'pad', 'reflect' o 'repeat'" href="riferimento a un'altra sfumatura i cui attributi e stop vengono ereditati come default (ricorsivo)" |
<stop> | Definisce un colore e il suo offset all'interno di una sfumatura. | offset="offset per questo stop, da 0 a 1 o da 0% a 100% (obbligatorio)" stop-color="colore di questo stop" stop-opacity="opacità di questo stop, da 0 a 1" |
<pattern> | Definisce una tessera grafica che viene ripetuta per riempire o tracciare una forma. | id="id univoco usato per riferirsi a questo pattern (obbligatorio)" patternUnits="'userSpaceOnUse' o 'objectBoundingBox'; il secondo valore rende x, y, width, height una frazione (o %) del bounding box dell'oggetto che usa il pattern" patternContentUnits="'userSpaceOnUse' o 'objectBoundingBox'" patternTransform="una trasformazione applicata all'intero pattern" x="offset del pattern dall'angolo in alto a sinistra (default 0)" y="offset del pattern dall'angolo in alto a sinistra (default 0)" width="larghezza della tessera del pattern (default 100%)" height="altezza della tessera del pattern (default 100%)" viewBox="la regione visibile in questa area di disegno: min-x, min-y, width, height (separati da spazi o virgole)" href="riferimento a un altro pattern i cui attributi vengono ereditati come default e i cui figli vengono ereditati (ricorsivo)" |
Filtri
Primitive di filtro (la famiglia fe*) e il contenitore <filter> che si combinano per produrre effetti grafici come sfocature, illuminazione e variazioni cromatiche. Vedi i capitoli introduzione ai filtri SVG, effetti di sfocatura e ombre esterne.
| Elemento | Descrizione | Attributi |
|---|---|---|
<filter> | Contenitore che raggruppa le primitive di filtro in un effetto filtro riutilizzabile e nominato. | |
<feBlend> | Mescola due immagini di input insieme usando una modalità di fusione. | mode="modalità di fusione: normal|multiply|screen|darken|lighten" in="primo input: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="il secondo input per la fusione" result |
<feColorMatrix> | Applica una trasformazione matriciale ai canali di colore e alpha dell'input. | in="identifica l'immagine di input" type="matrix|saturate|hueRotate|luminanceToAlpha" values="i valori per il tipo scelto" result |
<feComponentTransfer> | Rimappa ogni canale colore/alpha in modo indipendente usando i figli feFunc*. | in="identifica l'immagine di input" result |
<feFuncA> | Definisce la funzione di trasferimento per il canale alpha di <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feFuncR> | Definisce la funzione di trasferimento per il canale rosso di <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feFuncG> | Definisce la funzione di trasferimento per il canale verde di <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feFuncB> | Definisce la funzione di trasferimento per il canale blu di <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feComposite> | Combina due input usando operatori di compositing Porter-Duff o aritmetici. | in="identifica la prima immagine di input" in2="identifica la seconda immagine di input" operator="over|in|out|atop|xor|arithmetic" k1="coefficiente aritmetico" k2="coefficiente aritmetico" k3="coefficiente aritmetico" k4="coefficiente aritmetico" result |
<feConvolveMatrix> | Applica una matrice di convoluzione (kernel) per effetti come nitidezza o rilievo. | in="identifica l'immagine di input" order="numero di colonne e righe nella matrice kernel" kernelMatrix="elenco dei valori del kernel" divisor="divisore per i valori del kernel" bias="valore di bias" targetX="posizione x della matrice di convoluzione" targetY="posizione y della matrice di convoluzione" edgeMode="duplicate|wrap|none" kernelUnitLength="lunghezza del kernel" preserveAlpha="true|false" result |
<feDiffuseLighting> | Illumina l'immagine di input come una superficie diffusa (opaca) usando il suo alpha come mappa di rilievo. | in="identifica l'immagine di input" surfaceScale="fattore di scala della superficie" diffuseConstant="costante di riflessione diffusa" kernelUnitLength="lunghezza del kernel" result |
<feDisplacementMap> | Sposta i pixel di un input usando i canali colore di un altro. | in="identifica la prima immagine di input" in2="identifica la seconda immagine di input" scale="fattore di scala" xChannelSelector="R|G|B|A" yChannelSelector="R|G|B|A" result |
<feDistantLight> | Definisce una sorgente di luce distante (direzionale) per un filtro di illuminazione. | azimuth="angolo di azimut" elevation="angolo di elevazione" |
<feFlood> | Riempie la regione del filtro con un singolo colore e opacità. | flood-color="colore di inondazione" flood-opacity="opacità di inondazione" result |
<feGaussianBlur> | Applica una sfocatura gaussiana all'immagine di input. | in="identifica l'immagine di input" stdDeviation="deviazione standard per la sfocatura" edgeMode="duplicate|wrap|none" result |
<feImage> | Carica un'immagine esterna o un elemento referenziato come input di filtro. | href="riferimento URI all'immagine" preserveAspectRatio="'none' o una delle 9 combinazioni di 'xVALYVAL'" result |
<feMerge> | Sovrappone più input in livelli, usando i figli <feMergeNode>. | result |
<feMergeNode> | Identifica un livello di input per un <feMerge> genitore. | in="identifica l'immagine di input" |
<feMorphology> | Assottiglia (erode) o ispessisce (dilata) l'immagine di input. | in="identifica l'immagine di input" operator="erode|dilate" radius="raggio dell'effetto" result |
<feOffset> | Sposta l'immagine di input di un dato offset (la base delle ombre esterne). | in="identifica l'immagine di input" dx="offset orizzontale" dy="offset verticale" result |
<fePointLight> | Definisce una sorgente di luce puntuale per un filtro di illuminazione. | x="posizione x della sorgente luminosa" y="posizione y della sorgente luminosa" z="posizione z della sorgente luminosa" |
<feSpecularLighting> | Illumina l'immagine di input come una superficie speculare (lucida) usando il suo alpha come mappa di rilievo. | in="identifica l'immagine di input" surfaceScale="fattore di scala della superficie" specularConstant="costante di riflessione speculare" specularExponent="esponente speculare" kernelUnitLength="lunghezza del kernel" result |
<feSpotLight> | Definisce una sorgente spotlight per un filtro di illuminazione. | x="posizione x della sorgente luminosa" y="posizione y della sorgente luminosa" z="posizione z della sorgente luminosa" pointsAtX="coordinata x verso cui punta la luce" pointsAtY="coordinata y verso cui punta la luce" pointsAtZ="coordinata z verso cui punta la luce" specularExponent="esponente speculare" limitingConeAngle="angolo del cono limitante" |
<feTile> | Ripete (tila) un input di filtro per riempire la regione del filtro. | in="identifica l'immagine di input" result |
<feTurbulence> | Genera turbolenza Perlin o rumore frattale (per texture come nuvole o marmo). | baseFrequency="frequenza di base" numOctaves="numero di ottave" seed="valore seed" stitchTiles="stitch|noStitch" type="fractalNoise|turbulence" result |
Animazione
Elementi che modificano i valori degli attributi nel tempo. Sono figli dell'elemento che animano (o lo referenziano).
| Elemento | Descrizione | Attributi |
|---|---|---|
<animate> | Anima un singolo attributo o proprietà di un elemento in un intervallo di tempo. | attributeName="il nome dell'attributo target" by="un valore di offset relativo" from="il valore iniziale" to="il valore finale" dur="la durata" repeatCount="il numero di volte in cui l'animazione viene eseguita" |
<animateMotion> | Sposta un elemento lungo un percorso di movimento nel tempo. | calcMode="modalità di interpolazione: 'discrete', 'linear', 'paced' o 'spline'" path="il percorso di movimento" keyPoints="quanto si sposta l'oggetto lungo il percorso per ciascun valore di keyTimes" rotate="trasformazione di rotazione" href="riferimento URI all'elemento <path> che specifica il percorso di movimento" |
<animateTransform> | Anima un attributo di trasformazione (translate, scale, rotate, skew) nel tempo. | by="valore di offset relativo" from="valore iniziale" to="valore finale" type="tipo di trasformazione da modificare nel tempo: 'translate', 'scale', 'rotate', 'skewX' o 'skewY'" |
<mpath> | Referenzia un elemento <path> esterno da usare come percorso di movimento per <animateMotion>. | href="riferimento URI all'elemento path" |
<set> | Imposta un attributo a un valore per una durata specificata (un'animazione non interpolata). | attributeName="il nome dell'attributo target" to="il valore da impostare" begin="quando inizia il cambiamento" dur="per quanto tempo il valore viene mantenuto" |
Contenitori e struttura
Elementi che raggruppano, referenziano, definiscono o organizzano il contenuto piuttosto che disegnarlo direttamente.
| Elemento | Descrizione | Attributi |
|---|---|---|
<a> | Crea un collegamento a una pagina web, file, indirizzo email, posizione o qualsiasi altro URL. | href target |
<clipPath> | Definisce un percorso di ritaglio che limita la regione di un elemento che viene renderizzata. | clipPathUnits="'userSpaceOnUse' o 'objectBoundingBox' (default 'userSpaceOnUse')" |
<defs> | Memorizza oggetti grafici da referenziare e riutilizzare in seguito (non renderizzati direttamente). | |
<desc> | Fornisce una descrizione solo testuale per un elemento grafico o contenitore SVG (per l'accessibilità). | |
<foreignObject> | Incorpora contenuto da un altro namespace XML (come HTML) all'interno di un SVG, consentendo al browser di renderizzarlo. | x y width height |
<g> | Raggruppa elementi in modo che trasformazioni e attributi di presentazione si applichino a loro insieme. | id="nome del gruppo" fill="colore di riempimento per il gruppo" opacity="opacità per il gruppo" presentation attributes: All |
<image> | Incorpora un'immagine raster o SVG all'interno del documento. | x="angolo in alto a sinistra sull'asse x dell'immagine" y="angolo in alto a sinistra sull'asse y dell'immagine" width="larghezza dell'immagine (obbligatorio)" height="altezza dell'immagine (obbligatorio)" href="percorso dell'immagine (obbligatorio)" presentation attributes: Color, Graphics, Images, Viewports |
<marker> | Definisce un elemento grafico (come una punta di freccia) disegnato ai vertici di una linea, polilinea o percorso tramite marker-start, marker-mid e marker-end. Definire il marker prima di referenziarlo. | markerUnits="'strokeWidth' o 'userSpaceOnUse'; con 'strokeWidth' un'unità equivale a una larghezza del tratto, altrimenti il marker non scala (default 'strokeWidth')" refX="posizione in cui il marker si connette al vertice (default 0)" refY="posizione in cui il marker si connette al vertice (default 0)" orient="'auto' o un angolo; 'auto' rende l'asse x una tangente del vertice (default 'auto')" markerWidth="larghezza del marker (default 3)" markerHeight="altezza del marker (default 3)" viewBox="i limiti del viewport: min-x, min-y, width, height (separati da spazi o virgole)" presentation attributes: All |
<mask> | Definisce una maschera alpha che combina opacità e ritaglio; testo, forme o percorsi impostano quali parti si vedono attraverso (lo stato predefinito è completamente trasparente). | maskUnits="sistema di coordinate per x, y, width, height sulla maschera: 'userSpaceOnUse' o 'objectBoundingBox' (default 'objectBoundingBox')" maskContentUnits="sistema di coordinate per il contenuto della maschera: 'userSpaceOnUse' o 'objectBoundingBox' (default 'userSpaceOnUse')" x="piano di ritaglio della maschera (default -10%)" y="piano di ritaglio della maschera (default -10%)" width="piano di ritaglio della maschera (default 120%)" height="piano di ritaglio della maschera (default 120%)" |
<metadata> | Contiene metadati leggibili dalla macchina (come RDF) riguardanti il documento; non viene renderizzato. | |
<script> | Incorpora o referenzia uno script (tipicamente JavaScript) per l'interattività. | href="URI di uno script esterno" type="tipo MIME del linguaggio di scripting" |
<style> | Incorpora un foglio di stile CSS all'interno del documento SVG. | type="tipo MIME del foglio di stile (text/css)" media="media query a cui si applicano gli stili" |
<svg> | Il contenitore radice (o annidato) che definisce un frammento di documento SVG e il suo sistema di coordinate. | x="angolo in alto a sinistra quando incorporato (default 0)" y="angolo in alto a sinistra quando incorporato (default 0)" width="larghezza del frammento (default 100%)" height="altezza del frammento (default 100%)" viewBox="la regione visibile in questa area di disegno: min-x, min-y, width, height (separati da spazi o virgole)" preserveAspectRatio="'none' o una delle 9 combinazioni 'xVALYVAL' dove VAL è 'min', 'mid' o 'max' (default xMidYMid)" xmlns="http://www.w3.org/2000/svg" presentation attributes: All |
<switch> | Renderizza solo il primo figlio i cui attributi di test (come la lingua o il supporto delle funzionalità) risultano veri. | |
<symbol> | Definisce un template riutilizzabile che non viene renderizzato finché non viene istanziato da un elemento <use>. | |
<title> | Fornisce un nome accessibile breve (spesso mostrato come tooltip) per il suo elemento genitore. | |
<use> | Clona e renderizza un elemento referenziato (come <svg>, <g> o una forma) tramite il suo id. | x="angolo in alto a sinistra sull'asse x dell'elemento clonato" y="angolo in alto a sinistra sull'asse y dell'elemento clonato" width="larghezza dell'elemento clonato" height="altezza dell'elemento clonato" href="riferimento URI all'elemento clonato" presentation attributes: All |
<view> | Definisce una vista nominata (un viewBox e un rapporto d'aspetto) che può essere puntata da un URL con frammento. | viewBox preserveAspectRatio zoomAndPan="'magnify' o 'disable' (default magnify)" |
Elementi deprecati
Questi elementi sono deprecati in SVG 2 e devono essere evitati nei nuovi documenti. Dove esiste una sostituzione moderna, è indicata nella descrizione.
| Elemento | Descrizione | Attributi |
|---|---|---|
<altGlyph> | Controllava i glifi usati per renderizzare dati di caratteri specifici. Deprecato in SVG 2; nessuna sostituzione diretta (usa testo Unicode in <text>/<tspan>). | x y dx dy rotate glyphRef format href |
<altGlyphDef> | Definiva un insieme di sostituzione per i glifi. Deprecato in SVG 2; nessuna sostituzione. | id |
<altGlyphItem> | Definiva un insieme di candidati per le sostituzioni di glifi. Deprecato in SVG 2; nessuna sostituzione. | id |
<color-profile> | Descriveva un profilo colore applicato a un'immagine. Deprecato in SVG 2; usa la regola at CSS @color-profile e la funzione color() invece. | local="ID univoco per un profilo colore archiviato localmente" name="nome del profilo" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" href="URI di una risorsa di profilo ICC" |
<cursor> | Definiva un cursore personalizzato indipendente dalla piattaforma. Deprecato in SVG 2; usa la proprietà CSS cursor invece. | x="angolo in alto a sinistra sull'asse x del cursore (default 0)" y="angolo in alto a sinistra sull'asse y del cursore (default 0)" href="URI dell'immagine da usare come cursore" |
<font> | Definiva un font SVG. Deprecato in SVG 2; usa CSS @font-face con i formati di web font invece. | |
<font-face> | Descriveva le caratteristiche di un font. Deprecato in SVG 2; usa invece la regola CSS @font-face. | |
<font-face-format> | Specificava il tipo di font referenziato dal suo genitore <font-face-uri>. Deprecato in SVG 2; usa invece il suggerimento CSS @font-face format(). | |
<font-face-name> | Referenziava un font locale per nome. Deprecato in SVG 2; usa invece la funzione CSS @font-face local(). | |
<font-face-src> | Rispecchiava il descrittore src delle regole CSS @font-face. Deprecato in SVG 2; usa invece il descrittore CSS @font-face src. | |
<font-face-uri> | Referenziava una definizione remota del font corrente. Deprecato in SVG 2; usa invece CSS @font-face src: url(). | |
<glyph> | Definiva la grafica per un particolare glifo in un font SVG. Deprecato in SVG 2; nessuna sostituzione. | |
<glyphRef> | Referenziava un glifo da usare come alternativa. Deprecato in SVG 2; nessuna sostituzione. | |
<hkern> | Definiva coppie di crenatura orizzontale e regolazioni in un font SVG. Deprecato in SVG 2; affidarsi alla crenatura dei web font invece. | |
<missing-glyph> | Definiva il glifo usato quando un carattere non può essere visualizzato in un font SVG. Deprecato in SVG 2; nessuna sostituzione. | |
<tref> | Referenziava e renderizzava il contenuto testuale di un altro elemento. Deprecato in SVG 2; nessuna sostituzione. | href="riferimento URI al contenuto testuale referenziato" |
<vkern> | Definiva coppie di crenatura verticale in un font SVG. Deprecato in SVG 2; affidarsi alla crenatura dei web font invece. |
Pratica
Pratica
Quali sono alcune delle funzionalità che possono essere incluse negli SVG durante la codifica in HTML?
Was this page helpful?