SVG / Icone

Generatore di sprite SVG: simboli e utilizzo delle icone

Trascina più icone SVG per creare uno sprite di simboli. Ripulisci il markup, elimina i duplicati negli ID dei nomi file, mantieni i viewBox, converti facoltativamente i riempimenti in currentColor e scarica sprite.svg.

Generatore di sprite SVG: simboli e utilizzo delle icone: Inserisci un insieme di icone SVG e ottieni un unico file sprite con un simbolo per ciascuna, oltre allo snippet per utilizzare ogni icona. Gli script, le risorse esterne e tutto ciò che non è sicuro vengono rimossi; quando necessario, le dimensioni vengono convertite in un viewBox e i riempimenti possono essere impostati su currentColor, così le icone seguono il colore del testo. Funziona al 100% localmente nel browser, senza caricare file sul server.

Categoria
Strumenti per sviluppatori
Esecuzioni
Nel browser
Costo
Gratuito · senza registrazione
Disponibilità
Pronto all'uso
Sprite di icone SVGElaborazione locale

Funziona interamente nel browser

Fino a 60 icone · 1 MB ciascuna · la selezione dei file sostituisce il set attuale

Script, gestori di eventi, risorse esterne, immagini incorporate, testo ed elementi non supportati vengono rimossi. Gli stili inline di base diventano attributi di presentazione. Se viewBox manca, vengono usati larghezza e altezza numeriche, con 24 unità come valore predefinito per ogni dimensione mancante. Controlla ogni anteprima prima dell'uso.

Modifica un'icona SVG

Simboli e riutilizzo

SVG 2 specifica gli elementi symbol e use e il comportamento del loro viewBox: https://www.w3.org/TR/SVG2/struct.html#SymbolElement ; https://www.w3.org/TR/SVG2/struct.html#UseElement

Elaborazione locale e riempimento

Ogni icona viene ricostruita da un elenco di elementi e attributi SVG sicuri, quindi script, gestori di eventi e risorse esterne non possono raggiungere lo sprite. Non è incluso alcun set di icone di terze parti. Il riempimento SVG e currentColor sono specificati in https://www.w3.org/TR/SVG2/painting.html . Le licenze delle icone caricate restano sotto la responsabilità dell'utente.

Come usarlo

  1. Trascina fino a 60 icone SVG, ciascuna di dimensioni inferiori a 1 MB.
  2. Controlla le anteprime ripulite e, se vuoi, converti i riempimenti in currentColor.
  3. Scarica lo sprite e seleziona un'icona per copiarne lo snippet di utilizzo.

Privacy e limitazioni

I tuoi file SVG restano sul tuo dispositivo. Lo strumento non recupera gli URL incorporati e non carica le icone.

Strumenti correlati

Editor SVGPulizia SVGSVG in JSX

Domande frequenti

Come si usa lo sprite?

Inserisci una volta il suo SVG in un contenitore nascosto della pagina, quindi usa gli snippet inline copiati. Per un file separato, usa invece sprite.svg#id come valore di href.

Cosa succede quando manca il viewBox?

La larghezza e l'altezza numeriche, comprese quelle con unità px, definiscono un nuovo viewBox. Qualsiasi dimensione mancante o non supportata viene impostata su 24 unità. L'anteprima segnala i viewBox corretti automaticamente, così puoi controllare eventuali ritagli.

Ogni icona manterrà esattamente il suo aspetto?

No. Le forme di base, i gruppi, i gradienti, i ritagli e le maschere vengono mantenuti, ma gli script, il testo, le immagini incorporate, gli elementi use e gli stili non supportati vengono rimossi. Controlla l'anteprima. Sei tu il responsabile delle licenze delle immagini caricate.

Strumento gratuito · nel browser esecuzioni · senza account