HTML5 - SVG
SVG sta per Scalable Vector Graphics ed è un linguaggio per descrivere la grafica 2D e le applicazioni grafiche in XML e l'XML viene quindi reso da un visualizzatore SVG.
SVG è principalmente utile per diagrammi di tipo vettoriale come grafici a torta, grafici bidimensionali in un sistema di coordinate X, Y ecc.
SVG è diventato una raccomandazione W3C il 14 gennaio 2003 ed è possibile controllare l'ultima versione della specifica SVG in Specifiche SVG .
Visualizzazione di file SVG
La maggior parte dei browser Web può visualizzare SVG proprio come possono visualizzare PNG, GIF e JPG. Gli utenti di Internet Explorer potrebbero dover installare Adobe SVG Viewer per poter visualizzare SVG nel browser.
Incorporamento di SVG in HTML5
HTML5 consente di incorporare SVG direttamente utilizzando <svg>...</svg> tag che ha la seguente sintassi semplice:
<svg xmlns = "http://www.w3.org/2000/svg">
...
</svg>Firefox 3.7 ha anche introdotto un'opzione di configurazione ("about: config") in cui è possibile abilitare HTML5 utilizzando i seguenti passaggi:
genere about:config nella barra degli indirizzi di Firefox.
Fare clic su "Starò attento, lo prometto!" sul messaggio di avviso che appare (e assicurati di rispettarlo!).
genere html5.enable nella barra dei filtri nella parte superiore della pagina.
Al momento sarebbe disabilitato, quindi fai clic per impostare il valore su true.
Ora il tuo parser HTML5 di Firefox dovrebbe essere abilitato e dovresti essere in grado di sperimentare i seguenti esempi.
HTML5 - SVG Circle
Di seguito è riportata la versione HTML5 di un esempio SVG che disegnerebbe un cerchio utilizzando il tag <circle> -
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Circle</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
</svg>
</body>
</html>Ciò produrrebbe il seguente risultato nell'ultima versione di Firefox abilitata per HTML5.
HTML5 - Rettangolo SVG
Di seguito è riportata la versione HTML5 di un esempio SVG che disegnerebbe un rettangolo utilizzando il tag <rect> -
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Rectangle</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<rect id = "redrect" width = "300" height = "100" fill = "red" />
</svg>
</body>
</html>Ciò produrrebbe il seguente risultato nell'ultima versione di Firefox abilitata per HTML5.
HTML5 - Linea SVG
Di seguito è riportata la versione HTML5 di un esempio SVG che traccerebbe una linea utilizzando il tag <line> -
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Line</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<line x1 = "0" y1 = "0" x2 = "200" y2 = "100"
style = "stroke:red;stroke-width:2"/>
</svg>
</body>
</html>Puoi usare il file style attributo che consente di impostare ulteriori informazioni di stile come i colori del tratto e del riempimento, la larghezza del tratto, ecc.
Ciò produrrebbe il seguente risultato nell'ultima versione di Firefox abilitata per HTML5.
HTML5 - Ellisse SVG
Di seguito è riportata la versione HTML5 di un esempio SVG che disegnerebbe un'ellisse utilizzando il tag <ellipse> -
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-40%);
-ms-transform: translateX(-40%);
transform: translateX(-40%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Ellipse</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<ellipse cx = "100" cy = "50" rx = "100" ry = "50" fill = "red" />
</svg>
</body>
</html>Ciò produrrebbe il seguente risultato nell'ultima versione di Firefox abilitata per HTML5.
HTML5 - SVG Polygon
Di seguito è riportata la versione HTML5 di un esempio SVG che disegnerebbe un poligono utilizzando il tag <polygon> -
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Polygon</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<polygon points = "20,10 300,20, 170,50" fill = "red" />
</svg>
</body>
</html>Ciò produrrebbe il seguente risultato nell'ultima versione di Firefox abilitata per HTML5.
HTML5 - SVG Polyline
Di seguito è riportata la versione HTML5 di un esempio SVG che disegnerebbe una polilinea utilizzando il tag <polyline> -
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Polyline</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<polyline points = "0,0 0,20 20,20 20,40 40,40 40,60" fill = "red" />
</svg>
</body>
</html>Ciò produrrebbe il seguente risultato nell'ultima versione di Firefox abilitata per HTML5.
HTML5 - Sfumature SVG
Segue la versione HTML5 di un esempio SVG che disegnerebbe un'ellisse usando il tag <ellipse> e userebbe il tag <radialGradient> per definire un gradiente radiale SVG.
Allo stesso modo, puoi usare il tag <linearGradient> per creare un gradiente lineare SVG.
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-40%);
-ms-transform: translateX(-40%);
transform: translateX(-40%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Gradient Ellipse</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradient" cx = "50%" cy = "50%" r = "50%" fx = "50%"
fy = "50%">
<stop offset = "0%" style = "stop-color:rgb(200,200,200); stop-opacity:0"/>
<stop offset = "100%" style = "stop-color:rgb(0,0,255); stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx = "100" cy = "50" rx = "100" ry = "50"
style = "fill:url(#gradient)" />
</svg>
</body>
</html>Ciò produrrebbe il seguente risultato nell'ultima versione di Firefox abilitata per HTML5.
HTML5 - SVG Star
Di seguito è riportata la versione HTML5 di un esempio SVG che disegnerebbe una stella usando il tag <polygon>.
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-40%);
-ms-transform: translateX(-40%);
transform: translateX(-40%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Star</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<polygon points = "100,10 40,180 190,60 10,60 160,180" fill = "red"/>
</svg>
</body>
</html>Ciò produrrebbe il seguente risultato nell'ultima versione di Firefox abilitata per HTML5.