Scalable Vector Graphics: differenze tra le versioni

Versione delle 04:29, 21 dic 2022

Versione attuale delle 19:10, 14 gen 2025

(18 versioni intermedie di 12 utenti non mostrate)

Riga 1:

{{Formato file

| nome = Scalable Vector Graphics

|logo = SVG Logo.svg

| icona =

| logoicona = Inkscape SVG Logoplain.svg

| immagine = Example of SVG code and SVG rendering.svg

| didascalia = Esempio di codice SVG e rispettivo rendering

| estensione = .svg, .svgz

|magic_number =

| mime = image/svg+xml

| sviluppatore = [[World Wide Web Consortium|W3C]]

|uniform_type_identifier = public.svg-image

| proprietario =

| licenzatypecode =

| sviluppatore = [[World Wide Web Consortium|W3C]]

| data_rilascio = 4 settembre 2001

| proprietario =

| ultima_versione = 1.1 (Second Edition)

|licenza =

| data_ultima_versione = 16 agosto 2011

|data_pubblicazione = {{Data|4|9|2001}}

| genere = [[Grafica vettoriale]]

| ultima_versione = 1.1 (Second Edition)

| estensione_di = [[XML]]

| data_ultima_versione = {{Data|16 agosto |8|2011}}

| esteso_a =

|nota_ultima_versione = <ref>{{cita web|lingua=en|url=https://www.w3.org/TR/2011/REC-SVG11-20110816/|titolo=Scalable Vector Graphics (SVG) 1.1 (Second Edition)|data=16 agosto 2011}}</ref>

| standard =

| genere = [[Grafica vettoriale]]

| aperto = Sì

|compressione = <!-- inserire "lossy" o "lossless" -->

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

| estensione_di = [[XML]]

| esteso_a =

| standard =

| aperto = Sìsì

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

[[File:Svg.svg|thumb|Un esempio d'uso del formato SVG.]]

'''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 ==

[[File:Svg.svg|thumb|Un esempio d'uso del formato SVG.]]

SVG è diventato una [[Standard (informatica)|raccomandazione (standard)]] del [[World Wide Web Consortium]] nel settembre [[2001]] dopo un iter piuttosto contrastato. Al W3C [[Macromedia]] e [[Microsoft]] avevano introdotto il linguaggio [[Vector Markup Language|VML]] (Vector Markup Language), mentre [[Adobe (azienda)|Adobe]] e [[Sun Microsystems]] proponevano un formato concorrente chiamato [[PGML]]: per arrivare alla raccomandazione è stato necessario un certo lavoro di compromesso. SVG è supportato nativamente dal [[web browser]]/[[web editor]] [[Amaya (browser)|Amaya]], da [[Opera (browser)|Opera]] e da [[Mozilla Firefox]] dalla versione 1.5. Altri browser per visualizzare immagini SVG richiedono l'aggiunta di un [[plugin (informatica)|plugin]], come [https://www.adobe.com/svg/viewer/install/main.html Adobe SVG Viewer] o [http://www.corel.com/servlet/Satellite?pagename=Corel/Downloads/Details&id=1047022177437 Corel SVG Viewer].

Line 44 ⟶ 47:

* testi esplicativi, eventualmente cliccabili.

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 [[trasformazione|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]].

== Utilizzo ==

[[File:Disegno di Modiglione (mensola, chiave di volta) a doppia voluta, dal campanile di Monteforte d'Alpone (Verona ITALY), Neoclassicismo, by Paolo Villa for ctg Lessinia.svg|thumb|Disegno svg ottenuto con Draw e InkScape]]

La maggior parte dei prodotti software per disegnare come [[Adobe Illustrator]] e [[Corel Draw]] nelle versioni più recenti sono in grado di esportare immagini descritte in SVG. Anche il pacchetto ''Draw'' della [[OpenOffice.org]] dalla versione 1.1 può esportare file SVG.

Line 60 ⟶ 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 66 ⟶ 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 73 ⟶ 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 85 ⟶ 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'''
<syntaxhighlight lang="html">

<img

src="circle.svg"

Line 93 ⟶ 98:

height="200"

width="200" />

</syntaxhighlight>

;Codice SVG

</syntaxhighlight>'''Codice SVG'''<syntaxhighlight lang="html">

<syntaxhighlight lang="xml">

<svg width="100" height="100">

<circle cx="200" cy="200" r="93"

Line 100 ⟶ 107:

Sorry, your browser does not support inline SVG.

</svg>

</syntaxhighlight>'''

; Codice Canvas'''
<syntaxhighlight lang="htmljavascript">

function draw() {

// draw the colored region

Line 127 ⟶ 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 187 ⟶ 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 223 ⟶ 233:

==== Animazione SVG usando ECMAScript ====

<syntaxhighlight lang="ecmascripthtml">

<script type="text/ecmascript">

function rotate(evt) {

Line 271 ⟶ 281:

== Browser che supportano il formato svg e svgz ==

Ecco una lista di browser che almeno dall'ultima versione disponibile supportano, almeno in parte, il formato svg e svgz (svg compresso);{{senza fonte}}

* [[Amaya (browser)|Amaya]]

Line 290 ⟶ 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 299 ⟶ 312:

== Altri progetti ==

{{interprogetto|preposizione=sullo}}

== Collegamenti esterni ==

* {{Collegamenti esterni}}

* {{FOLDOC|SVG}}

* {{cita web|https://www.w3.org/Graphics/SVG/|Pagina ufficiale su SVG del W3C}}

* {{cita web|http://alt-soft.com/tutorial/svg_tutorial/introduction.html|SVG Tutorial by Altsoft}}

* [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}}