Grafica HTML SVG
SVG definisce la grafica vettoriale in formato XML.
Cos'è SVG?
- SVG sta per Scalable Vector Graphics
- SVG viene utilizzato per definire la grafica per il Web
- SVG è una raccomandazione del W3C
L'elemento HTML <svg>
L'elemento HTML <svg>è un contenitore per la grafica SVG.
SVG ha diversi metodi per disegnare percorsi, riquadri, cerchi, testo e immagini grafiche.
Supporto del browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente l'
<svg>elemento.
| Element | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
Cerchio SVG
Esempio
<!DOCTYPE html>
<html>
<body>
<svg
width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green"
stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Rettangolo SVG
Esempio
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"
/>
</svg>
Rettangolo arrotondato SVG
Esempio
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20"
width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
Stella SVG
Esempio
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Logo SVG
Esempio
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%"
y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"
/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55"
fill="url(#grad1)" />
<text fill="#ffffff" font-size="45"
font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not
support inline SVG.
</svg>
Differenze tra SVG e Canvas
SVG è un linguaggio per descrivere la grafica 2D in XML.
Canvas disegna grafica 2D, al volo (con un JavaScript).
SVG è basato su XML, il che significa che ogni elemento è disponibile all'interno del DOM SVG. Puoi allegare gestori di eventi JavaScript per un elemento.
In SVG, ogni forma disegnata viene ricordata come un oggetto. Se gli attributi di un oggetto SVG vengono modificati, il browser può eseguire nuovamente il rendering della forma.
La tela viene renderizzata pixel per pixel. Nella tela, una volta disegnata la grafica, viene dimenticata dal browser. Se la sua posizione deve essere cambiata, l'intera scena deve essere ridisegnata, compresi gli oggetti che potrebbero essere stati coperti dalla grafica.
Confronto tra Canvas e SVG
La tabella seguente mostra alcune importanti differenze tra Canvas e SVG:
| Canvas | SVG |
|---|---|
|
|
Esercitazione SVG
Per saperne di più su SVG, leggi il nostro Tutorial SVG .