Visualizzatore SVG gratuito

Informazioni sul SVG

Il SVG (Scalable Vector Graphics) è un formato XML per la grafica vettoriale. A differenza dei formati raster (PNG, JPG), le immagini SVG si adattano perfettamente a qualsiasi dimensione senza perdita di qualità. Sono leggere, accessibili e ampiamente supportate dai browser moderni.

Domande frequenti

Cos'è il SVG?

Il SVG (Scalable Vector Graphics) è un formato di grafica 2D che usa curve e tracciati matematici invece dei pixel. Questo rende i file SVG indipendenti dalla risoluzione, restano nitidi a qualsiasi dimensione, dalle piccole icone ai cartelloni pubblicitari.

Qual è la differenza tra SVG e PNG?

Il PNG è raster (basato su pixel) e ha una dimensione fissa, ingrandirlo provoca sfocatura. Il SVG è vettoriale (basato su matematica) e si ingrandisce all'infinito senza perdita. Il SVG è ideale per loghi, icone e illustrazioni. Il PNG si adatta meglio a foto e immagini complesse.

Posso modificare il codice SVG direttamente?

Sì, il SVG è testo XML, quindi puoi modificarlo in qualsiasi editor di testo. Puoi cambiare colori, dimensioni, posizioni e altro modificando gli attributi. Usa questo visualizzatore per incollare il tuo codice e vedere le modifiche all'istante.

SVG ha vinto la guerra dei formati, due volte

Prima che SVG esistesse, due formati vettoriali concorrenti furono presentati al W3C all'inizio del 1998. PGML (Precision Graphics Markup Language), presentato il 10 aprile 1998 da Adobe, IBM, Netscape e Sun, affondava le radici nel modello di imaging Adobe PostScript. VML (Vector Markup Language), presentato il 13 maggio 1998 da Microsoft, Macromedia, Hewlett-Packard, Autodesk e Visio, usava una sintassi vicina a ciò che Microsoft distribuiva già in Office 2000 e Internet Explorer 5. Il W3C non scelse un vincitore. Formò invece un gruppo di lavoro SVG presieduto da Chris Lilley per progettare un unico standard che li avrebbe soppiantati entrambi. La prima bozza di lavoro pubblica di SVG apparve l'11 febbraio 1999.

SVG 1.0 fu pubblicato come Raccomandazione del W3C il 4 settembre 2001, con il curatore Jon Ferraiolo (Adobe) e contributori di Adobe, IBM, Sun, Apple, Canon, Corel, Kodak, Macromedia, Microsoft, Netscape, Oracle, Sharp, Quark e Xerox, una delle più ampie coalizioni di fornitori di qualsiasi specifica del W3C. SVG 1.1 seguì il 14 gennaio 2003 e resta la base di fatto del web moderno; la sua seconda edizione (16 agosto 2011) ha incorporato le errata. SVG 1.1 ha suddiviso la specifica in moduli e ha definito tre profili (Full, Basic, Tiny). VML continuò a essere distribuito in IE da 5 a 9 e veniva usato internamente da Microsoft Office, ma fu deprecato in IE 9 (marzo 2011) a favore dell'SVG nativo ed era di fatto morto entro IE 11. SVG 2 è una bozza di lavoro del W3C dal 2016 senza una data di Raccomandazione in vista; i browser distribuiscono le funzionalità un pezzo alla volta man mano che emerge la domanda di interoperabilità.

Cosa rende SVG davvero diverso

• È semplicemente XML. Un'intera icona può stare in una riga: <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor"/></svg>. Poiché SVG è testo, può essere confrontato con diff e tenuto sotto controllo di versione (Git lo tratta come codice sorgente), generato lato server, indicizzato dai motori di ricerca (il testo dentro <text> è scansionabile), compresso in modo efficiente (gzip e brotli adorano i token XML ripetuti, riduzione tipica del 60-80%), e modificato in qualsiasi editor di testo senza software specializzato.
• Indipendenza dalla risoluzione. Poiché i tracciati SVG sono definiti come curve e coordinate matematiche, non come griglie di pixel, un SVG viene reso in modo identico a qualsiasi livello di zoom e a qualsiasi densità di pixel del dispositivo. Non c'è alcuna risorsa Retina «@2x» o «@3x» da gestire. Una singola icona da 2 KB si scala da favicon 16×16 a illustrazione di primo piano 400×400 senza alcuna perdita di qualità.
• Dimensioni minime per la grafica vettoriale. Una tipica icona 24×24 a colore singolo occupa ~200-500 byte come SVG contro 1-3 KB come PNG trasparente. Un logo aziendale piatto occupa 1-5 KB come SVG contro 15-50 KB come PNG. Un set di icone di 1.000 simboli occupa ~50 KB come singolo sprite SVG contro 2-5 MB di sprite PNG multi-DPI.
• Inline nell'HTML e stilizzabile con CSS. Una volta che l'SVG è inline, ogni elemento fa parte del DOM. Il CSS può indirizzarlo: .icon-stroke { stroke: currentColor; stroke-width: 2; }. La singola proprietà currentColor è ciò che fa funzionare i moderni sistemi di icone, un'icona eredita automaticamente il colore del testo circostante.
• Animabile in tre modi diversi. Animazione/transizione CSS (l'approccio moderno preferito), XML dichiarativo SMIL dentro l'SVG (<animate>, <animateTransform>, <animateMotion>), o JavaScript tramite il DOM dell'SVG. SMIL funziona ancora oggi in Chrome, Firefox e Safari dopo che Chrome ha annullato il suo piano di deprecazione del 2015.
• Manipolabile a livello di codice. document.querySelector('#chart-bar-3').setAttribute('height', newValue). Questo è il fondamento di D3.js, Vega, Plotly, Highcharts, ApexCharts e del resto dell'ecosistema di visualizzazione dei dati.
• Accessibile per impostazione predefinita. <title> compare come tooltip al passaggio del mouse. <desc> è esposto ai lettori di schermo. Gli attributi ARIA (role="img", aria-label, aria-labelledby, aria-describedby) funzionano normalmente. Rispetto a un elemento <canvas> (una scatola nera per le tecnologie assistive), SVG è pienamente accessibile.

Il supporto dei browser è universale dal 2011

L'SVG nativo arrivò in Firefox 1.5 (novembre 2005), Opera 9 (giugno 2006), Safari 3.0 (giugno 2007), Chrome 1.0 (settembre 2008), e infine in Internet Explorer 9 (marzo 2011): che fu il punto di svolta. Prima di IE 9, i siti dovevano distribuire shim di conversione VML o il plugin Adobe SVG Viewer per supportare IE 6-8. iOS Safari aveva un SVG parziale dal lancio e il supporto completo da iOS 5 (ottobre 2011); Android ci arrivò con Honeycomb 3.0 (febbraio 2011) e ChromeWebView sostituì il browser AOSP intorno ad Android 4.4 (2013). Il limite inferiore pratico per l'SVG-come-immagine (<img src="x.svg">) è all'incirca la fine del 2011. Entro il 2026, nessun progetto web realistico ha bisogno di supportare browser privi di SVG completo.

SVG non è solo un formato di immagine, è un tipo di documento eseguibile

Questa è la singola cosa più importante da capire sulla sicurezza dell'SVG. Un SVG malevolo può includere blocchi <script>, gestori di eventi (onload, onclick, onmouseover), o link <a xlink:href="javascript:...">. Quando un tale SVG viene caricato in un contesto attivo (tramite <object>, <iframe>, navigazione del browser verso un URL .svg, o tramite inserimento con innerHTML) il browser esegue lo script. I siti che consentono di incorporare in questo modo gli SVG caricati possono subire un attacco XSS da parte di chi li carica.

Il tag <img> è la via sicura. Quando l'SVG viene caricato tramite <img src="x.svg"> o come background-image CSS, i browser eseguono l'SVG in una modalità sandbox con gli script disabilitati e senza recupero di risorse esterne. Gli script all'interno non vengono eseguiti, i recuperi esterni sono bloccati, e l'SVG non può interagire con la pagina che lo contiene. Il CSS all'interno dell'SVG viene reso, ma tutto ciò che potrebbe avere effetti collaterali è disabilitato. Questo è il modo raccomandato di usare SVG oggi.

Per la difesa lato server, OWASP raccomanda di sanificare gli SVG caricati con DOMPurify (DOMPurify.sanitize(svg, {USE_PROFILES: {svg: true}})), svg-sanitizer (PHP), sanitize-svg (Node) o Bleach (Python), rimuovendo <script>, <foreignObject> e tutti i gestori on*, e respingendo i valori xlink:href che iniziano con javascript: o data:. Impostare una rigorosa Content-Security-Policy sulla pagina che mostra l'SVG dell'utente e servire gli SVG scaricati con Content-Disposition: attachment sono aggiunte di sicurezza ridondante. Questo visualizzatore è puramente lato client e l'SVG non lascia mai il tuo dispositivo, ma se stai incorporando SVG forniti dagli utenti su un sito pubblico, sanificalo.

SVG contro PNG contro JPG contro WebP contro AVIF, quando usare quale

• Logo, icona, illustrazione, diagramma, grafico, infografica con testo: SVG. Si scala a qualsiasi dimensione, file minuscolo, ricolorabile via CSS, il testo resta testo (selezionabile, traducibile, indicizzabile).
• Fotografia: JPG (o AVIF/WebP per gli stack moderni). La codifica vettoriale delle foto sarebbe enorme.
• Screenshot: PNG (o WebP). Il raster senza perdita preserva un'interfaccia perfetta al pixel.
• Adesivo animato per l'interfaccia: SVG (CSS o SMIL). Più piccolo e più nitido di un GIF, più fluido di un video per i cicli brevi.

WebP (Google, 2010) e AVIF (AOMedia, 2019) sono formati raster moderni che competono con PNG e JPG, non con SVG, non sono vettoriali. Il punto debole di SVG sono le fotografie e le immagini a tono continuo: rappresentare ogni pixel come una primitiva vettoriale gonfia il file ben oltre un JPEG. Per i casi delle icone e dei logo, SVG resta impareggiabile.

Ottimizzare il tuo SVG con SVGO

Un tipico SVG esportato da Adobe Illustrator, Sketch, Figma o Inkscape porta con sé un enorme sovraccarico, metadati specifici dell'editor (<sodipodi:namedview>, <inkscape:groupmode>), nomi di livello e gerarchie di gruppi predefiniti, precisione eccessiva nelle coordinate dei tracciati (d="M 12.000023 18.999991 ..."), attributi di stile inline che potrebbero essere classi CSS, blocchi di commento che identificano l'editor.

SVGO (SVG Optimizer), scritto originariamente da Kir Belevich nel 2012, è lo strumento del settore. È uno strumento da riga di comando Node.js con circa 50 plugin che gestiscono singole ottimizzazioni: removeComments, removeMetadata, removeEditorsNSData, convertColors (che trasforma rgb(255,0,0) in #f00), convertPathData (che comprime i comandi dei tracciati ed elimina la precisione ridondante), mergePaths, cleanupNumericValues (arrotondamento a una precisione configurabile, predefinita a 3 decimali). La compressione tipica è di file più piccoli del 30-70% per gli SVG creati a mano dagli strumenti di design, raggiungendo occasionalmente l'80% sulle esportazioni di Inkscape a causa dei pesanti metadati dell'editor. SVGOMG (svgomg.net) è il frontend web per SVGO di Jake Archibald (Google) e la versione GUI più usata.

Il panorama delle librerie di icone

Le librerie di icone SVG dominano lo stack web moderno. I grandi set in cui ti imbatterai sono Heroicons (Tailwind Labs, ~280 icone, MIT), Lucide (un fork di Feather, ~1.400 icone), Bootstrap Icons (~2.000), Material Symbols (Google, ~3.000 su più pesi), Font Awesome 6 (~30.000 gratuite + Pro), Phosphor Icons (~9.000 su sei pesi), e Tabler Icons (~5.200). L'aggregatore Iconify ospita oltre 200.000 icone open source da più di 150 set di icone dietro un'unica API; uno sviluppatore può scrivere <iconify-icon icon="mdi:home"></iconify-icon> e il framework recupera su richiesta solo l'SVG di quell'icona. Il passaggio dai font di icone (l'era di Font Awesome 4 / Glyphicons) alle icone SVG avvenne all'incirca nel 2017-2019, spinto dall'accessibilità, dalla ricolorabilità e dall'eliminazione del FOUT (flash di testo non stilizzato in cui il font delle icone non si era caricato).

Altre domande

Qual è la differenza tra viewBox e width/height?

viewBox="0 0 100 100" definisce il sistema di coordinate utente interno dell'SVG, la sua tela «naturale» è di 100×100 unità, indipendentemente dalla dimensione in pixel resa. width e height impostano la dimensione di visualizzazione resa. Con entrambi presenti, l'SVG scala il viewBox per adattarlo al riquadro reso. preserveAspectRatio (predefinito xMidYMid meet) controlla come lo scaling gestisce le discordanze di rapporto d'aspetto: meet preserva il rapporto e centra, none allunga, slice ritaglia per riempire. Impostare solo viewBox e lasciare che il CSS controlli width e height è la migliore pratica moderna per i sistemi di icone.

Perché le mie icone SVG appaiono sfocate sugli schermi?

Quasi sempre una di tre cause: (1) l'SVG viene reso in una dimensione fissa in pixel che non corrisponde al rapporto d'aspetto del viewBox, quindi il browser lo allunga; (2) l'SVG è stato esportato da uno strumento di design con coordinate sub-pixel («M 12.5 7.5 L ...»), e l'anti-aliasing del browser fa del suo meglio con i bordi non interi; o (3) era impostato preserveAspectRatio="none", che lascia allungare l'SVG arbitrariamente. Risolvi assicurandoti che il contenitore reso corrisponda al rapporto del viewBox, agganciando le coordinate a numeri interi nelle opzioni di esportazione del tuo strumento di design, ed evitando preserveAspectRatio="none" a meno che tu non voglia specificamente l'allungamento.

Posso usare SVG come favicon?

Sì. <link rel="icon" type="image/svg+xml" href="icon.svg"> è supportato in Chrome 80+, Firefox 41+ e Safari 14+. Uno schema comune è distribuire un favicon SVG per i browser moderni e un ripiego ICO (<link rel="icon" sizes="any" href="favicon.ico">) per i client più vecchi. I favicon SVG possono anche usare le media query prefers-color-scheme dentro l'SVG per passare automaticamente tra le varianti a tema chiaro e scuro.

L'attributo d dei tracciati è davvero un mini-linguaggio?

Sì, e imparare la dozzina abbondante di comandi è la cosa più vicina a imparare a leggere l'SVG a mano. I comandi sono: M/m (sposta a, assoluto/relativo), L/l (traccia linea), H/h (linea orizzontale), V/v (linea verticale), C/c (Bezier cubica con due punti di controllo), S/s (cubica liscia, riflette il punto di controllo precedente), Q/q (Bezier quadratica), T/t (quadratica liscia), A/a (arco ellittico, il più complesso), e Z/z (chiudi tracciato). Un tipico d di icona come M5 12h14M12 5l7 7-7 7 è «sposta a (5,12), linea orizzontale di 14 unità, sposta a (12,5), linea 7-a destra 7-in basso, linea 7-a sinistra 7-in basso», cioè una freccia che punta a destra.

Strumenti correlati