HTML5 linea SVG
HTML5 supporta SVG in linea.
Che cosa è SVG?
- SVG Scalable Vector Graphics mezzi (Scalable Vector Graphics)
- SVG per la grafica utilizzata per definire la rete basati su vettori
- SVG utilizza grafica in formato XML di definizione
- un'immagine SVG per ingrandire o cambiamento nella dimensione della sua qualità dell'immagine non sarà persa
- SVG è uno standard World Wide Web Consortium
vantaggio SVG
Rispetto ad altri formati di immagine (come JPEG e GIF), utilizzando i vantaggi SVG:
- Le immagini SVG possono essere creati e modificati utilizzando un editor di testo
- Le immagini SVG possono essere ricercati, indicizzati, script o compressi
- SVG è scalabile
- Le immagini SVG possono essere stampati in qualsiasi risoluzione di alta qualità
- SVG può essere esagerato nella qualità immagine non declinare
Supporto per il browser
Internet Explorer 9+, Firefox, Opera, Chrome, Safari e il supporto in linea SVG.
Il SVG incorporato direttamente nella pagina HTML
In HTML5, si sarà in grado di SVG gli elementi direttamente nella pagina HTML:
Esempi
<html>
<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>
Prova »
risultati:
Siamo spiacenti, il tuo browser non supporta SVG inline.Ulteriori informazioni su SVG tutorial, si prega di visitare SVG esercitazione .
SVG e Canvas differenza tra i due
SVG è una grafica 2D utilizzando descrizione linguaggio XML.
Lavoro per disegnare la grafica 2D utilizzando JavaScript.
SVG basato su XML, il che significa che ciascun elemento nel SVG DOM è disponibile. È possibile allegare gestori di eventi JavaScript per un elemento.
In SVG, ogni considerano disegnato oggetti grafici. Se le modifiche oggetto di proprietà SVG, il browser in grado di riprodurre automaticamente la grafica.
Canvas è reso pixel per pixel. Nella tela, una volta che il grafico è tratto è completa, non sarà continuerà ad essere l'attenzione del browser. Se la posizione è cambiata, quindi tutta la scena ha anche bisogno di essere ridisegnata, compresi eventuali oggetti che potrebbero essere stati coperti con la grafica.
Confronto di SVG e Canvas
La seguente tabella elenca alcune delle differenze tra la tela e SVG.
| Canvas | SVG |
|---|---|
|
|