Back

Anteprima e ispettore SVG

Incolla o trascina un SVG e lo vedi renderizzato immediatamente, con un pannello di statistiche che copre dimensioni, viewBox, suddivisione degli elementi, colori unici e indicatori di sicurezza. L'anteprima gira in un iframe sandbox con script e accesso same-origin disabilitati, quindi gli SVG ostili non possono eseguire codice. Esporta l'immagine come SVG o PNG, alterna tra sfondo bianco, nero o scacchiera trasparente, oppure passa alla vista sorgente per ispezionare il markup.

Specifiche

Casi d'uso comuni

  • Anteprima rapida di un'icona o illustrazione SVG prima di incorporarla
  • Verifica se un SVG non attendibile contiene script o gestori di eventi
  • Verifica il viewBox e le dimensioni intrinseche di un SVG
  • Conta i colori unici in un SVG (utile per estrarre palette o ottimizzare)
  • Converte un SVG in PNG su sfondo colorato o trasparente
  • Ispeziona la suddivisione degli elementi per individuare un uso inatteso di <script> o <foreignObject>

Funzionalità

  • Anteprima in sandbox — l'SVG viene renderizzato in un iframe con sandbox="" in modo che script e gestori di eventi non possano essere eseguiti
  • Selettore sfondo: bianco, nero o pattern a scacchiera trasparente
  • Pannello statistiche: dimensioni, viewBox, rapporto d'aspetto, dimensione in byte, numero di elementi, elementi principali, colori unici
  • Gli indicatori di sicurezza evidenziano SVG che contengono <script>, gestori di eventi, riferimenti esterni o animazioni
  • Esporta come SVG o PNG ad alta risoluzione (2×) — lo sfondo selezionato viene fissato nell'export PNG
  • Anteprima a schermo intero per esaminare i dettagli
  • Vista sorgente con evidenziazione della sintassi
  • Copia l'SVG normalizzato negli appunti

Esempi

Icona semplice

Provalo →

Un'icona a spunta in un cerchio realizzata con tratto

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

Riempimento a gradiente

Provalo →

Rettangolo riempito con un gradiente lineare

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#0ea5e9"/></linearGradient></defs><rect width="100" height="100" fill="url(#g)"/></svg>

SVG con animazione

Provalo →

Un cerchio pulsante con animazione SMIL — si accende il flag Animazioni

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><circle cx="50" cy="50" r="20" fill="#ef4444"><animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/></circle></svg>

Suggerimenti

  • Preferisci viewBox a valori fissi di width/height così l'immagine si ridimensiona correttamente
  • Se si accendono i badge Script o Gestori di eventi, l'SVG eseguirebbe codice una volta incorporato — rimuovili prima di fidarti
  • Lo sfondo a scacchiera aiuta a notare trasparenze indesiderate; passa a bianco o nero per vedere l'aspetto su pagine diverse
  • L'export PNG è renderizzato a risoluzione 2×; usa l'export SVG per preservare la qualità vettoriale
  • I riferimenti esterni (href http://) non vengono caricati nell'anteprima in sandbox — è voluto
← Torna a tutti gli strumenti