SVG-URL-Encoder
Wandle SVG-Markup in eine CSS-fertige Data-URI um und dekodiere Data-URIs zurück zu SVG.
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. Die Option MIME-Typ öffnet denselben Encoder für beliebige Inhalte: Wähle text/plain, text/html, text/css, application/json oder einen anderen Typ, und das Eingefügte wird zu einer Data-URI dieses Typs. Nur bei image/svg+xml werden Leerraum zusammengefasst und doppelte Anführungszeichen durch einfache ersetzt — beides kürzt Markup, zerstört aber reinen Text und JSON. Nicht-Bildtypen lassen außerdem das background-image weg und liefern ein blankes url("…").
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. Die URI kommt auf Wunsch auch in einem HTML-<img>- oder <link>-Tag, mit ausdrücklichem Zeichensatz im Kopf.
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.