SVG zu Daten URI Online – CSS Hintergrundgenerator

Konvertieren Sie rohes SVG-Markup in kompakte Daten URI, die Sie in CSS Hintergrundbild oder inline HTML einfügen können. Läuft lokal in Ihrem Browser.

0 chars · 0 B

Codierung

Teilen Sie dieses Tool:

SVG Eingang

Daten URI

Die Kodierung läuft lokal in Ihrem Browser.

Laden…

SVG zu Daten URI – CSS Einbettungs-Playbook

Verwandeln Sie SVG-Markup in ein Daten-URI für CSS-Hintergründe, Pseudoelemente oder Inline-HTML, wenn der Versand eines separaten Assets übertrieben wäre.

Hinweise des Entwicklers

• Analysiert einen einzelnen Stamm <svg> und normalisiert das Markup vor der Codierung. • Ideal für in CSS eingebettete Symbole, Abzeichen und kleine Illustrationen. • Behalten Sie größere Grafiken beim Caching als eigenständige Dateien bei. • Für kleinere Datenmengen URIs zuerst mit „optimize-svg“ koppeln.

Optionen

Codierung

UTF-8 (Standard) erzeugt ein lesbares Datenbild/svg+xml, URL-codiertes URI. Base64 verwendet data:image/svg+xml;base64 für Tools oder Browser, die Base64 erwarten. Das CSS-Hintergrund-Snippet folgt der gleichen Kodierung.

Wenn Teams diese Route wählen

• Kleine Logos in das CSS-Hintergrundbild einbetten. • Versenden Sie dekorative Symbole ohne eine weitere Netzwerkanfrage. • Erstellen Sie Pseudoelement-Badges in Komponentenbibliotheken. • Vergleichen Sie die codierte Ausgabe nach der SVGO-Bereinigung.

Ausgearbeitete Beispiele

Abzeichen bereit für die CSS-Einbettung

Beispieleingabe

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" class="promo-badge" role="img" aria-labelledby="badge-title badge-desc">
  <title id="badge-title">Schnelllieferungsabzeichen</title>
  <desc id="badge-desc">Abgerundetes Abzeichen mit Blitzsymbol und Hintergrund mit Farbverlauf.</desc>
  <defs>
    <linearGradient id="badgeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f97316"/>
      <stop offset="100%" stop-color="#fb923c"/>
    </linearGradient>
  </defs>
  <rect width="240" height="72" rx="18" fill="url(#badgeGradient)"/>
  <text x="76" y="31" font-size="18" font-weight="700" fill="#fff">FastMinify</text>
</svg>

Ausgabe

Hintergrundbild: url("data:image/svg+xml,%3Csvg ... %3C/svg%3E");
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: enthalten;

Zuerst optimieren, dann kodieren

Beispieleingabe

<svg viewBox="0 0 24 24"><!-- comment --><path fill="currentColor" d="M12 2l3 7h7l-5.5 4 2 7L12 17l-6.5 3 2-7L2 9h7z"/></svg>

Ausgabe

Ein kleineres Markup führt zu kürzeren Daten URI, die einfacher in CSS einzubetten sind.

Navigieren Sie durch verwandte SVG-Tools

Verkleinern Sie zuerst die Quelle mit optimize SVG, prüfen Sie die Größe auf resize SVG oder durchsuchen Sie den SVG Tools Hub.

SVG zu Daten URI FAQ

Kodierung für CSS-Hintergründe

Wann sollte ich ein Daten-URI verwenden?

Verwenden Sie es für kleine UI-Assets, bei denen die Reduzierung von Anforderungen wichtiger ist als das Zwischenspeichern von Dateien.

Sollte ich zuerst den SVG optimieren?

Ja – ein kleineres Quell-Markup führt zu einem kürzeren URI und einem leichteren CSS.

Lädt es mein SVG hoch?

Nein. Das Parsen und Kodieren erfolgt lokal in Ihrem Browser.

Weitere SVG-Tools

SVG minimieren SVG optimieren SVG BetrachterSVG zu Daten URIVerschönern SVG SVG aufheben SVG zu JSX Größe ändern SVG SVG validieren

Suchen Sie nach Konvertern, Encodern, Formatierern und Minifiern an einem Ort? Hub für Entwicklertools Öffnen Sie den kuratierten Entwicklertools-Katalog.