jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

Bilder-, SVG- & Asset-Tools

Kostenlose SVG-zu-CSS-Daten-URI-Konverter

Konvertieren Sie SVG-Markup in CSS-Daten-URIs. URL-kodierte und Base64-Optionen mit Live-Vorschau.

Tool wird geladen...

Was ist SVG-zu-CSS-Daten-URI-Konverter?

Der Konverter wandelt rohes SVG-Markup in Daten-URIs fuer CSS und HTML um. URL-Kodierung produziert kompaktere Ausgabe, Base64 ist fuer problematische Zeichen geeignet.

Kurze Antwort

SVG-Markup in CSS-kompatible Daten-URIs umwandeln. URL-kodiert oder Base64. background-image, mask, img src oder rohe Daten-URI.

Last updated: 2026-06-09

Einschränkungen

  • Daten-URIs ueber 4KB aus Leistungsgruenden vermeiden.
  • Keine SVG-Syntaxvalidierung. Ungueltiges SVG produziert ungueltige Daten-URIs.
  • Browserunterschiede bei mask-image und clip-path mit Daten-URIs.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Fuegen Sie SVG-Markup in den Eingabebereich ein.
  2. Waehlen Sie URL-Kodierung (empfohlen) oder Base64.
  3. Waehlen Sie das Ausgabeformat: CSS background-image, mask, img src oder rohe Daten-URI.
  4. Kopieren Sie den generierten Code in Ihr Stylesheet oder HTML.

Wofür du es nutzen kannst

  • SVG-Icons direkt in CSS background-image einbetten, um HTTP-Anfragen zu reduzieren.
  • SVG-Daten-URIs in CSS mask-image fuer benutzerdefinierte Masken verwenden.
  • Kleine SVGs in HTML img-Tags fuer eigenstaendige E-Mail-Vorlagen einbetten.

Anwendungsfalle

Praxisbeispiele

Beispiel

CSS-Sprite-freie Icons

Ein Entwickler bettet 10 SVG-Icons als Daten-URIs direkt in das Stylesheet ein und spart HTTP-Anfragen.

Beispiel

Eigenstaendige E-Mail-Signatur

Ein Designer konvertiert ein Logo-SVG in eine Base64-Daten-URI fuer eine vollstaendig eigenstaendige Signatur.

Haufige Fehler

  • Base64 unnoetig verwenden. URL-Kodierung ist meist kompakter.
  • Leerraum vor der Kodierung nicht entfernen. Das vergroessert die URI.
  • Daten-URIs fuer grosse SVGs verwenden. Ueber 2-4KB die CSS-Datei unnietig aufblaehen.

Überprüfung

  1. Einen SVG-Kreis konvertieren und die Darstellung ueberpruefen.
  2. Base64- und URL-Kodierung vergleichen. Die Darstellung sollte identisch sein.

FAQ

Fragen zu SVG-zu-CSS-Daten-URI-Konverter

Welche Kodierung ist besser?

URL-Kodierung. Sie ist etwa 10-20% kompakter und lesbar.

Funktioniert das in allen Browsern?

Ja, in allen modernen Browsern (Chrome, Firefox, Safari, Edge).

Daten-URIs in inline-Style-Attributen?

Ja, aber auf Anfuerungszeichen achten.

Maximale Groesse?

Aus Leistungsgruenden unter 2KB halten.

Verwandte Tools

Weitere bilder-, svg- & asset-tools

Auch ausprobieren

Auch ausprobieren

CSS- & Design-Tools

CSS-Karussell-Generator

Erstellen Sie natives CSS-Karussell-Markup mit Scroll-Snap, Scroll-Schaltflächen, Scroll-Markierungen und zugänglicher Listenstruktur. Kein JavaScript erforderlich.

Tool öffnen

CSS- & Design-Tools

CSS-Scroll-State-Query-Generator

Erstellen Sie CSS-scroll-state()-Container-Queries für eingerastete, fixierte oder scrollbare Elemente. Enthält einen JavaScript-Fallback für browserübergreifende Unterstützung.

Tool öffnen