English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5 supporta SVG inline. I file SVG possono essere incorporati nei documenti HTML con i seguenti tag: <embed>, <object> o <iframe> (embed e iframe appartengono a frame incorporati), attraverso questi tag è possibile incorporare direttamente il codice SVG nelle pagine HTML, o possiamo anche collegarci direttamente ai file SVG.
SVG sta per Scalable Vector Graphics (Grafica Vettoriale Scalabile)
SVG viene utilizzato per definire grafica vettoriale basata su reti
SVG utilizza il formato XML per definire grafica
Le immagini SVG non perdono qualità grafica quando vengono ingrandite o ridotte di dimensioni
SVG è uno standard del World Wide Web Consortium
In confronto ad altri formati di immagine (ad esempio JPEG e GIF), l'uso di SVG ha i seguenti vantaggi:
Le immagini SVG possono essere create e modificate con un editor di testo
Le immagini SVG possono essere cercate, indicizzate, scriptate o compressi
SVG è scalabile
Le immagini SVG possono essere stampate a alta qualità in qualsiasi risoluzione.
SVG può essere ingrandito senza perdere qualità dell'immagine.
Internet Explorer 9+, Firefox, Opera, Chrome e Safari supportano SVG inline.
In HTML5, è possibile incorporare direttamente gli elementi SVG nelle pagine HTML:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Base tutorial site (oldtoolbag.com)</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg> </body> </html>Testa per vedere ‹/›
Il risultato dopo l'esecuzione è il seguente:
!doctype html <html> <head> <meta charset="utf-8"> <title>Utilizzo di SVG per disegnare cerchi oldtoolbag.com</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" height="500px" width="500px" version="1.1"> <circle cx="200" cy="100" r="100" stroke="#afeedd" stroke-width="5" fill="#f0ddff" /> </svg> </body> </html>Testa per vedere ‹/›
Il tag <svg>heightewidthL'attributo è per impostare l'altezza e la larghezza del documento SVG;versionL'attributo può definire la versione di SVG utilizzata;xmlns L'attributo può definire lo spazio dei nomi SVG;
<circle> è il tag utilizzato in SVG per creare cerchicx e cy L'attributo definisce il centro della forma: x e y Le coordinate, se si ignorano questi due attributi, il punto di intersezione viene impostato su (0, 0),rL'attributo definisce il raggio del cerchio;
stroke e stroke-width L'attributo controlla come visualizzare il contorno della forma:fill Imposta il colore all'interno della forma dell'attributo;
Guardiamo l'effetto visivo della dimostrazione:
!doctype html <html> <head> <meta charset="utf-8"> <title>Disegna un rettangolo con SVG oldtoolbag.com</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" version="1.1"> <rect x="50" y="100" width="300" height="150" style="fill:rgb(145,245,255);stroke-width:5;stroke:#EE799F;fill-opacity:0.9;stroke-opacity:0.9;"/> </svg> </body> </html>Testa per vedere ‹/›
SVG è un linguaggio utilizzato per descrivere grafici 2D tramite XML.
Canvas disegna grafici 2D tramite JavaScript.
SVG è basato su XML, il che significa che ogni elemento nel DOM di SVG è disponibile. Puoi aggiungere un gestore di eventi JavaScript a un elemento.
In SVG, ogni grafico disegnato è considerato un oggetto. Se le proprietà dell'oggetto SVG cambiano, il browser può automaticamente riprodurre il grafico.
Canvas è renderizzato pixel per pixel. Una volta che un grafico è stato disegnato nel canvas, non riceve più l'attenzione del browser. Se la sua posizione cambia, l'intera scena deve essere ridisegnata, inclusi qualsiasi oggetto che potrebbe essere coperto dal grafico.
La tabella seguente elenca alcune delle differenze tra canvas e SVG.
| Canvas | SVG |
|
|