Scalable Vector Graphics: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
Riga 115:
=== 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 (elemento HTML)|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.
Riga 121:
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 (elemento HTML)|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|Javascript]] e [[CSS|Css]], anche con eventi
=== Caratteri ===
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>.▼
Come con HTML e CSS, il testo in SVG può fare riferimento a file di caratteri esterni, come i caratteri di sistema. Se i file dei font richiesti non esistono sulla macchina in cui viene eseguito il rendering del file SVG, il testo potrebbe non apparire come previsto. Per superare questa limitazione, il testo può essere visualizzato in un ''font SVG'' , dove i glifi richiesti sono definiti in SVG come un font che viene quindi descritto dall'elemento<code><text></code><ref>{{Cita web|url=http://www.w3.org/TR/SVG11/fonts.html|titolo=Fonts – SVG 1.1 (Second Edition)|sito=www.w3.org|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>.
=== Collegamenti ===
Le immagini SVG possono contenere collegamenti ipertestuali ad altri documenti, utilizzando XLink. Attraverso l'uso dell'elemento<code><view></code>o di un identificatore di frammento, gli URL possono collegarsi a file SVG che modificano l'area visibile del documento. Ciò consente di creare stati di visualizzazione specifici che vengono utilizzati per ingrandire/ridurre un'area specifica o per limitare la visualizzazione a un elemento specifico. Questo è utile quando si creano ''sprite''. Il supporto XLink in combinazione con l'elemento <code><use></code> consente anche il collegamento e il riutilizzo di elementi interni ed esterni. Ciò consente ai programmatori di fare di più con meno markup e rende il codice più pulito<ref>{{Cita web|url=http://www.w3.org/TR/SVG11/linking.html|titolo=Linking – SVG 1.1 (Second Edition)|sito=www.w3.org|accesso=2021-01-19}}</ref>.
=== Scripting e animazione ===
I disegni SVG possono essere dinamici e interattivi. Le modifiche basate sull'animazione possono essere descritte in SMIL o possono essere programmate in un linguaggio di scripting (ad esempio ECMAScript o JavaScript ). Il W3C raccomanda esplicitamente SMIL come standard per l'animazione in SVG.
Un ricco set di gestori di eventi come " ''onmouseover"'' e " ''onclick"'' può essere assegnato a qualsiasi oggetto grafico SVG per applicare azioni ed eventi<ref>{{Cita web|url=https://www.cnet.com/news/w3c-releases-scripting-standard-caveat/|titolo=W3C releases scripting standard, caveat|autore=Paul Festa|sito=CNET|lingua=en|accesso=2021-01-19}}</ref>.
=== Dati Exif ===
| |||