SVGView

SVG zu Data URI Konverter

Erstellen Sie kompakte Data URIs für Inline-SVG in CSS oder HTML. Perfekt für kleine Assets und schnelle Einbettungen. Öffnen Sie SVG-Dateien online und konvertieren Sie sofort.

SVG-Datei per Drag-and-drop hinzufügen

oder klicken, um zu suchen, oder SVG-Code einfügen

Nur .svg-Dateien
SVG-Code mit Ctrl+V / Cmd+V einfügen

Warum unseren SVG zu Data URI Konverter verwenden?

Base64 und URL-Kodierung zur Auswahl

Mit SVG zu Data URI können Sie zwischen Base64 und URL-kodierter Ausgabe je nach Kompatibilität und Größe wählen. Base64 ist sicher für jeden Kontext, während URL-Kodierung einfache SVGs kürzer und leichter lesbar in Diffs hält.

Kopierbereite Data URI Ausgabe

SVG zu Data URI formatiert eine sofort verwendbare data:image/svg+xml Zeichenkette und bietet Klick-zum-Kopieren. Es escaped Zeichen wie #, % und Anführungszeichen, damit die Ausgabe in HTML-Attributen, CSS oder JSON ohne manuelle Bereinigung funktioniert.

Überall einbetten

Die Ausgabe funktioniert in img src, CSS background-image, Inline-Stilen oder Style-Blöcken in E-Mails. Inline-Assets vermeiden zusätzliche Anfragen und helfen, kleine UI-Elemente mit minimalem Overhead einzubinden.

Kürzere Zeichenketten mit sauberem SVG

SVG zu Data URI funktioniert gut mit optimierten SVGs für kurze Ausgabe. Entfernen Sie Metadaten, vereinfachen Sie Pfade und entfernen Sie unbenannte IDs, damit die endgültige Zeichenkette kompakt und lesbar in Code-Reviews bleibt. Kürzere Zeichenketten sind einfacher in Konfigurationsdateien zu speichern und reduzieren Zeilenumbrüche.

Lokale, private Verarbeitung

SVG zu Data URI läuft vollständig im Browser, sodass Dateien nie Ihr Gerät verlassen. Das ist sicher für Kundenprojekte, interne Icons und Assets, die nicht auf externe Server hochgeladen werden können.

Schnelle Iteration für Teams

Dieses Tool ist schnell genug für schnelle Iteration: einfügen, konvertieren, kopieren und UI aktualisieren. Es passt zu Design-System-Workflows, Dokumentationsseiten und Prototyping-Sessions, wo Geschwindigkeit wichtig ist.

SVG zu Data URI konvertieren

1

SVG hinzufügen

Datei per Drag & Drop hinzufügen oder SVG-Markup einfügen. SVG zu Data URI lädt die Quelle lokal und bewahrt viewBox, IDs und Farben für präzise Ausgabe. Öffnen Sie SVG-Dateien online und konvertieren Sie sofort.

2

Kodierung wählen

Wählen Sie Base64 für maximale Kompatibilität oder URL-Kodierung für kürzere, lesbare Zeichenketten. SVG zu Data URI aktualisiert die Ausgabe sofort, damit Sie die Längen vor dem Kopieren vergleichen können.

3

Kopieren und einbetten

Kopieren Sie das Ergebnis und fügen Sie es in HTML, CSS oder JSON ein. SVG zu Data URI Zeichenketten sind bereit für img src, background-image oder Inline-Style-Attribute.

SVG Data URI FAQ

Was ist ein SVG Data URI und wann sollte ich es verwenden?
SVG zu Data URI bettet das SVG direkt in eine URL-Zeichenkette ein, sodass Sie es inline ohne Hosting einer separaten Datei verwenden können. Das ist nützlich für Icons, kleine Illustrationen und E-Mail-Vorlagen, wo externe Anfragen eingeschränkt sind.
SVG zu Data URI: Base64 oder URL-kodiert, wie wähle ich?
SVG zu Data URI unterstützt beides. Base64 ist die sicherste Wahl für alle Kontexte, während URL-Kodierung oft kürzer für einfache Formen ist und einfacher in der Quellcodeverwaltung zu bearbeiten oder zu diffen.
Funktioniert SVG Data URI in CSS background-image?
Ja. SVG zu Data URI gibt eine data:image/svg+xml Zeichenkette aus, die in background-image: url(...) verwendet werden kann. Das ist ein gängiges Muster für Muster, Icons und dekorative UI-Assets.
Ist die Konvertierung privat?
SVG zu Data URI läuft lokal in Ihrem Browser, sodass Assets nie Ihr Gerät verlassen. Das hält proprietäre Logos oder Kunden-Icons sicher und ermöglicht Nutzung in abgeschlossenen Netzwerken.
Wie groß kann das SVG sein?
SVG zu Data URI kann Dateien bis zu 10MB verarbeiten. Sehr große SVGs erzeugen lange Zeichenketten, daher ist Optimierung oder Verwendung einer externen Datei möglicherweise praktischer.
Sollte ich vor der Konvertierung optimieren?
Ja. SVG zu Data URI Ergebnisse sind kürzer und zuverlässiger, wenn das SVG optimiert ist. Entfernen Sie unnötige Metadaten und Leerzeichen, um HTML oder CSS kompakt zu halten.
Werden Farben und viewBox beibehalten?
SVG zu Data URI behält viewBox, Fills, Strokes und IDs intakt, sodass die gerenderte Ausgabe der Quelle entspricht. Wenn Sie sich auf currentColor oder CSS-Variablen verlassen, behalten Sie diese im SVG vor der Konvertierung.
Ist SVG zu Data URI Konverter kostenlos und ohne Download nutzbar?
Ja. SVG zu Data URI Konverter ist kostenlos in Ihrem Browser nutzbar. Keine Downloads oder Installation erforderlich.
Brauche ich ein Konto, um SVG zu Data URI Konverter zu nutzen?
Nein. SVG zu Data URI Konverter funktioniert sofort im Browser ohne Anmeldung, und Dateien bleiben lokal.

Verwandte SVG-Tools

Kombinieren Sie SVG zu Data URI mit diesen Tools zum Vorschauen, Optimieren oder Konvertieren von Assets vor dem Einbetten. Eine saubere Quelle ergibt kürzere, zuverlässigere Zeichenketten.

SVG Viewer

Vorschau der Quelle vor SVG zu Data URI, um Größen, Farben und viewBox-Einstellungen zu bestätigen.

Tool öffnen

SVG Optimizer

Führen Sie SVG Optimizer vor SVG zu Data URI aus, um Markup zu verkleinern und die endgültige Zeichenkette kompakt zu halten.

Tool öffnen

SVG zu CSS Background

Verwenden Sie SVG zu CSS Background, wenn Sie wiederverwendbare CSS-Snippets für Verläufe, Masks oder Icons benötigen.

Tool öffnen

SVG zu PNG

Verwenden Sie SVG zu PNG, wenn SVG zu Data URI zu lang ist und Sie ein Raster-Fallback für Legacy-Kontexte benötigen.

Tool öffnen

SVG zu React

Konvertieren Sie nach dem Testen in Komponenten, um Liefermethoden in Ihrer App zu vergleichen.

Tool öffnen