Scalable Vector Graphics: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
m Annullate le modifiche di 82.115.176.125 (discussione), riportata alla versione precedente di Phantomas Etichetta: Rollback |
|||
| (46 versioni intermedie di 26 utenti non mostrate) | |||
Riga 1:
{{Formato file
|
|logo = SVG Logo.svg
|icona = Inkscape SVG plain.svg
|
|
|
|magic_number =
|mime = image/svg+xml
|uniform_type_identifier = public.svg-image
|
|sviluppatore = [[World Wide Web Consortium|W3C]]
|proprietario =
|licenza =
|data_pubblicazione = {{Data|4|9|2001}}
|ultima_versione = 1.1 (Second Edition)
|data_ultima_versione = {{Data|16|8|2011}}
|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>
|genere = [[Grafica vettoriale]]
|compressione = <!-- inserire "lossy" o "lossless" -->
|estensione_di = [[XML]]
|esteso_a =
|standard =
|aperto = 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>.
== 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].
Le immagini SVG possono essere visualizzate anche da editor e viewer autonomi. Una particolare versione di [[Mozilla]], chiamata "Croczilla", ora supporta alcune parti dello standard SVG, ma gran parte delle prestazioni non sono ancora ottenibili: in prospettiva comunque le immagini SVG dovrebbero essere visualizzabili senza l'aggiunta di alcun plug-in. Anche il web browser [[Konqueror]] del progetto [[KDE]] attualmente possiede una implementazione di SVG abbastanza completa chiamata ksvg e c'è da aspettarsi
Line 45 ⟶ 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
== 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 61 ⟶ 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 67 ⟶ 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
== Programmi per la creazione di svg ==
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]]
* [[Corel Draw]]
Line 80 ⟶ 85:
* [[iDraw]]
* [[Janvas]] Editor online
== HTML5 ==
{{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"
alt="circle"
height="200"
width="200" />
</syntaxhighlight>
;Codice SVG
<syntaxhighlight lang="xml">
<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>
; Codice Canvas
<syntaxhighlight lang="javascript">
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 (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>.
[[File:Css-drawing.png|alt=Confronto tra il logo CSS3 creato con i CSS, con SVG e con HTML5 Canvas. A volte è possibile ottenere lo stesso risultato con tecniche diverse.|miniatura|Confronto tra il logo CSS3 creato con i CSS, con SVG e con HTML5 Canvas. A volte è possibile ottenere lo stesso risultato con tecniche diverse.]]
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 (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|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 [[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
|SI
|NO
|-
|Rasterizzazione
|NO
|SI
|-
|Accesso DOM
|SI
|NO
|-
|Accessibilità
|SI
|Parziale
|-
|Testo
|SI
|SI
|-
|Gradienti e Patterns
|SI
|SI
|-
|CSS Animations
|SI
|NO
|-
|CSS Filters
|SI
|SI
|-
|SVG Filters
|SI
|SI
|-
|Inclusione video
|NO
|SI
|-
|Manipolazione Pixel
|NO
|SI
|-
|Accesso API in JS
|NO
|SI
|}
=== Caratteri ===
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)|accesso=2021-01-19}}</ref>.
Su lato [[Ottimizzazione per i motori di ricerca|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)|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>.
==== Animazione SVG utilizzando SMIL ====
<syntaxhighlight lang="html">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0"
to="360"
begin="0s"
dur="1s"
repeatCount="indefinite"/>
</syntaxhighlight>
==== Animazione SVG usando CSS3 ====
<syntaxhighlight lang="html">
<style type="text/css">
@keyframes rot_kf {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.rot { animation: rot_kf 1s linear infinite; }
</style>
</syntaxhighlight>
==== Animazione SVG usando ECMAScript ====
<syntaxhighlight lang="html">
<script type="text/ecmascript">
function rotate(evt) {
var object = evt.target.ownerDocument.getElementById('rot');
setInterval(function () {
var now = new Date();
var milliseconds = now.getTime() % 1000;
var degrees = milliseconds * 0.36;
object.setAttribute('transform', 'rotate(' + degrees + ')');
}, 20);
}
</script>
</syntaxhighlight>
=== Dati Exif ===
In SVG è possibile inserire metadati [[Exchangeable image file format|Exif]]<ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/SVG/Element/metadata|titolo=- SVG: Scalable Vector Graphics {{!}} MDN|sito=developer.mozilla.org|accesso=2021-01-19}}</ref>.<syntaxhighlight lang="html+cheetah">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:sol="https://inkscape.org/it/">
<circle cx="10" cy="40" sol:country="Italy" r="10"/>
</svg>
</syntaxhighlight>
=== Immagini raster in SVG ===
Nel codice svg si possono incorporare o collegare immagini raster (o bitmap) come jpg, png o gif.
Immagine collegata:<syntaxhighlight lang="html">
<svg ... >
<image xlink:href="/path/to/image.jpg" width="100%" height="100%" x="0" y="0" />
</svg>
</syntaxhighlight>Immagine incorporata:<syntaxhighlight lang="html">
<svg>
<image
y="130.35181"
x="47.050488"
id="image6820"
xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAlgCWAAD/2../>
</svg>
</syntaxhighlight>
=== Uso dei CSS ===
È possibile utilizzare i CSS per modificare gli stili di SVG. Esempio:<syntaxhighlight lang="css">
svg {
background-color: beige;
}
</syntaxhighlight>
== 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 90 ⟶ 289:
* [[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)
Line 99 ⟶ 298:
Il supporto per tale formato è in continua evoluzione e con il susseguirsi di nuove versioni dei nuovi browser la compatibilità si amplia continuamente.
== 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 107 ⟶ 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}}
| |||