Visualizzatore SVG

Input SVG
0 caratteri
Anteprima locale, non incollare contenuto script da fonti non attendibili

Visualizzatore SVG online. Incolla il codice SVG per visualizzare immediatamente grafica vettoriale renderizzata, con supporto per copia e download di file .svg. Elaborazione locale e sicura.

Raccomandazioni correlate

Converti Immagine

Comprimi immagini

Ridimensiona immagini

Ritaglia Immagine

Editor immagini

Generatore ICO

Cos'è SVG?

SVG (Scalable Vector Graphics, Grafica Vettoriale Scalabile) è un formato immagine basato su XML per descrivere forme geometriche. A differenza di JPG e PNG, che sono bitmap (matrici di pixel), SVG utilizza tag come <rect>, <circle> e <path> per descrivere percorsi matematici delle forme, mantenendosi nitido a qualsiasi dimensione senza pixelatura.

**Quando usare SVG?** Loghi, icone UI, diagrammi di flusso, marcatori di mappa, grafici, decorazioni animate e illustrazioni riutilizzabili: qualsiasi scenario che richieda nitidezza, personalizzazione del colore, scalabilità o controllo CSS è una scelta naturale per SVG.

**SVG vs Canvas:** Canvas è un'API di disegno imperativa dove l'output diventa pixel; SVG è costituito da nodi DOM dichiarativi dove puoi modificare attributi, stili CSS e allegare eventi in qualsiasi momento. Usa SVG per icone, elementi UI e grafica interattiva; usa Canvas per giochi, particelle e pixel art.

**Componenti comuni:** Elemento radice &lt;svg&gt;, gruppi &lt;g&gt;, percorsi &lt;path&gt; (il più usato con attributo d), gradienti (&lt;linearGradient&gt;/&lt;radialGradient&gt;), filtri (&lt;filter&gt;) e animazioni (SMIL/CSS/JS).

**Come visualizzarlo?** Incolla il codice sorgente SVG nell'editor di questa pagina e vedrai il rendering live a destra. Il layout a pannelli divisi regolabile ti aiuta a verificare in pochi secondi che il tuo codice SVG sia corretto.

Casi d'uso

  • Sviluppatori frontend che visualizzano rapidamente il rendering del codice delle icone SVG
  • Verificare la visualizzazione SVG dopo aver copiato da Figma, Sketch o altri strumenti di design
  • Visualizzare in tempo reale le modifiche durante il debug di percorsi, colori o attributi viewBox SVG
  • Esaminare e validare il codice SVG prima di integrarlo nel codice del progetto

Come utilizzare

  1. Incolla il codice sorgente SVG nell'editor a sinistra, o clicca su "Carica esempio" per vedere una demo
  2. Il pannello a destra renderizza immediatamente la grafica vettoriale: modifica il codice per vedere aggiornamenti live
  3. Quando soddisfatto, clicca copia per copiare il codice, o scarica come .svg con nome personalizzato

Funzionalità

  • Anteprima live: Incolla o modifica il codice SVG per renderizzare grafica vettoriale all'istante, quello che vedi è quello che ottieni
  • Layout diviso: Pannelli affiancati ridimensionabili trascinando su desktop, cambio a schede su mobile
  • Esportazione con un clic: Copia il codice SVG negli appunti o scarica con nome personalizzato come .svg standard
  • Elaborazione locale: Tutta l'analisi e il rendering avvengono nel browser, il tuo codice non lascia mai il tuo dispositivo
  • Sfondo trasparente: Lo sfondo a scacchiera mostra chiaramente le aree trasparenti e i dettagli dei bordi
  • Contatore caratteri: Contatore di caratteri in tempo reale con esempio integrato per iniziare rapidamente

Domande frequenti

Come posso visualizzare l'anteprima del codice SVG online?

Incolla il codice sorgente SVG nel pannello di modifica a sinistra e il pannello a destra renderizzerà immediatamente la grafica vettoriale. Puoi modificare il codice direttamente nell'editor con aggiornamenti in tempo reale, facilitando il debug delle icone frontend.

Come posso scaricare e salvare l'SVG visualizzato?

Clicca sul pulsante di download nell'angolo in alto a destra del pannello di anteprima. Puoi personalizzare il nome del file prima di salvarlo come file .svg standard. Puoi anche cliccare sul pulsante copia per copiare il codice SVG direttamente negli appunti.

Il mio codice SVG viene caricato su un server? È sicuro?

No. Tutta l'analisi e il rendering SVG avvengono localmente nel tuo browser. Il tuo codice SVG non viene mai caricato su alcun server: viene elaborato interamente sul tuo dispositivo e scartato quando esci.

Supporta il codice SVG copiato da software di design?

Sì. Il codice SVG copiato da Figma, Sketch, Adobe Illustrator o altri strumenti di design può essere incollato direttamente per l'anteprima. Consigliamo di verificare prima il risultato renderizzato prima di integrarlo nel progetto.

Perché il mio SVG non viene visualizzato? Cause comuni?

Problemi comuni: ① Dichiarazione dello spazio dei nomi xmlns="http://www.w3.org/2000/svg" mancante; ② Tag non chiusi nel codice; ③ Caratteri speciali non correttamente escapati; ④ Errori di sintassi nell'SVG stesso. Controlla questi punti.

Posso personalizzare il nome del file SVG scaricato?

Sì. Dopo aver cliccato sul pulsante di download, apparirà un campo di input per il nome del file. Puoi personalizzare il nome (predefinito image.svg), quindi premi Invio o clicca Conferma per scaricare. Lo strumento aggiunge automaticamente l'estensione .svg se mancante.

Glossario

viewBox
Il sistema di coordinate interno SVG nel formato "x y width height". Il comune "0 0 24 24" significa 24 unità di larghezza e altezza. La dimensione di visualizzazione effettiva di un SVG è controllata dagli attributi width/height o da CSS esterno.
Spazio dei nomi XML (namespace)
SVG deve dichiarare xmlns="http://www.w3.org/2000/svg" affinché i browser lo riconoscano correttamente come documento SVG. Lo spazio dei nomi mancante è il motivo più comune per cui SVG non viene visualizzato in HTML.MDN - Spazio dei nomi SVG
Attributo d di path
L'insieme dei comandi di percorso, composto da lettere come M/L/C/Q/H/V/Z più coordinate. M=Move to (Sposta a), L=Line to (Linea a), C=Bezier cubica, Q=Bezier quadratica, Z=Close path (Chiudi percorso). Le icone complesse sono spesso espresse con un solo elemento path e il suo attributo d.
currentColor
Una parola chiave CSS che si riferisce alla proprietà color dell'elemento corrente. Impostando fill o stroke su currentColor in SVG è possibile cambiare i colori delle icone tramite modifiche al colore CSS esterno, un pattern comune nei design system.

Riferimento rapido elementi SVG comuni

ElementoTipoScopo
<svg>RadiceContenitore per tutto il contenuto SVG, obbligatorio
<rect>Forma baseRettangoli, rettangoli arrotondati
<circle> / <ellipse>Forma baseCerchi / ellissi
<line> / <polyline>Forma baseLinee / polilinee
<polygon> / <path>PercorsoPoligoni / curve arbitrarie (attributo d)
<text> / <tspan>TestoTesto incorporato in SVG
<g>GruppoRaggruppa elementi per trasformazioni unificate
<defs> / <symbol>DefinizioneForme e gradienti riutilizzabili
<linearGradient> / <radialGradient>GradienteRiempimenti a gradiente lineare / radiale
<use>RiferimentoRiferisce elementi da defs
<filter>FiltroEffetti avanzati come sfocatura, ombra

Confronto SVG vs formati bitmap

DimensioneSVG (Vettoriale)PNG (Bitmap)JPG (Bitmap)
ComposizioneXML descrive percorsi geometriciMatrice di pixelMatrice di pixel (compressione DCT)
RidimensionamentoResta nitido a qualsiasi dimensioneSi pixella ingrandendoSi pixella con artefatti visibili
Dimensione fileVaria per complessità, loghi solitamente < 10KBMedio (senza perdita)Più piccolo (con perdita)
Trasparenza✅✅❌
Animazione✅ SMIL / CSS / JS❌ (richiede APNG)❌
Controllo colore CSS✅ currentColor / variabili fill❌❌
Ideale perIcone, loghi, vettori UIAsset trasparenti, screenshotFoto, gradienti ampi

Authoritative References