Scalable Vector Graphics: differenze tra le versioni

Versione delle 02:37, 13 set 2023

Versione attuale delle 19:10, 14 gen 2025

(9 versioni intermedie di 8 utenti non mostrate)

Riga 25:

|sito = www.w3.org/Graphics/SVG

}}

'''Scalable Vector Graphics''' ('''SVG''') è un [[formato di file]] di [[grafica vettoriale]] [[bidimensionalità|bidimensionale]] basato sull'[[XML]] sviluppato da [[World Wide Web Consortium]].<ref name="Eisenberg">{{Cita|Eisenberg}}.</ref> Le immagini SVG possono essere incluse all'interno di una pagina [[HTML]]<ref name="Eisenberg" />. Possono essere inoltre distribuite in versione [[compressione dei dati|compressa]] utilizzando l'algoritmo [[gzip]] (con estensione svgz)<ref>{{cita web|lingua=en|url=https://www.adobe.com/svg/illustrator/compressedsvg.html|titolo=Saving compressed SVG (SVGZ)|urlarchivio=https://web.archive.org/web/20100601125817/https://www.adobe.com/svg/illustrator/compressedsvg.html}}</ref>.

'''Scalable Vector Graphics''' (formato in '''.svg'''), indica un particolare [[formato di file|formato]] che è in grado di visualizzare oggetti di [[grafica vettoriale]] e quindi di salvare immagini in modo che siano ingrandibili e rimpicciolibili a piacere senza perdere in [[risoluzione grafica]].

In particolare, il formato svg lavora in [[XML]], cioè di un'applicazione del [[metalinguaggio]] posto a base degli sviluppi del Web da parte del consorzio [[W3C]], che si pone l'obiettivo di descrivere figure [[Bidimensionalità|bidimensionali]] statiche e animate.

== Situazione ==

Line 51 ⟶ 49:

Gli oggetti grafici possono essere raggruppati in oggetti più comprensivi, muniti di attributi di stile e aggiunti ad oggetti grafici precedentemente costruiti e visualizzati. Un testo può far parte di un qualsiasi [[namespace]] XML sottoponibile ad una applicazione; questa possibilità consente di aumentare la ricercabilità e l'[[accessibilità (design)|accessibilità]] delle immagini SVG. Il repertorio delle operazioni attuabili include trasformazioni annidate, percorsi di [[clipping]], [[Canale alpha|maschere alpha]], effetti di [[Filtro (ottica)|filtro]], [[oggetto template|oggetti template]] ed [[estensibilità]].

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 rivaleggiava con [[Adobe Flash]] (dichiarato obsoleto dal 31 dicembre 2020<ref>{{Cita web|url=https://theblog.adobe.com/adobe-flash-update/|titolo=Flash & The Future of Interactive Content {{!}} Adobe Blog|sito=web.archive.org|data=2017-12-02|accesso=2021-01-19|dataarchivio=2 dicembre 2017|urlarchivio=https://web.archive.org/web/20171202123704/https://theblog.adobe.com/adobe-flash-update/|urlmorto=sì}}</ref>) in termini di potenziale e di efficienza. Per un primo confronto si fa presente che, contrariamente a Flash, SVG è uno [[standard aperto]].

Line 66 ⟶ 64:

* è possibile ridimensionare a piacere qualsiasi elemento grafico, mantenendone la qualità. Più in particolare, nel visualizzare un dato oggetto grafico su supporti di differente natura ([[stampante|stampa]], [[video]], [[plotter]], schermo di [[Telefono cellulare|cellulare]] ecc.), si è certi di ottenere sempre la massima qualità che quei supporti possono fornire.

Tali potenzialità interessano praticamente tutte le applicazioni grafiche che non siano puramente ''[[Grafica raster|raster]]'', cioè basate su mappe di pixel (nella pratica immagini provenienti da fotocamere o da [[Scansionatore d'immagine|scansioni]]).

Di contro il "peso" computazionale di una immagine vettoriale è in genere superiore a quello della grafica raster, in quanto il processore del computer deve sostanzialmente rigenerare l'immagine ex novo ogni qual volta che si ridimensiona la visualizzazione.

Line 72 ⟶ 70:

Il vantaggio dell'SVG rispetto ad altri formati di grafica vettoriale consiste nella sua natura di standard aperto: in questo modo in linea di principio chiunque lo conosca è in grado di realizzare pagine SVG senza avere la necessità di un ambiente di sviluppo commerciale dedicato.

Trattandosi di un formato derivato dall'[[XML]], eredita da esso la facilità di generazione con mezzi automatici e tramite [[Linguaggio di programmazione|linguaggi di programmazione]].

Dal [[lato client]] è infine possibile operare sul modello ad oggetti del documento (il [[Document Object Model|DOM]]) utilizzando codice ECMAScript (la standardizzazione di [[JavaScript]] definita da [[ECMA]]).

Line 79 ⟶ 77:

Ecco una lista parziale di programmi per la generazione di file svg:

* [[Adobe Illustrator]]

* [[Affinity Designer]] (vedere [[Serif Europe|Serif Europe Ltd.]])

* [[Gravit Designer]]

* [[Macromedia FreeHand]]

Line 91 ⟶ 89:

{{vedi anche|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

Line 139 ⟶ 137:

Le immagini create in SVG sono aggiunte al [[Document Object Model|DOM]] e modificabili tramite [[JavaScript]] e [[CSS|Css]], anche con eventi presenti 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>.

{| class="wikitable sortable"

|'''!Funzioni'''<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-29}}</ref>

|'''!SVG'''

|'''!Canvas'''

|-

|Vettori

Line 199 ⟶ 197:

=== 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)|accesso=2021-01-19}}</ref>.

=== Scripting e animazione ===

Prima dell'arrivo di HTML5, l'uso di [[Adobe Flash]] (obsoleto dal 31 dicembre 2020) era l'unico modo per creare animazioni vettoriali e, in generale, immagini vettoriali per il web<ref>{{Cita web|url=https://theblog.adobe.com/adobe-flash-update/|titolo=Flash & The Future of Interactive Content {{!}} Adobe Blog|sito=web.archive.org|data=2017-12-02|accesso=2021-01-28|dataarchivio=2 dicembre 2017|urlarchivio=https://web.archive.org/web/20171202123704/https://theblog.adobe.com/adobe-flash-update/|urlmorto=sì}}</ref>.

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.

SVG può essere animato anche con i CSS3<ref>{{Cita web|url=https://css-tricks.com/animating-svg-css/|titolo=Animating SVG with CSS|sito=CSS-Tricks|data=2014-04-17|lingua=en|accesso=2021-01-28}}</ref> ed [[ECMAScript]].

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>.

Line 302 ⟶ 300:

== Note ==

<references />

== Bibliografia ==

* {{cita libro|autore=J. David Eisenberg|autore2=Amelia Bellamy-Royds|titolo=SVG Essentials|edizione=2|anno=2014|editore=O'Reilly Media|lingua=inglese|ISBN=9781449374358|cid=Eisenberg}}

== Voci correlate ==

Line 311 ⟶ 312:

== Altri progetti ==

{{interprogetto|preposizione=sullo}}

== Collegamenti esterni ==

Line 320 ⟶ 321:

* [http://www.html.it/guide/guida-svg/ Guida SVG - HTML.it] Imparare ad utilizzare lo standard SVG. costruire di immagini, barre di navigazione e gli elementi grafici tipici di una pagina Web

* {{cita web|http://www.sharecad.org/|Visualizzatore gratis on-line}}

{{Estensioni}}

{{Interfacce web}}

{{Controllo di autorità}}

{{Portale|internet}}