SVG in Data-URI umwandeln

Nein. Die Umwandlung läuft vollständig in deinem Browser. Die Datei verlässt dein Gerät nicht – es gibt keinen Server, der sie sehen könnte. Sobald die Seite geladen ist, funktioniert das Werkzeug sogar offline.

Minimal, ausser ein Werkzeug besteht auf Base64. Das SVG bleibt lesbar, Leerraum wird zusammengefasst, doppelte Anführungszeichen werden zu einfachen, und nur die Zeichen, die ein CSS-url(«…») stören, werden prozentkodiert: %, #, <, > und geschweifte Klammern. Das ist rund ein Drittel kleiner als Base64 und lässt sich zudem besser komprimieren. Base64 ist unleserlich, funktioniert aber überall, auch in alten E-Mail-Programmen.

In CSS: background-image: url("data:image/svg+xml,…"); oder als mask-image. In HTML: <img src="data:…">. Setze die URL in doppelte Anführungszeichen – die minimale Form nutzt innen absichtlich einfache. Das Werkzeug «SVG in CSS-Hintergrund» schreibt dir die komplette Regel.

XML-Prolog, Kommentare und DOCTYPE entfallen – in einer Data-URL bedeuten sie nichts –, und ausser du schaltest «Zuerst optimieren» aus, wird das SVG mit demselben Optimierer wie bei «SVG optimieren» minifiziert. Skripte und externe Verweise werden immer entfernt.

Bei grossen Grafiken. Ein eingebettetes SVG wird mit jedem Stylesheet oder jeder Seite geladen, die es enthält, und kann nicht eigenständig zwischengespeichert werden. Data-URIs lohnen sich für kleine Icons von wenigen Kilobyte; grosse Illustrationen verlinkst du besser als Datei.