Scalable Vector Graphics: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
| (20 versioni intermedie di 14 utenti non mostrate) | |||
Riga 1:
{{Formato file
|
|logo = SVG Logo.svg
|icona = Inkscape SVG plain.svg
|
|
|
|magic_number =
|
| sviluppatore = [[World Wide Web Consortium|W3C]]▼
|uniform_type_identifier = public.svg-image
| proprietario = ▼
|
| ultima_versione = 1.1 (Second Edition)▼
|licenza =
| data_ultima_versione = 16 agosto 2011▼
|data_pubblicazione = {{Data|4|9|2001}}
| genere = [[Grafica vettoriale]]▼
| estensione_di = [[XML]]▼
| 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 = ▼
| aperto = Sì▼
|compressione = <!-- inserire "lossy" o "lossless" -->
| 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.]]▼
== 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
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=
== 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:
<syntaxhighlight lang="html"> <img
src="circle.svg"
Line 93 ⟶ 98:
height="200"
width="200" />
</syntaxhighlight>
;Codice SVG
<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=" 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"
|-
|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=
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
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="
<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}}
{{Interfacce web}}
{{Controllo di autorità}}
{{Portale|internet}}
| |||