SVG zu Data-URI (CSS und HTML)
Wandle SVG-Code in eine optimierte Data-URI für CSS (background-image, mask) und HTML um, mit kürzerer URL-Kodierung als Base64 und Bildvorschau.
So geht’sFüge den SVG-Code ein.
Verfügbar auf: 
SVG zu Data-URI (CSS und HTML): wofür es gut ist
Füge den SVG-Code ein und wähle das Ausgabeformat. Das Tool entfernt überflüssige Leerzeichen, tauscht Anführungszeichen und kodiert nur die nötigen Zeichen, erzeugt eine Data-URI, die kleiner als Base64 ist, und zeigt die Bildvorschau und die Endgröße.
So geht’s
- Füge den SVG-Code ein.
- Wähle CSS, Data-URI, img oder Base64.
- Kopiere das Ergebnis.
Wann nutzen
- Icons ohne zusätzliche Dateien ins CSS einbetten.
- SVG in mask-image nutzen.
- Anfragen der Seite reduzieren.
Häufige Fragen
Warum nicht Base64 nutzen?
Bei SVG ergibt die URL-Kodierung meist ein kleineres Ergebnis als Base64, weil SVG schon Text ist. Nur die Sonderzeichen, wie <, >, # und Anführungszeichen, müssen kodiert werden.
Wie nutze ich es im CSS?
Kopiere das Ergebnis im Format background-image: url("data:image/svg+xml,..."). Es funktioniert auch in mask-image, list-style-image und im src-Attribut eines img-Tags.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.