Loading…

Informazioni Abbellitore e Minificatore SVG Online

Lavori con file SVG disordinati o troppo grandi? Incolla il tuo codice o carica un file `.svg`, scegli **Formatta** per abbellire o **Minifica** per ridurne le dimensioni, e ottieni subito un markup SVG pulito e ottimizzato. Perfetto per designer, sviluppatori front-end e chiunque abbia bisogno di un'ottimizzazione vettoriale rapida e sicura. 🚀

Caratteristiche Principali del Nostro Formattatore SVG

  • **Modalità Abbellisci** con indentazione intelligente, a capo riga e allineamento attributi
  • **Modalità Minifica** che rimuove spazi bianchi, commenti e metadati ridondanti
  • Formattazione in stile Prettier e ottimizzazione in stile SVGO sotto il cofano
  • Stile indentazione configurabile (spazi o tabulazioni) e dimensione indentazione
  • Colonna di a capo opzionale per mantenere percorsi lunghi e attributi ordinati
  • Stile di fine riga coerente (LF / CRLF) per diff puliti su tutti i sistemi operativi
  • Trascina e rilascia file `.svg` fino a 5 MB o incolla il markup SVG inline
  • Elaborazione 100% lato client — la tua grafica non lascia mai il browser
  • Copia con un clic o scarica l'output formattato (`.formatted.svg`) o minimizzato (`.min.svg`)
  • Interfaccia utente reattiva che funziona bene su laptop, desktop e tablet

🔧 Come Formattare o Minimizzare SVG: Guida Rapida for svg-formatter

1

1. Incolla o Carica SVG

📥 Trascina e rilascia il tuo file `.svg` o incolla il markup SVG grezzo nell'editor. Lo strumento rileva automaticamente il contenuto standard `image/svg+xml`.

2

2. Scegli Formatta o Minimizza

✨ Seleziona **Formatta** per un markup leggibile (ottimo per revisioni e controllo versione) o **Minimizza** per la dimensione file più piccola possibile.

3

3. Regola le Opzioni di Formattazione

⚙️ Modifica **Stile Indentazione** (spazi o tabulazioni), **Dimensione Indentazione** e opzionale **A capo / Lunghezza Riga**. Queste si mappano direttamente alle impostazioni del formattatore sottostante.

4

4. Anteprima ed Esporta

👀 Ispeziona il codice SVG ottimizzato, testalo rapidamente nel tuo progetto, poi copialo negli appunti o scarica il risultato come nuovo file `.svg`.

Dettagli Tecnici

Motore di Abbellimento (Modalità Formatta)

La modalità Formatta utilizza un motore in stile Prettier ottimizzato per il markup XML SVG. Si concentra sulla leggibilità e su diff stabili e prevedibili.

AspettoComportamentoNote
Stile IndentazioneSpazi o TabulazioniConfigurabile tramite **Stile Indentazione** (si mappa a `indentStyle`).
Dimensione Indentazione1–8 spaziControlla la larghezza dell'annidamento quando si usano spazi (si mappa a `indentSize`).
A capo / Lunghezza Riga0–120 colonne`0` disabilita l'a capo; altrimenti le righe lunghe vengono spezzate alla colonna scelta (si mappa a `wrapLineLength`).
Fine RigaLF (`\n`) o CRLF (`\r\n`)Mantiene i fine riga coerenti su tutti i sistemi operativi (si mappa a `endOfLine`).
Lingua di OutputSVG in stile XMLMantiene la struttura XML compatibile con SVG per un incorporamento sicuro.

Pipeline di Minificazione (Modalità Minify)

La modalità Minify utilizza una pipeline ispirata a SVGO focalizzata sulla riduzione delle dimensioni preservando l'output visivo.

PassoDescrizioneImpatto
Rimuovi commentiRimuove i nodi commento `<!-- ... -->` che non influenzano il rendering.File più piccoli, differenze più pulite.
Riduci spazi bianchi ridondantiComprime spazi, tabulazioni e interruzioni di riga non necessari.Grandi vantaggi per SVG esportati da editor verbosi.
Taglia metadatiRimuove opzionalmente i nodi metadati non di rendering quando sicuro.Ottimo per asset di produzione pubblici.
Normalizza attributiSemplifica e riordina gli attributi in modo stabile.Output più compatto, migliore cacheabilità.

Codifica & Compatibilità

L'output è SVG UTF-8 compatibile con browser e strumenti moderni, allineato con la specifica SVG 2.

Prestazioni & Limiti (Tipico Browser Desktop)

Tipo di FileDimensione InputTempo BeautifyTempo MinifyRiduzione Dimensioni Tipica
Icona5 KB⚡ < 15 ms⚡ < 20 ms≈ 25–40%
Illustrazione100 KB⚡ < 60 ms⚡ < 90 ms≈ 40–55%
Grafica Eroica500 KB⏱️ < 300 ms⏱️ < 450 ms≈ 50–60%
Le prestazioni reali dipendono dalla CPU, dal browser e dalla complessità dell'SVG.

Alternative CLI per Utenti Esperti

Preferisci flussi di lavoro da terminale o integrazione CI? Combina Prettier e SVGO per un comportamento simile a questo strumento:

Linux / 🍎 macOS

Abbellisci SVG con Prettier

npx prettier --parser xml --print-width 80 --tab-width 2 --write input.svg

Applica indentazione coerente e a capo automatico al tuo markup SVG.

Minifica SVG con SVGO

npx svgo input.svg -o input.min.svg

Rimuove commenti, metadati e spazi bianchi ridondanti per file più piccoli.

Windows (PowerShell o CMD)

Formatta SVG con xmlstarlet (tramite WSL o nativo)

xmlstarlet fo --indent-spaces 2 input.svg > pretty.svg

Formatta SVG/XML con un'indentazione di 2 spazi.

Minifica SVG con SVGO (nessuna installazione globale)

npx svgo input.svg -o min.svg

Esegue SVGO direttamente tramite `npx` per ottimizzazioni occasionali.

Aggiungi Prettier + SVGO al tuo build o pre-commit hooks così i designer possono esportare SVG grezzi e la tua pipeline li mantiene ottimizzati.

Applicazioni Pratiche

Prestazioni Web e Bundle Frontend

  • Riduci i payload SVG nei sistemi di design, set di icone e sprite sheet.
  • Inserisci SVG minificati in HTML/CSS per risparmiare richieste HTTP extra.
  • Migliora i Core Web Vitals riducendo le illustrazioni eroiche nelle pagine di destinazione.
<img src="/assets/hero.min.svg" alt="Grafica eroica ottimizzata" />
.icon-check { background-image: url('data:image/svg+xml;utf8,<svg ...>'); }

Passaggio Design e Controllo Versione

  • Abbella SVG esportati prima della code review per rendere i diff leggibili.
  • Mantieni un `.formatted.svg` per la collaborazione e un `.min.svg` per la produzione.
  • Impone indentazione coerente e ordinamento attributi in un sistema di design.

Mobile, Email e App Ibride

  • Minifica SVG inline in email HTML per campagne più leggere.
  • Riduci la dimensione del bundle app in React Native / Capacitor / Ionic quando si spediscono molte icone.
  • Risparmia larghezza di banda per gli utenti con connessioni lente o a consumo.

❓ Frequently Asked Questions

❓Cos'è la formattazione SVG?

La formattazione (o abbellimento) ristruttura il tuo markup SVG con indentazione coerente, interruzioni di riga e ordinamento degli attributi. Non cambia il modo in cui l'immagine viene renderizzata, solo come appare il codice e come si comporta nei diff.

📏La minimizzazione altererà l'aspetto del mio SVG?

Normalmente no. La minimizzazione rimuove commenti, spazi bianchi ridondanti e metadati non visualizzati. È progettata per preservare il risultato visivo riducendo le dimensioni. Se fai affidamento su metadati speciali per strumenti di editing, conserva un backup del file originale.

🔒Il mio SVG viene caricato su un server?

Mai. Tutta la formattazione e minimizzazione avviene interamente nel tuo browser utilizzando JavaScript/WebAssembly. I tuoi file SVG non vengono inviati a nessun server né archiviati in remoto.

🚀Quanto spazio può risparmiare la minimizzazione?

I risparmi nel mondo reale sono tipicamente tra **30% e 70%**, a seconda di come è stato esportato l'SVG e di quanti metadati o spazi bianchi contiene.

⚠️La rimozione di `<metadata>` o commenti può interrompere il mio flusso di lavoro?

Per grafiche web pubbliche, rimuovere metadati e commenti è generalmente sicuro. Tuttavia, se i tuoi strumenti di design memorizzano dati di modifica o informazioni di licenza in quelle sezioni, conserva una copia originale non minimizzata nel controllo versione per future modifiche.

Pro Tips

Best Practice

Conserva un `icon.formatted.svg` non minimizzato nel tuo repo per diff puliti, poi genera `icon.min.svg` come parte del tuo step di build.

Best Practice

Includi sempre elementi `<title>` e `<desc>` significativi prima della minimizzazione per mantenere i tuoi SVG accessibili ai lettori di schermo.

Best Practice

Combina la minimizzazione SVG con la compressione HTTP (Gzip/Brotli) per ridurre ulteriormente i byte di illustrazioni e grafici pesanti.

Best Practice

Per set di icone, considera una strategia sprite: minimizza una volta, poi referenzia le icone tramite `<use>` invece di duplicare il codice SVG ovunque.

Additional Resources

Specifica W3C SVG 2
Technical specification
MDN Web Docs: SVG
Documentation
SVGO (GitHub)
Documentation
Formattazione XML/SVG Prettier
Documentation

Other Tools