SVG zu Base64 & Data URI
Bette SVGs direkt in CSS oder HTML ein. Erhalte URL-kodierte und Base64-Data-URIs, fertige CSS-Snippets und ein <img>-Tag.
- Keine Uploads
- Funktioniert offline
- Kostenlos, ohne Anmeldung
- Dateien verlassen nie deinen Browser
SVG-Dateien hier ablegen
oder SVG-Code in den Editor einfügen. Du kannst mehrere Dateien gleichzeitig öffnen.
Dein SVG bleibt auf diesem Gerät. Nichts wird hochgeladen.
Anleitung: SVG-zu-Base64-/Data-URI-Konverter
- 1
SVG einfügen
Füge SVG-Code ein oder lege eine Datei ab. Du kannst auch eine vorhandene Data URI einfügen, um sie wieder in SVG zu dekodieren.
- 2
Ausgabe wählen
Wähle eine URL-kodierte Data URI (meist am kleinsten), Base64, CSS-Hintergrund, CSS-Maske oder ein HTML-<img>-Tag.
- 3
Kopieren
Kopiere das Snippet in dein Stylesheet oder deinen HTML-Code. Die Größe jeder Option steht daneben.
Wann du ein SVG als Data URI einbetten solltest
Eine Data URI packt das ganze Bild in dein CSS oder HTML, sodass der Browser keine separate Anfrage dafür stellt. Das eignet sich für kleine, häufig genutzte Grafiken: Icons in CSS, eigene Checkboxen und Auswahlpfeile, Hintergrundmuster und Platzhalter.
Für große Illustrationen ist eine separate .svg-Datei meist besser: Der Browser kann sie eigenständig cachen, und sie bläht dein Stylesheet nicht auf.
URL-kodiertes SVG oder Base64?
Base64 macht aus je 3 Bytes 4 Zeichen und vergrößert die Datei damit immer um etwa 33 %. Ein URL-kodiertes SVG maskiert nur die wenigen Zeichen, die in einer URL unsicher sind (<, >, #, % und Anführungszeichen). Es bleibt lesbar und ist meist kleiner, besonders nach gzip. viewsvg zeigt beide mit ihrer Größe an, damit du wählen kannst.
Alles, was du für die Arbeit mit SVG brauchst
SVG-zu-Base64-/Data-URI-Konverter ist Teil eines Arbeitsbereichs zum Ansehen, Bearbeiten, Optimieren und Konvertieren von SVG-Dateien – ohne Anmeldung, ohne Werbung, ohne Uploads.
Sofortige Vorschau
Zoom bis 6400 %, verschieben, an den Bildschirm anpassen und dein SVG auf transparentem, weißem, schwarzem oder beliebigem Hintergrund prüfen.
Live-Code-Editor
Syntaxhervorhebung, Fehlermarkierungen pro Zeile, Formatieren und Minifizieren, Suche und vollständiger Rückgängig-Verlauf.
Kontur & Pixelraster
Sieh jeden Pfad im Konturmodus und prüfe beim Hineinzoomen die Pixelausrichtung mit dem Raster.
Prüfen
Datei- und gzip-Größe, viewBox, Elementbaum mit Hervorhebung beim Überfahren und Farbersetzung per Klick.
Mit SVGO optimieren
Dateien verkleinern mit Vorher-Nachher-Vorschau und einstellbarer Genauigkeit. Alle geöffneten Dateien auf einmal optimieren.
PNG, JPG, WebP & ICO
In jeder Größe bis 16384 px exportieren, mit Transparenz, oder das PNG direkt in die Zwischenablage kopieren.
React, Vue & Svelte
Saubere JSX/TSX-, React-Native-, Vue- und Svelte-Komponenten mit Unterstützung für currentColor und Props.
Viele Dateien auf einmal
Öffne viele SVGs als Tabs, optimiere sie gesammelt oder lade sie als ZIP mit SVGs oder PNGs herunter.
Privat & offline
Keine Uploads, kein Konto. Deine Arbeit wird im Browser gespeichert, und die App funktioniert nach dem ersten Besuch offline.
Häufige Fragen
Base64 oder URL-kodierte Data URIs für SVG?
Für SVG ist eine URL-kodierte Data URI meist 20–30 % kleiner als Base64 und lässt sich mit gzip besser komprimieren. Base64 ist praktisch, wo Sonderzeichen Probleme machen.
Wie färbe ich ein SVG-Icon in CSS um?
Nutze das CSS-Masken-Snippet. Das SVG wird zur Maske, die mit der background-color des Elements (standardmäßig currentColor) gefüllt wird – so änderst du die Icon-Farbe per CSS.
Kann ich eine Data URI zurück in SVG umwandeln?
Ja. Füge eine data:image/svg+xml-URI oder einen reinen Base64-String in den Editor ein, und viewsvg dekodiert ihn automatisch zu SVG.
Werden meine SVG-Dateien irgendwo hochgeladen?
Nein. viewsvg läuft komplett in deinem Browser. Dateien werden auf deinem Gerät gelesen, angezeigt, optimiert und konvertiert, und nichts wird an einen Server gesendet. Nach dem ersten Besuch funktioniert es sogar offline.
Ist viewsvg kostenlos?
Ja. Alle Funktionen sind kostenlos, ohne Anmeldung, ohne Wasserzeichen und ohne Dateilimit.