SVG-zu-CSS-Data-URI-Konverter
Fügen Sie rohes SVG-Markup ein, um eine URL-kodierte Daten-URI zu erhalten, die Sie direkt in ein CSS-background-image einfügen können, plus eine Live-Vorschau des gerenderten SVG.
Live-Vorschau
Ihre SVG-Vorschau wird hier angezeigt
Daten-URI
CSS-Schnipsel
Häufig gestellte Fragen
Warum eine Daten-URI statt einer externen SVG-Datei verwenden?
Eine Daten-URI bettet das SVG direkt in Ihr CSS oder HTML ein und spart eine zusätzliche HTTP-Anfrage. Besonders praktisch für kleine Icons, die rein als background-image verwendet werden, wo alles in einem Stylesheet zu halten einfacher ist als eine separate Asset-Datei zu verwalten.
Warum ist es URL-kodiert statt base64?
URL-kodierte SVG-Daten-URIs sind in der Regel kleiner als das base64-Äquivalent und bleiben menschenlesbar, was sie leichter zu überprüfen oder direkt in Ihrem CSS anzupassen macht. Browser unterstützen beides, dieses Tool nutzt die kompaktere, lesbarere Option.
Ist es sicher, SVG aus einer nicht vertrauenswürdigen Quelle einzufügen?
Die Vorschau rendert Ihr SVG als '<img>', nicht als aktives HTML eingefügt, sodass eingebettete Skripte in einem bösartigen SVG in der Vorschau nicht ausgeführt werden. Behandeln Sie SVG-Dateien dennoch wie jede andere Datei und fügen Sie nur Markup ein, dem Sie vertrauen.