Softonic

Comprimi SVG

Passaggio 1 / 2
Avanti

Un SVG esportato da Figma, Illustrator o Sketch porta tipicamente 2-5 volte più markup di quanto necessario: spazi dei nomi dell’editor, commenti, gruppi vuoti, trasformazioni ridondanti e coordinate a 6 decimali. Questo strumento esegue il tuo SVG attraverso un passaggio in stile SVGO, rimuovendo il rumore mantenendo l’output renderizzato pixel-identico.

Come comprimere un SVG

  1. 1

    Incolla o carica il tuo SVG

    Accetta testo XML grezzo o un file .svg.

  2. 2

    Scegli un livello di ottimizzazione

    Sicuro (rimuovi commenti e metadati dell'editor), aggressivo (collassa gruppi, arrotonda coordinate, unisci percorsi), o personalizzato.

  3. 3

    Esamina il diff

    Confronta il conteggio dei byte prima e dopo, e visualizza il risultato renderizzato per confermare che nulla sia cambiato visivamente.

  4. 4

    Copia o scarica

    Incolla l'SVG ottimizzato direttamente nel tuo codice, o salvalo come file.

Cosa appesantisce un SVG

Apri un SVG esportato da Figma in un editor di testo e vedrai tipicamente:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."
     xmlns:sketch="..." width="24.000000" height="24.000000"
     viewBox="0 0 24.000000 24.000000" ...>
  <!-- Generatore: Figma ... -->
  <title>icona</title>
  <desc>Creato con Figma</desc>
  <g id="Page-1" stroke="none" fill="none" fill-rule="evenodd">
    <g id="icona" transform="translate(0.000000, 0.000000)">
      <path d="M12.000000,2.000000 L..." fill="#000000"/>
    </g>
  </g>
</svg>

Quasi ogni riga è rimovibile. L’output renderizzato ha bisogno solo di svg, viewBox e path.

Cosa rimuove l’ottimizzatore

Rimosso Perché sicuro
Commenti XML Mai renderizzati
Spazi dei nomi dell’editor (sketch, figma) Non utilizzati dai browser
<title> / <desc> (opzionale) Testo accessibile, mantieni se significativo
Gruppi vuoti <g> Nessun effetto visivo
Valori di attributo predefiniti I browser usano comunque i predefiniti
Trasformazioni identitarie translate(0,0) non fa nulla
Decimali delle coordinate 3 decimali sembrano identici sullo schermo
ID non utilizzati Mantieni solo gli ID referenziati altrove

Attenzione

  • Non rimuovere ID referenziati da CSS o da url(#...) in riempimenti, maschere, filtri. La modalità aggressiva può rompere i gradienti.
  • Mantieni viewBox. Senza di esso, l’SVG non scalerà in modo responsivo.
  • Mantieni <title> se ti affidi ad esso per l’accessibilità (i lettori di schermo lo annunciano).
  • Evita di collassare le istanze <use>. L’ottimizzatore potrebbe inlinerle e perdere il modello di verità sorgente.

Quando la compressione salva byte reali

SVG è testo, il che significa che gzip sul server rimuove già molta ridondanza. Un SVG che passa da 4KB a 1KB non compresso potrebbe passare solo da 1.2KB a 0.7KB in transito. Vale comunque la pena, e la fonte più piccola è più facile da leggere.

Domande frequenti

La modalità sicura no. La modalità aggressiva può rimuovere ID referenziati da CSS o animazioni SMIL, se il tuo SVG ha animazioni, usa la modalità sicura o autorizza manualmente gli ID.

Le esportazioni da Figma/Illustrator si riducono tipicamente del 50-80%. Gli SVG scritti a mano sono già compatti e di solito si riducono solo del 10-20%.

Di default sì, gli attributi <title>, <desc> e aria-* sono preservati. Puoi scegliere di rimuoverli se l’SVG è puramente decorativo e l’HTML circostante fornisce l’etichetta.

Sì. L’attributo xmlns è mantenuto perché è richiesto quando si incolla SVG direttamente in HTML. L’SVG in linea è solitamente il metodo di consegna più veloce per piccole icone.

Strumenti correlati

Selettore Colori Material Design

Sfoglia la palette di colori Material Design. Copia qualsiasi tonalità (da 50 a A700) in HEX, RGB o HSL con un solo tocco.

Creatore di GIF

Trasforma una sequenza di immagini in una GIF animata. Regola frame rate, qualità e dimensioni prima dell’esportazione.

Generatore di codici QR

Genera localmente nel browser un codice QR da URL, testo semplice o payload QR formattato correttamente e scaricalo come PNG.

Lavagna online

Disegna idee e organizza forme, note e immagini locali su una lavagna privata nel browser. Esporta in PNG, JPEG, SVG o JSON modificabile.

Generatore di meme

Aggiungi testo in alto e in basso a un’immagine JPG, PNG o WebP. Regola font, colore e contorno, quindi scarica il meme in PNG.

Vettorializzatore da PNG a SVG

Trasforma immagini raster PNG in tracciati SVG nel browser. Ideale per loghi, icone e disegni al tratto. Regola soglia, numero di colori e smussatura.