ForHosting KIT · Websites auslesen & überwachen

SVG-Symbol-Sprite

Geben Sie die Namen home, search und user ein, und Sie erhalten ein verstecktes SVG-Sprite mit einem Symbol für jedes Icon sowie ein use-Schnipsel pro Icon zum Einfügen an der passenden Stelle. Leere Listen, Duplikate und ungültige Namen werden abgelehnt. Kostenlos in Ihrem Browser.

Kostenlos
Läuft in Ihrem Browser
Ohne Anmeldung
Ihre Daten bleiben auf Ihrem Gerät

Im Browser ausführen – kostenlos API ansehen

Nutzen Sie es über WebAPIE-MailTelegramApp bald

Rechenbeispiel

Wenn Sie eingeben

Ids: home, search, user

Erhalten Sie

Anzahl: 3
viewBox: 0 0 24 24
ID-Präfix
Symbol-IDs: home, search, user

SVG-Symbol-Sprites halten Icon-Systeme klein, cachefähig und barrierearm: Ein verstecktes Dokument hält wiederverwendbare Symbole, und jeder Button oder Navigationspunkt verweist mit einem kurzen use-Element darauf. Designer und Front-End-Ingenieure verschwenden weiterhin Zeit mit handgeschriebenen Hüllen, umbenannten IDs und der Synchronisation der Einsatzstellen, wenn ein neues Icon ins Set kommt. Diese Fähigkeit akzeptiert eine nicht leere Liste von Icon-Kennungen, optionales viewBox und ID-Präfix und liefert deterministisches Sprite-Markup plus ein use-Snippet für jede endgültige Symbol-ID.

Was ein SVG-Symbol-Sprite ist und warum ID-Listen zählen

Ein klassisches SVG-Icon-Sprite ist ein einziges Wurzel-svg-Element, meist mit display none versteckt und mit aria-hidden markiert, damit Hilfstechnologien den Definitionsblock überspringen. Darin ist jedes Icon ein symbol-Element, dessen id der stabile Name ist, den Ihr Produkt überall nutzt: home, search, cart, user-settings. Pfade und Geometrie leben als Kinder dieser Symbole; dieses Werkzeug erzeugt die leeren Symbol-Hüllen mit gemeinsamem viewBox, damit Ihre Asset-Pipeline oder der Designer-Export die Geometrie später einfügen kann, ohne jeden Verbraucher umzuschreiben.

An Aufrufstellen referenzieren Sie ein Symbol mit use und einem href-Fragment, das zur Symbol-ID passt, typischerweise in einem kleinen svg für Größe und currentColor-Styling. Dieses ID-Vokabular als eine einzige Liste zu halten—nicht als kopiertes Markup—vermeidet Drift zwischen Figma-Exporten, React-Komponenten, E-Mail-Fußzeilen und statischen Marketingseiten. Ist die Liste leer, gibt es nichts zu veröffentlichen: Dieser Endpunkt lehnt leere ID-Arrays ab, statt ein Sprite mit null Symbolen zurückzugeben, das einen unachtsamen grünen Build passieren und kaputte UI ausliefern würde.

Eingabevertrag, Antwortform und Validierungsregeln

Jeder Eintrag wird getrimmt; Leereinträge werden abgelehnt. Jede ID muss einem praktischen SVG- und XML-Namenstoken entsprechen: Buchstabe oder Unterstrich zuerst, dann Buchstaben, Ziffern, Unterstrich, Punkt, Doppelpunkt oder Bindestrich. Diese Regel blockiert Leerzeichen und Zeichen, die Attribute oder Fragmentreferenzen zerbrechen.

Attributwerte werden für amp, Anführungszeichen und spitze Klammern escaped, damit merkwürdige aber legale Tokens im Markup sicher bleiben. Fehlgeschlagene Validierung wird nicht abgerechnet.

Wo Sprite- und use-Erzeugung echten Nutzen stiftet

Design-System-Teams erzeugen die Sprite-Hülle, sobald sich eine Icon-Token-Datei ändert, und öffnen dann einen PR, der nur path-Kinder in bestehende Symbole einfügt. Marketing-Sites und CMS-Themes fügen use-Snippets in Rich Text oder Shortcode-Bibliotheken ein, ohne Autoren die volle SVG-Syntax beizubringen. Barrierefreiheits-Reviews prüfen, dass der Definitionsblock aria-hidden ist und dekorative uses aria-hidden sowie focusable false tragen, wie dieser Endpunkt standardmäßig ausgibt—Autoren ergänzen weiterhin aria-label oder title, wenn ein Icon der einzige sichtbare Name eines Steuerelements ist.

Halten Sie ID-Listen unter Versionskontrolle, lehnen Sie leere Veröffentlichungen ab, und Sie erhalten eine einzige Wahrheitsquelle für SVG-Symbol-Sprites, ohne nur für Hüllen-Markup ein volles Icon-CDN aufzubauen.

Anwendungsfälle

Komponentenbibliothek und Storybook-Docs

Halten Sie Storybook-Knobs und README-Beispiele an echten Symbol-IDs ausgerichtet, damit Entwickler nie ein fehlendes Fragment referenzieren.

CMS- und Marketing-Shortcodes

Geben Sie Inhaltsautoren einfügfertiges use-Markup für Navigations- und Footer-Icons, ohne SVG-Definitionen von Hand zu bearbeiten.

Häufige Fragen

Was liefert der SVG-Symbol-Sprite-Generator?

Die Pfadgeometrie fügen Sie in der Asset-Pipeline in die Symbole ein.

Was passiert bei leerer ID-Liste?

Ein leerer Katalog ist keine gültige Sprite-Veröffentlichung; korrigieren Sie die Liste und versuchen Sie es erneut. Fehlgeschlagene Validierung wird nicht abgerechnet.

Wie setze ich ein Präfix wie icon- vor alle Symbole?

Geben Sie das Präfix einmal an, dann steht es vor jedem Namen, aus home wird also icon-home. So kollidieren Ihre Icons nicht mit einem gleichnamigen Symbol aus einer anderen Bibliothek auf derselben Seite.

Welche Zeichen darf ein Icon-Name enthalten?

Ein Name beginnt mit einem Buchstaben oder Unterstrich, danach folgen Buchstaben, Ziffern, Unterstriche, Punkte, Doppelpunkte oder Bindestriche. Leerzeichen und andere Zeichen werden abgelehnt, weil sie das Markup oder den Verweis von use auf das Symbol zerstören würden.

Was passiert, wenn zwei Icons denselben Namen bekommen?

Das Sprite wird nicht erstellt, und Sie erhalten eine klare Meldung, auch wenn die Doppelung erst durch das Präfix entsteht. Die Liste zu korrigieren ist sicherer, als ein Symbol im Browser stillschweigend ein anderes überschreiben zu lassen.

Für Entwickler — API-Zugang

Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.

Endpunkt

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

Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.

Aufruf aus Ihrem Stack

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"]}'

const res = await fetch("https://api.kit.forhosting.com/web/svg-symbol-sprite-build", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "ids": [
      "home",
      "search",
      "user"
    ]
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/svg-symbol-sprite-build",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "ids": [
        "home",
        "search",
        "user"
    ]
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/svg-symbol-sprite-build", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"ids":["home","search","user"]}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"ids":["home","search","user"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/svg-symbol-sprite-build", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Beispiel-Anfrage

{
  "ids": [
    "home",
    "search",
    "user"
  ]
}

Beispiel-Antwort

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.svg_symbol_sprite_build",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Preis

pro Anfrage$0.002

Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.

Limits

`timeout_sec`	30
`max_crawl_pages`	25

Fehler

HTTP	Code	Bedeutung
`401`	`unauthorized`	Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer).
`402`	`insufficient_balance`	Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht.
`404`	`unknown_type`	Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog.
`429`	`rate_limited`	Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Technische Hinweise

Leere Listen scheitern mit invalid_input, damit Pipelines nie ein hohles Sprite veröffentlichen.

Was ein SVG-Symbol-Sprite ist und warum ID-Listen zählen

Optionales id_prefix (zum Beispiel icon-) lässt Monorepos Symbole namenräumen, damit Drittanbieter-Widgets nicht mit Ihrer eigenen home-ID kollidieren. Optionales view_box ist standardmäßig die übliche 0 0 24 24-Fläche materialartiger Sets, aber Sie können jedes vierzahlige viewBox übergeben, damit 16-Pixel- oder eigene Artboards im ganzen Sprite konsistent bleiben.

Eingabevertrag, Antwortform und Validierungsregeln

Senden Sie per POST einen JSON-Body mit ids, einem Pflicht-Array nicht leerer Zeichenketten (Aliase icon_ids und icons werden akzeptiert). Doppelte endgültige Symbol-IDs—nach optionalem id_prefix—scheitern mit einer klaren invalid_input-Meldung, damit Sie den Katalog korrigieren statt Symbole im Browser zu überschreiben. view_box ist optional und standardmäßig 0 0 24 24; wenn angegeben, müssen es vier durch Leerzeichen getrennte Zahlen mit positiver Breite und Höhe sein. id_prefix ist optional und standardmäßig leer; wenn gesetzt, muss es selbst ein gültiges Namenstoken sein, damit die verkettete Symbol-ID legal bleibt. Bei Erfolg enthält der Body count, normalisiertes view_box und id_prefix, symbol_ids in Eingabereihenfolge, sprite_markup als mehrzeiliges verstecktes svg mit einem leeren symbol pro ID, use_snippets als Objekte mit id- und snippet-Feldern zum Einfügen sowie use_list_markup, das diese Snippets mit Zeilenumbrüchen für schnelle Demos verbindet. Erfolgreiche Aufrufe nutzen das vorausbezahlte KIT-Guthaben zum veröffentlichten Basispreis $0.002, weil dies reine Parse-Arbeit ohne Modell-Tokens und ohne ausgehendes Netz ist.

Wo Sprite- und use-Erzeugung echten Nutzen stiftet

Komponentenbibliotheken liefern Storybook-Steuerungen, die Symbol-IDs aus derselben API-Antwort listen, damit Docs nie eine ID erfinden, die das Sprite nicht definiert. Edge-Worker und statische Generatoren können dieselbe Modulform auf dem kostenlosen Browser-Pfad für Vorschauen und auf dem API-Pfad für Massen-Neubauten nach einem Design-Dump aufrufen.

Integrationsbeispiele

Design-Token- und Icon-Katalog-Exporte

Wandeln Sie eine JSON-Liste von Icon-Namen in eine versteckte SVG-Sprite-Hülle und passende use-Snippets um, sobald sich der Katalog in der CI ändert.

Technische Fragen

Kann ich IDs mit einem Präfix namenräumen?

Ja. Setzen Sie id_prefix (zum Beispiel icon-), sodass aus home icon-home wird. Duplikate nach dem Präfix werden abgelehnt.

Wie setze ich das viewBox jedes Symbols?

Übergeben Sie view_box als vier Zahlen, etwa 0 0 24 24 (Standard) oder 0 0 16 16. Breite und Höhe müssen positiv sein.

Was kostet das Erzeugen eines SVG-Symbol-Sprites?

Das Browser-Tool ist kostenlos. API-Anfragen nutzen vorausbezahltes KIT-Guthaben zu $0.002 pro erfolgreichem Aufruf; ungültige Eingaben werden nicht abgerechnet.

Vollständige KIT-Dokumentation lesen →

SVG-Symbol-Sprite

Im Browser ausführen – kostenlos

Rechenbeispiel

Was ein SVG-Symbol-Sprite ist und warum ID-Listen zählen

Eingabevertrag, Antwortform und Validierungsregeln

Wo Sprite- und use-Erzeugung echten Nutzen stiftet

Anwendungsfälle

Komponentenbibliothek und Storybook-Docs

CMS- und Marketing-Shortcodes

Häufige Fragen

Verwandte Tools

Für Entwickler — API-Zugang

Endpunkt

Aufruf aus Ihrem Stack

Beispiel-Anfrage

Beispiel-Antwort

Preis

Limits

Fehler

Technische Hinweise

Was ein SVG-Symbol-Sprite ist und warum ID-Listen zählen

Eingabevertrag, Antwortform und Validierungsregeln

Wo Sprite- und use-Erzeugung echten Nutzen stiftet

Integrationsbeispiele

Design-Token- und Icon-Katalog-Exporte

Technische Fragen

danke