Ottimizzatore SVG

Informazioni su questa utility

I file SVG (Scalable Vector Graphics) descrivono forme, tracciati e testo usando markup XML. Strumenti di design, export CMS e icone scritte a mano spesso contengono molti più dati di quanti ne serva al browser per renderizzare la stessa immagine. L'ottimizzazione SVG rimuove quel markup in eccesso — commenti, metadati dell'editor, gruppi ridondanti, precisione non necessaria nelle coordinate e attributi inutilizzati — mantenendo l'output visivo identico alle dimensioni normali. A differenza di formati raster come PNG o JPEG, SVG resta modificabile e indipendente dalla risoluzione dopo la compressione. Un'icona ben ottimizzata può scendere da 40 KB a 6 KB senza perdere un singolo pixel visibile. L'ottimizzazione è essenziale per loghi, icone di interfaccia, illustrazioni e favicon caricati a ogni visita. File più piccoli significano caricamenti più rapidi, minore consumo di banda su reti mobili e punteggi Core Web Vitals migliori. I motori di ricerca premiano pagine veloci e gli utenti notano quando le icone compaiono in ritardo o bloccano il rendering. SVG ottimizzati si integrano meglio in HTML, componenti React e template email dove markup pesante può rompere i parser o gonfiare il bundle. I siti in produzione referenziano icone SVG in sfondi CSS, tag <svg> inline o elementi img. Ogni kilobyte in quei file contribuisce al percorso di rendering critico, soprattutto quando più icone appaiono above the fold. Rimuovere spazi bianchi, collassare transform e eliminare dichiarazioni doctype riduce la dimensione di trasferimento senza toccare CSS o JavaScript. Se servi favicon SVG con link rel="icon" type="image/svg+xml", i browser li mettono in cache in modo aggressivo — un file snello si aggiorna più velocemente quando rebrandizzi. I progetti React importano spesso SVG come componenti o URL. File sorgente gonfiati aumentano il tempo di parse del bundle JavaScript quando i loader li inlinano come stringhe. Prima di aggiungere un'icona alla libreria componenti, passala in un ottimizzatore così tree-shaking e code splitting restano efficaci. Quando incolli markup ottimizzato in un file .svg o pipeline SVGR, conferma che i valori viewBox richiesti restino — le app React dipendono dal viewBox per lo scaling responsive. I browser moderni supportano favicon SVG collegati dall'head del documento. Scalano nitidamente su tab Retina e scorciatoie fissate, ma solo se il file è piccolo e valido. I favicon SVG devono essere quadrati, usare palette semplice ed evitare riferimenti esterni o script per sicurezza. Dopo l'ottimizzazione, converti in ICO o PNG quando devi supportare shell Windows vecchie o crawler social che si aspettano formati raster. Un favicon SVG ottimizzato è un eccellente file master per l'intero flusso del pacchetto favicon. I designer esportano spesso SVG con immagini raster incorporate, precisione decimale eccessiva nei tracciati, forme sovrapposte duplicate e blocchi style che potrebbero essere attributi semplificati. Illustrator a volte aggiunge layer nominati come elementi group, mentre export Figma includono attributi xmlns e coordinate frazionarie a sei decimali. width e height dimenticati senza viewBox rompono layout responsive. Layer nascosti e maschere di ritaglio attive esportano geometria invisibile che conta comunque nella dimensione del file. Da Figma, usa Copia come SVG o esporta con Outline stroke quando le icone usano tratti che convertono male. I file Figma includono spesso fill-rule e matrici transform su ogni gruppo; l'ottimizzazione collassa tracciati adiacenti dove sicuro. In Illustrator, scegli export SVG con Minify o Responsive, disabilita embedding font non necessario ed espandi le appearance prima dell'export. Dopo l'export, incolla il markup in questo ottimizzatore basato sul browser. L'elaborazione avviene localmente — i tuoi asset di brand non vengono mai caricati su un server. Scarica il file pulito o copia il risultato direttamente nel repo, CMS o pipeline del generatore favicon. Abbina l'output al nostro Convertitore SVG in ICO, Convertitore SVG in PNG o Generatore Favicon quando servono pacchetti multi-dimensione per il lancio in produzione.

FAQ