Che cosa è SVG?
- SVG acronimo di Scalable Vector Graphics
- SVG è utilizzato per definire la grafica per il Web
- SVG è una raccomandazione W3C
Scalable Vector Graphics (SVG) è un formato grafico vettoriale basato su XML per la grafica bidimensionale con supporto per l'interattività e l'animazione. La specifica SVG è uno standard aperto sviluppato dal World Wide Web Consortium (W3C) dal 1999.
immagini SVG ei loro comportamenti sono definiti in file di testo XML. Ciò significa che possono essere ricercati, indicizzati, script e compressi. Come file XML, immagini SVG possono essere creati e modificati con qualsiasi editor di testo, così come con il software di disegno.
Tutti i principali moderno web browser, tra cui Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari, e Microsoft hanno Edge-SVG di rendering supporto.
Il codice HTML <svg> Element
Il codice HTML <svg> elemento (introduced in HTML5) è un contenitore per la grafica SVG.
SVG ha diversi metodi per percorsi disegno, scatole, cerchi, testo e immagini grafiche.
Supporto browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente il <svg> elemento.
| Elemento | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
SVG Circle
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> Prova tu stesso " SVG Rettangolo
rgb (0,0,0) ">
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>
SVG Rettangolo arrotondato
Siamo spiacenti, il tuo browser non supporta SVG inline.
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>
SVG stella
Siamo spiacenti, il tuo browser non supporta SVG inline.
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>
SVG Logo
SVG Siamo spiacenti, il tuo browser non supporta SVG inline.
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 (with a JavaScript) .
SVG è basato su XML, il che significa che ogni elemento è disponibile all'interno del SVG DOM. È possibile allegare gestori di eventi JavaScript per un elemento.
In SVG, ciascuna forma disegnata è ricordato come un oggetto. Se gli attributi di un oggetto SVG vengono modificate, il browser può automaticamente ri-rendere la forma.
Tela viene reso pixel per pixel. In tela, una volta che l'immagine è disegnata, si è dimenticato dal browser. Se la sua posizione dovrebbe essere cambiata, l'intera scena deve essere ridisegnato, comprese eventuali oggetti che possono essere state coperte dal grafico.
Confronto di Canvas e SVG
La tabella seguente mostra alcune importanti differenze tra tela e SVG:
| Canvas | SVG |
|---|---|
|
|
Per ulteriori informazioni su SVG, si prega di leggere la nostra SVG Tutorial .