SVG-URL-Encoder
Wandle SVG-Markup in eine CSS-fertige Data-URI um und dekodiere Data-URIs zurück zu SVG.
Verwandte Tools
SVG-URL-Encoder
Füge ein SVG ein und erhalte eine Data-URI, die du direkt in CSS einsetzt, bereit für background-image oder eine Maske. Statt base64 nutzt der Encoder den kompakten URL-Encoding-Ansatz: Er ersetzt doppelte Anführungszeichen durch einfache, fasst Leerraum zusammen und kodiert nur die Zeichen, die es wirklich brauchen. So bleibt das Ergebnis kurz und lesbar, dein Stylesheet leichter als ein base64-Block, und du erkennst die Formen in der URI noch.
Drei Ausgabeformate decken die üblichen Fälle ab. Die CSS-Regel umschließt die Data-URI mit background-image: url("…"); sodass du eine ganze Deklaration einfügst. Die reine Data-URI liefert nur den Wert für eine Custom Property, ein <img>-src oder eine SVG-Maske. Die base64-Form erzeugt eine UTF-8-sichere data:image/svg+xml;base64-URI für Tools oder Build-Schritte, die diese Kodierung erwarten, einschließlich SVGs mit Emoji oder akzentuierten Textknoten.
Stelle die Richtung auf Dekodieren, und das Tool wandelt jede der drei Formen zurück in rohes SVG-Markup. Füge eine CSS-Regel, eine reine Data-URI oder eine base64-URI ein, und es extrahiert das SVG, sodass du ein Icon bearbeitest, das nur im Stylesheet existiert. Die Zählung zeigt Eingabegröße, Ausgabegröße und prozentuale Änderung, sodass du auf einen Blick siehst, ob die Kodierung das Icon verkleinert oder vergrößert hat.
Alles läuft in deinem Browser. Dein SVG-Markup wird nie hochgeladen, du kannst also private Icons, Logos und interne Assets kodieren, ohne dass sie dein Gerät verlassen.