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.

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.

SVG Werkzeuge

Vorschau anzeigen, mit SVGO optimieren, Daten exportieren URI, Größe ändern, verschönern, in JSX konvertieren und SVG validieren – alles in Ihrem Browser.

Weitere Werkzeugkategorien entdecken

Minimieren

Verkleinern Sie Code und Ressourcen für die Produktion – minimieren Sie JavaScript, CSS, HTML, JSON und XML vor der Bereitstellung von gzip oder CDN.

Verschönern

Machen Sie Code mit konsistenter Einrückung lesbar – verschönern Sie JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML und mehr in Ihrem Browser.

Aufheben

Erweitern Sie minimierten oder komprimierten Code – entminifizieren Sie JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML und andere Formate beim Debuggen oder Überprüfen.

Konvertierung

Transformieren Sie Daten zwischen JSON, YAML, XML und CSV lokal – keine Server-Uploads.

CSS-Präprozessoren

Kompilieren Sie SCSS oder LESS zu Standard-CSS im Browser — kombinieren Sie mit Beautify oder Minify für einen vollständigen Stylesheet-Workflow.

JSON Werkzeuge

Validieren, formatieren, vergleichen und erkunden Sie JSON-Nutzlasten – ergänzend zu Minifiern und Konvertern.

DevOps und Infrastruktur

Terraform HCL formatieren/validieren/minimieren, Dockerfile formatieren und lint, Docker Verfassen und .env-Validierung.

CI/CD

GitHub Aktionen und GitLab CI – formatieren Sie YAML und überprüfen Sie die Workflow-/Auftragsstruktur in Ihrem Browser.

Protokolle und Beobachtbarkeit

Zeilenorientierte JSON/NDJSON- und Nginx/Apache-Zugriffsprotokolle – formatieren, filtern, validieren und CSV/TSV.

Kubernetes

Multi-Doc-Manifeste, strukturelle Validierung, Ingress/Deployment-Starter und Helm-Werteformatierung.

Netzwerk / IP

CIDR, Subnetze und IPv4/IPv6-Helfer — im Browser.

Sicherheit und Token

JWKS, X.509-Zertifikate und Secrets-Scan – browserlokal.

API & Schemata

OpenAPI Tools zum Formatieren, Validieren und Flusen Ihrer Spezifikationen.

Codierung

Kodieren oder dekodieren Sie Base64-, URL-Komponenten und HTML-Entitäten – nur clientseitig.

Entwickler-Dienstprogramme

Zeitstempel, UUID, ULID, Nanoid, Cron, Passwörter, Regex, Slugify, Zahlenbasen, Groß-/Kleinschreibung, Textunterschied und chmod – alles clientseitig.

Text & Markdown

Wörter zählen, Markdown-TOC erzeugen und Zeilenlisten bereinigen — im Browser.

Serialisierung

Serialisieren und deserialisieren Sie PHP-Datenstrukturen neben JSON-Workflows.