Scalable Vector Graphics: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
m Correggo wikilink secondo Aiuto:Wikilink#Specificità dei collegamenti, replaced: lato client → lato client using AWB |
aggiornamento della voce |
||
Riga 49:
Le figure espresse mediante SVG possono essere dinamiche e interattive. Il [[Document Object Model]] (DOM) per SVG, che include il completo XML DOM, consente una animazione in grafica vettoriale diretta ed efficiente attraverso i linguaggi [[ECMAScript]] e [[SMIL]]. Agli oggetti grafici SVG si possono assegnare [[event handler]]s tratti da un ampio repertorio: due esempi dal ruolo facilmente intuibile sono ''onmouseover'' e ''onclick''. Grazie alla compatibilità di SVG con gli altri standard per il web e grazie al mutuo supporto di questi meccanismi, si possono dotare gli elementi SVG e gli altri elementi XML di una pagina web di prestazioni come lo [[scripting]] ricavate contemporaneamente da diversi [[namespace|spazi di nomi]].
Il sistema SVG
== Utilizzo ==
Riga 82:
* [[iDraw]]
* [[Janvas]] Editor online
== HTML5 ==
Con lo standard HTML5 il formato SVG è diventato parte del linguaggio HTML. Un svg si può inserire come immagine (formato ".svg") oppure tramite codice. Dal punto di vista dell'utente, a livello estetico è la stessa cosa. Le seguenti tre righe di codice danno come output lo stesso risultato a livello estetico (un cerchio bianco con bordo verde), ma con tre tecniche diverse:
Immagine SVG<syntaxhighlight lang="html">
<img
src="circle.svg"
alt="circle"
height="200"
width="200" />
</syntaxhighlight>Codice SVG<syntaxhighlight lang="html">
<svg width="100" height="100">
<circle cx="200" cy="200" r="93"
stroke="#66CC01" stroke-width="4" fill="E2FFC6" />
Sorry, your browser does not support inline SVG.
</svg>
</syntaxhighlight>Canvas<syntaxhighlight lang="html">
function draw() {
// draw the colored region
mainContext.beginPath();
mainContext.arc(200, 200, 93, 0, 2 * Math.PI, true);
mainContext.fillStyle = "#E2FFC6";
mainContext.fill();
// draw the stroke
mainContext.lineWidth = 20;
mainContext.strokeStyle = "#66CC01";
mainContext.stroke();
}
</syntaxhighlight>
=== Differenze tra SVG e Canvas ===
SVG è un linguaggio per descrivere la grafica 2D in XML<ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg|titolo=- SVG: Scalable Vector Graphics {{!}} MDN|sito=developer.mozilla.org|accesso=2021-01-19}}</ref>. Canvas disegna grafica 2D, al volo (con JavaScript)<ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web|titolo=Adding vector graphics to the Web - Learn web development {{!}} MDN|sito=developer.mozilla.org|accesso=2021-01-19}}</ref>.
SVG è basato su XML, il che significa che ogni elemento è disponibile all'interno di SVG DOM. Si possono 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ò automaticamente rieseguire il rendering della forma.
Il Canvas (anch'esso un elemento HTML5) viene renderizzato pixel per pixel. Il Canvas, una volta disegnata la grafica, viene "dimenticato" dal browser. Se la sua posizione deve essere cambiata, l'intera scena deve essere ridisegnata, inclusi gli oggetti che potrebbero essere stati coperti dalla grafica<ref>{{Cita web|url=https://www.w3schools.com/html/html5_svg.asp|titolo=HTML SVG|sito=www.w3schools.com|accesso=2021-01-19}}</ref>.
Il Canvas è adatto per applicazioni dinamiche come giochi e animazioni, per via del suo caricamento più veloce e indipendente dal DOM.
Le immagini create in SVG sono aggiunte al DOM e modificabili tramite Javascript e Css, anche con eventi che si hanno sugli altri elementi del documento<ref>{{Cita web|url=https://www.wellnet.it/blog/recensioni/svg-o-canvas-il-tuo-html5|titolo=SVG o Canvas per il tuo HTML5?|sito=Wellnet|data=2014-05-09|lingua=it-IT|accesso=2021-01-19}}</ref>.
Su lato SEO gli SVG sono più accessibili perché supportano il testo<ref>{{Cita web|url=https://css-tricks.com/when-to-use-svg-vs-when-to-use-canvas/|titolo=When to Use SVG vs. When to Use Canvas|sito=CSS-Tricks|data=2019-11-12|lingua=en|accesso=2021-01-19}}</ref> che, a meno che non venga convertito in tracciati, è selezionabile dall'utente in una pagina HTML e leggibile dai motori di ricerca<ref>{{Cita web|url=https://webmasters.stackexchange.com/questions/13848/do-search-engines-index-text-contained-in-svg-elements|titolo=seo - Do search engines index text contained in SVG elements?|sito=Webmasters Stack Exchange|accesso=2021-01-19}}</ref>.
== Browser che supportano il formato svg e svgz ==
Line 92 ⟶ 138:
* [[Google Chrome]]
* [[Flock]]
* [[Microsoft Internet Explorer|Internet Explorer]] (dalla versione 9 in poi)
* [[Microsoft Edge|Edge]]
* [[Konqueror]] (fu il primo browser a dare supporto al formato svg)
| |||