Scalable Vector Graphics: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
aggiornamento della voce |
|||
Riga 86:
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"
Riga 93:
width="200" />
</syntaxhighlight>'''Codice SVG'''<syntaxhighlight lang="html">
<svg width="100" height="100">
<circle cx="200" cy="200" r="93"
Riga 99:
Sorry, your browser does not support inline SVG.
</svg>
</syntaxhighlight>'''Codice Canvas'''<syntaxhighlight lang="html">
function draw() {
// draw the colored region
Riga 128:
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>.
=== 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 immagini raster (o bitmap) come jpg, png o gif.<syntaxhighlight lang="html">
<svg ... >
<image xlink:href="/path/to/image.jpg" width="100%" height="100%" x="0" y="0" />
</svg>
</syntaxhighlight>
== Browser che supportano il formato svg e svgz ==
| |||