SVG in eine CSS-sichere Daten-URI umwandeln
Fügen Sie SVG-Code ein und erhalten Sie eine Daten-URI, die mit data:image/svg+xml, beginnt und direkt in ein CSS url() oder eine Bildquelle passt. Eine Farbe wie #0a7 wird zu %230a7, sodass kein Zeichen Ihr Stylesheet zerbricht. Kostenlos in Ihrem Browser.
- Kostenlos
- Läuft in Ihrem Browser
- Ohne Anmeldung
- Ihre Daten bleiben auf Ihrem Gerät
Im Browser ausführen – kostenlos
Läuft direkt in Ihrem Browser – kostenlos. Ihre Datei verlässt Ihren Browser nicht und wird an keinen Server übertragen.
Wandeln Sie rohes SVG-Markup in eine Daten-URI um, die Sie in einem CSS-Wert url() oder überall dort einsetzen können, wo eine Bild-URL zulässig ist. Der Konverter prüft zunächst, ob die Eingabe wohlgeformtes XML ist. Anschließend codiert er das Dokument als UTF-8 und maskiert jedes Zeichen, das die Auswertung der URL oder des CSS verändern könnte. Das Ergebnis beginnt mit dem SVG-Medientyp und enthält keine zusätzliche base64-Schicht. Dadurch lässt es sich leicht prüfen, kopieren, zwischenspeichern und gemeinsam mit Ihren Styles versionieren.
Warum SVG-Daten-URIs sorgfältig maskiert werden müssen
SVG besteht aus Text, doch direkt in ein CSS-Token <code>url()</code> eingefügter Text ist nicht zuverlässig. Eine Farbe wie <code>#0a7</code> leitet ein URL-Fragment ein, Leerraum kann Tokens trennen und Anführungszeichen oder Klammern können den CSS-Wert vorzeitig beenden. Dieser Konverter beseitigt solche Mehrdeutigkeiten, indem er das SVG als UTF-8-Bytes codiert und nur nicht reservierte URL-Zeichen lesbar lässt.
Alles andere wird prozentcodiert, darunter Rauten, spitze Klammern, Anführungszeichen, Apostrophe, runde Klammern, Leerzeichen und Zeilenumbrüche. Der Wert bleibt deshalb sowohl in einer unzitierten als auch in einer einfach oder doppelt zitierten <code>url(...)</code>-Angabe intakt. Auf das Präfix <code>data:image/svg+xml,</code> folgt das codierte Markup.
Da keine base64-Schicht vorhanden ist, bleiben übliche Buchstaben und Zahlen sichtbar. Kopieren Sie die gesamte Zeichenfolge, denn das Präfix teilt dem Browser die Art der Nutzdaten mit.
Die Prüfung findet vor der Umwandlung statt
Fehlerhaftes Markup zu codieren würde einen korrekt maskierten Wert liefern, der beim Einlesen des Bildes durch den Browser dennoch scheitert. Deshalb prüft der Konverter zuerst das XML-Dokument. Er verlangt genau ein SVG-Wurzelelement, korrekt verschachtelte und übereinstimmende Start- und End-Tags, zitierte Attributwerte, eindeutige Attributnamen, abgeschlossene Kommentare und CDATA-Abschnitte sowie gültige Entitätsreferenzen.
Text außerhalb des Wurzelelements und ein zweites Wurzelelement werden abgewiesen. XML-Deklarationen, Verarbeitungsanweisungen, Kommentare, CDATA und eine Dokumenttypdeklaration sind an strukturell zulässigen Positionen erlaubt. Die Prüfung bestätigt die XML-Syntax, garantiert jedoch nicht, dass jeder Browser sämtliche SVG-Elemente, Attribute, Farbwerte, Animationen oder externen Referenzen unterstützt.
Das Ergebnis in CSS und HTML verwenden
Verwenden Sie die zurückgegebene URI überall dort, wo die Plattform eine Bild-URL erwartet. In CSS eignet sie sich beispielsweise für Hintergrundbilder, Maskenquellen, Listenzeichen oder generierte Inhalte. Zur besseren Lesbarkeit können Sie den Wert in einfache oder doppelte Anführungszeichen setzen; die strenge Maskierung schützt jedoch auch ein unzitiertes <code>url()</code>-Token.
In HTML können Sie ihn mit der üblichen Attributquotierung einem <code>src</code>-Attribut zuweisen. Beachten Sie, dass Daten-URIs ihre Bytes bei jedem Vorkommen wiederholen, sofern Ihr Build-System die Deklaration nicht herauszieht oder wiederverwendet. Sie eignen sich daher besonders für kleine Symbole und Dekorationen.
Die Umwandlung ist deterministisch: Gleiche Eingaben ergeben gleiche Ausgaben. Der Konverter lädt keine Schriften, Bilder oder Styles, optimiert keine Pfade und bereinigt keine aktiven SVG-Inhalte. Behandeln Sie nicht vertrauenswürdiges Markup nach den Sicherheitsregeln des Zielkontexts.
Anwendungsfälle
Ein kleines CSS-Symbol einbetten
Wandeln Sie eine versionierte SVG-Datei ohne zusätzliche Netzwerkanfrage in ein sicheres Hintergrundbild um.
Styles für verschiedene Designs erzeugen
Codieren Sie SVG-Varianten beim Build und nutzen Sie deterministische URIs in Design-Tokens oder Komponenten-Styles.
Erzeugtes SVG-Markup prüfen
Weisen Sie defektes XML aus einer Vorlage zurück, bevor die codierte Bildzeichenfolge veröffentlicht wird.
Häufige Fragen
Warum Prozentcodierung statt base64?
SVG ist bereits Text. Prozentcodierung vermeidet eine base64-Schicht, lässt nicht reservierte Zeichen lesbar und erzeugt eine standardkonforme Bild-URI.
Kann ich das Ergebnis direkt in CSS url() einfügen?
Ja. Anführungszeichen, Klammern, Leerzeichen, Rauten und andere empfindliche Zeichen der SVG-Nutzdaten werden codiert.
Optimiert oder bereinigt der Konverter das SVG?
Nein. Er prüft die XML-Struktur und codiert das ursprüngliche Markup, ohne Metadaten, Skripte, externe Referenzen oder redundante Pfade zu entfernen.
Warum wird mein SVG abgelehnt?
Weil der Code nicht wohlgeformt ist. Ein Tag ist nicht geschlossen oder falsch verschachtelt, ein Attribut steht ohne Anführungszeichen oder doppelt, ein Kommentar bleibt offen, eine Entität ist ungültig, oder Text oder ein zweites Element steht außerhalb der svg-Wurzel.
Wann ist eine Daten-URI für ein SVG ungeeignet?
Wenn das Bild groß ist oder an vielen Stellen vorkommt. Eine Daten-URI wiederholt alle ihre Bytes überall, wo sie steht, deshalb eignet sie sich eher für kleine Icons, Abzeichen und Schmuckgrafiken als für große Illustrationen.
Verwandte Tools
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
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-to-data-uri \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"}'const res = await fetch("https://api.kit.forhosting.com/web/svg-to-data-uri", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/svg-to-data-uri",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/svg-to-data-uri", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"svg":"<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\"><path fill=\\"#0a7\\" d=\\"M2 2h20v20H2z\\"/></svg>"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/svg-to-data-uri", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.svg_to_data_uri",
"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
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
Die Prüfung findet vor der Umwandlung statt
Schlägt die Prüfung fehl, liefert die Anfrage einen Fehler <code>invalid_input</code> mit einer Beschreibung des Problems statt einer Daten-URI.
Technische Fragen
Was kostet die Umwandlung über die API?
Jede API-Anfrage kostet $0.002. Die Browser-Version kann lokal auf dieser Seite ausgeführt werden.
Was geschieht bei nicht wohlgeformtem XML?
Die Umwandlung wird beendet und ein invalid_input-Fehler beschreibt den Mangel. Eine teilweise URI wird nicht ausgegeben.