ForHosting KIT · Lettura e monitoraggio di siti web

Sprite SVG di simboli

Inserisca i nomi home, search e user e ottenga un unico sprite SVG nascosto con un simbolo per ciascuno, più lo snippet use di ogni icona da incollare dove compare. Elenchi vuoti, duplicati e nomi non validi vengono rifiutati. Gratis nel suo browser.

  • Gratis
  • Funziona nel suo browser
  • Senza registrazione
  • I suoi dati restano sul dispositivo
Usalo da WebAPIEmailTelegramApp presto
Se inserisce
Ids
home, search, user
Ottiene
Quantità
3
viewBox
0 0 24 24
Prefisso ID
ID dei simboli
home, search, user

Gli sprite SVG di simboli mantengono i sistemi di icone compatti, memorizzabili in cache e accessibili: un documento nascosto contiene simboli riutilizzabili e ogni pulsante o voce di navigazione li punta con un breve elemento use. Designer e ingegneri front-end perdono ancora tempo a scrivere a mano il contenitore, a rinominare gli id e a sincronizzare i punti d’uso quando una nuova icona entra nel set. Questa capacità accetta un elenco non vuoto di identificatori di icona, viewBox e prefisso id opzionali, e restituisce il markup dello sprite in modo deterministico più uno snippet use per ogni id di simbolo finale.

Cos’è uno sprite SVG di simboli e perché contano gli elenchi di id

Uno sprite classico di icone SVG è un unico elemento svg radice, di solito nascosto con display none e marcato aria-hidden affinché le tecnologie assistive saltino il blocco di definizioni. Al suo interno ogni icona è un elemento symbol il cui id è il nome stabile che il Suo prodotto usa ovunque: home, search, cart, user-settings.

Path e geometria vivono come figli di quei simboli; questo strumento emette i gusci vuoti di symbol con un viewBox condiviso così la pipeline di asset o l’export del designer possono iniettare la geometria in seguito senza riscrivere ogni consumatore. Nei punti di chiamata si referenzia un simbolo con use e un frammento href che corrisponde all’id del simbolo, tipicamente avvolto in un piccolo svg per dimensioni e stile currentColor.

Mantenere quel vocabolario di id come un unico elenco—non come markup copiato—evita la deriva tra export Figma, componenti React, piè di pagina e-mail e pagine marketing statiche.

Contratto di input, forma della risposta e regole di validazione

Ogni voce viene trimata; i vuoti sono rifiutati. Ogni id deve corrispondere a un token di nome SVG e XML pratico: lettera o underscore all’inizio, poi lettere, cifre, underscore, punto, due punti o trattino. Quella regola blocca spazi e caratteri che rompono attributi o riferimenti di frammento.

I valori degli attributi sono escapati per amp, virgolette e parentesi angolari così token strani ma legali restano sicuri nel markup. La validazione fallita non viene addebitata.

Libreria di componenti e documentazione Storybook

Mantenga knobs Storybook ed esempi README allineati a id di simbolo reali così gli sviluppatori non referenziano un frammento mancante.

Shortcode CMS e pagine di marketing

Offra agli autori di contenuti markup use pronto da incollare per icone di navigazione e piè di pagina senza modificare a mano le definizioni SVG.

Cosa restituisce il generatore di sprite SVG di simboli?

Lei aggiunge la geometria dei path nei simboli nella pipeline di asset.

Cosa succede se l’elenco di id è vuoto?

Un catalogo vuoto non è una pubblicazione di sprite valida; corregga l’elenco e riprovi. La validazione fallita non viene addebitata.

Come aggiungo un prefisso come icon- a tutti i simboli?

Indichi il prefisso una sola volta e verrà messo davanti a ogni nome, quindi home diventa icon-home. In questo modo le sue icone non si scontrano con un simbolo omonimo di un'altra libreria presente nella stessa pagina.

Quali caratteri può contenere il nome di un'icona?

Il nome deve iniziare con una lettera o un trattino basso, seguito da lettere, cifre, trattini bassi, punti, due punti o trattini. Spazi e altri segni vengono rifiutati perché romperebbero il markup o il collegamento tra use e simbolo.

Che cosa succede se due icone finiscono con lo stesso nome?

Lo sprite non viene creato e lei riceve un messaggio chiaro, anche quando il doppione compare solo dopo l'aggiunta del prefisso. Correggere l'elenco è più sicuro che lasciare che un simbolo ne sovrascriva un altro senza avviso nel browser.

Tutto quello che vedi in questa pagina è disponibile anche via API. Questa sezione è per i team che vogliono integrarlo nei propri sistemi; chi non ne ha bisogno può semplicemente usare lo strumento qui sopra.

POSThttps://api.kit.forhosting.com/web/svg-symbol-sprite-build

Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.

curl -X POST https://api.kit.forhosting.com/web/svg-symbol-sprite-build \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"ids":["home","search","user"]}'
{
  "ids": [
    "home",
    "search",
    "user"
  ]
}
{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.svg_symbol_sprite_build",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

L'API è asincrona: ricevi subito un task_id e puoi fare polling fino a 1 richiesta al secondo.

per richiesta$0.002

Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.

timeout_sec30
max_crawl_pages25
HTTPCodiceSignificato
401unauthorizedChiave API mancante o non valida: controlla l'header Authorization.
402insufficient_balanceCredito esaurito: ricarica per continuare a eseguire attività.
404unknown_typeTipo di attività sconosciuto: controlla il campo type della richiesta.
429rate_limitedTroppe richieste in poco tempo: rallenta e riprova tra qualche secondo.

Gli elenchi vuoti falliscono con invalid_input così le pipeline non pubblicano mai uno sprite vuoto.

Cos’è uno sprite SVG di simboli e perché contano gli elenchi di id

Quando l’elenco è vuoto non c’è nulla da pubblicare: questo endpoint rifiuta array di id vuoti invece di restituire uno sprite con zero simboli, che passerebbe un build disattento e spedirebbe UI rotta. Il view_box opzionale usa di default il canvas comune 0 0 24 24 dei set stile Material, ma può passare qualsiasi viewBox a quattro numeri così artboard da 16 pixel o personalizzati restano coerenti su tutto lo sprite.

Contratto di input, forma della risposta e regole di validazione

Invii con POST un corpo JSON con ids, un array non vuoto obbligatorio di stringhe (sono accettati gli alias icon_ids e icons). Id di simbolo finali duplicati—dopo l’applicazione dell’id_prefix opzionale—falliscono con un messaggio invalid_input chiaro così Lei corregge il catalogo invece di sovrascrivere simboli nel browser. view_box è opzionale e di default è 0 0 24 24; se fornito deve essere quattro numeri separati da spazio con larghezza e altezza positive. id_prefix è opzionale e vuoto di default; se impostato deve essere un token di nome valido affinché l’id di simbolo concatenato resti legale. In caso di successo il corpo include count, view_box e id_prefix normalizzati, symbol_ids nell’ordine di input, sprite_markup come svg nascosto multilinea con un symbol vuoto per id, use_snippets come oggetti con campi id e snippet pronti da incollare, e use_list_markup che unisce quegli snippet con a capo per demo rapide. Le chiamate riuscite usano il saldo KIT prepagato al prezzo base pubblicato $0.002 perché è lavoro di parse puro, senza token di modello e senza rete in uscita.

Dove la generazione di sprite e use porta valore concreto

I team di design system generano il guscio dello sprite quando cambia un file di token icone e aprono una PR che aggiunge solo figli path dentro i simboli esistenti. Siti marketing e temi CMS incollano snippet use in rich text o librerie di shortcode senza insegnare agli autori la sintassi SVG completa. Tenga gli elenchi di id nel controllo di versione, rifiuti le pubblicazioni vuote, e otterrà un’unica fonte di verità per gli sprite SVG di simboli senza erigere un CDN di icone solo per il markup del guscio. Le librerie di componenti spediscono controlli Storybook che elencano gli id di simbolo dalla stessa risposta API così la documentazione non inventa un id che lo sprite non definisce. Le revisioni di accessibilità verificano che il blocco di definizioni sia aria-hidden e che gli use decorativi portino aria-hidden e focusable false come questo endpoint emette di default—gli autori aggiungono ancora aria-label o title quando un’icona è l’unico nome visibile di un controllo. Worker di edge e generatori statici possono chiamare la stessa forma di modulo sul percorso gratuito del browser per le anteprime e sul percorso API per ricostruzioni massive dopo un dump di design.

Export di design token e catalogo icone

Trasformi un elenco JSON di nomi di icone in un guscio di sprite SVG nascosto e snippet use corrispondenti ogni volta che il catalogo cambia in CI.

Posso dare namespace agli id con un prefisso?

Sì. Imposti id_prefix (ad esempio icon-) così home diventa icon-home. I duplicati dopo il prefisso vengono rifiutati.

Come imposto il viewBox di ogni simbolo?

Passi view_box come quattro numeri, ad esempio 0 0 24 24 (il predefinito) o 0 0 16 16. Larghezza e altezza devono essere positive.

Quanto costa generare uno sprite SVG di simboli?

Lo strumento nel browser è gratuito. Le richieste API usano il saldo KIT prepagato a $0.002 per chiamata riuscita; l’input non valido non viene addebitato.

Leggi la documentazione completa del KIT →