SVG zu CSS-Hintergrund-Konverter Codieren Sie SVG-Code als CSS-Hintergrundbild mithilfe der Data-URI-Codierung.

🎨

SVG zu CSS-Hintergrund

Codieren Sie SVG-Code als CSS-Hintergrundbild mithilfe der Data-URI-Codierung.

Fügen Sie SVG-Code ein

Geben oder fügen Sie Ihren SVG-Markup in das Eingabefeld ein.

Hintergrund-Eigenschaften festlegen

Konfigurieren Sie die Hintergrundgröße, Wiederholung und Positionseinstellungen.

Den CSS-Code kopieren

Vorschau des SVG als Hintergrund anzeigen und den CSS-Code kopieren.

Loading tool...

What Is SVG zu CSS-Hintergrund?

Das Tool SVG zu CSS-Hintergrund konvertiert SVG-Code in ein CSS-Hintergrundbild mithilfe der Data-URI-Kodierung. Diese Technik integriert SVG direkt in Ihren CSS-Code, ohne dass separate Bilddateien oder HTTP-Anfragen erforderlich sind. Fügen Sie einfach Ihren SVG-Code hinzu, konfigurieren Sie die Hintergrundgröße, -wiederholung und -position und das Tool generiert den kodierten CSS-Code. Die Data-URI-Kodierung ersetzt Sonderzeichen (wie <, >, #) durch URL-sichere Äquivalente, sodass das SVG sicher in einer CSS url()-Funktion eingebettet werden kann. Der Vorschaubereich zeigt das SVG als Hintergrund auf einem Beispiel-Element an. Dieser Ansatz ist ideal für kleine Symbole, Muster und dekorative Elemente, die Sie ohne externe Dateiabhängigkeiten in Ihren CSS einbeziehen möchten.

Why Use SVG zu CSS-Hintergrund?

Keine separaten Bilddateien erforderlich - SVG direkt in CSS eingebettet
Eliminiert HTTP-Anfragen für kleine SVG-Assets
Konfigurierbare Hintergrundgröße, Wiederholung und Position
Live-Vorschau zeigt das SVG als CSS-Hintergrund an

Common Use Cases

Symbolhintergründe

Embedden Sie kleine Symbol-SVGs direkt in CSS für Schaltflächen und Listenmarker.

Musterhintergründe

Kodieren Sie wiederholte SVG-Muster als CSS-Hintergründe ohne Bilddateien.

Dekorative Elemente

Fügen Sie SVG-Dekorationen zu Pseudo-Elementen über CSS-Hintergründe hinzu.

E-Mail-Vorlagen

Embedden Sie SVG-Grafiken in CSS für E-Mail-Vorlagen, bei denen externe Bilder blockiert werden können.

Technical Guide

SVG-Daten-URIs verwenden das Format: url("data:image/svg+xml,<kodiertes-svg>"). Der SVG-Inhalt wird durch Ersetzen von Sonderzeichen URL-kodiert: < wird zu %3C, > wird zu %3E, # wird zu %23 und Anführungszeichen werden in einfache Anführungszeichen umgewandelt. Diese Kodierung ist effizienter als Base64 für SVG, da sie die Lesbarkeit beibehält und normalerweise kleiner ist. Die Eigenschaft background-image akzeptiert die Daten-URI und Standard-Hintergrundeigenschaften (Größe, Wiederholung, Position) steuern die Darstellung. Für große SVGs sollten Sie stattdessen externe Dateien verwenden, da große Daten-URIs die Größe der CSS-Datei erhöhen und nicht unabhängig zwischengespeichert werden können. Die Hintergrundgröße 'contain' skaliert das SVG, um es innerhalb des Elements zu platzieren, während das Seitenverhältnis beibehalten wird. Die Hintergrundgröße 'cover' füllt das Element, wodurch das SVG möglicherweise beschnitten wird. Spezifische Pixel- oder Prozentswerte bieten präzise Kontrolle.

Tips & Best Practices

1
Verwenden Sie URL-Codierung (nicht Base64) für eine kleinere Dateigröße mit SVG
2
Entfernen Sie unnötige SVG-Attribute, um die codierte Größe zu minimieren
3
Halten Sie SVGs klein - große Daten-URIs blähen CSS auf und können nicht separat zwischengespeichert werden
4
Verwenden Sie einfache Anführungszeichen in SVG, um Probleme mit der Escapesequenz in CSS zu vermeiden

Related Tools

CSS-Hintergrundmuster

Erstellen Sie wiederholende CSS-Hintergrundmuster, einschließlich Streifen, Schachbrettmustern, Punkten und mehr.

🎨 CSS & Design

Symbol Suche

Suchen und anpassen Sie Open-Source-SVG-Symbole mit veränderbarer Größe, Farbe und Strichstärke.

🎨 CSS & Design

CSS-Variable-Generator

Erstellen Sie benutzerdefinierte CSS-Eigenschaften (Variablen) für Farben, Abstände und Typografie.

🎨 CSS & Design

SVG-Muster-Generator

Erstellen Sie SVG-basierte sich wiederholende Muster für CSS-Hintergründe mit verschiedenen Formen.

🎨 CSS & Design

Frequently Asked Questions

Q Ist die Daten-URI-Codierung besser als Base64 für SVG?

Ja, URL-codierte SVG ist typischerweise kleiner als Base64 und bleibt im CSS lesbar.

Q Kann ich jedes SVG verwenden?

Ja, jeder gültige SVG-Code kann codiert werden. Entfernen Sie unnötige Attribute und Leerzeichen für eine optimale Größe.

Q Funktioniert dies in allen Browsern?

Ja, SVG-Daten-URIs in CSS-Hintergründen werden in allen modernen Browsern unterstützt.

Q Was ist mit großen SVGs?

Für große oder komplexe SVGs sollten Sie stattdessen externe SVG-Dateien verwenden. Daten-URIs können nicht unabhängig vom CSS zwischengespeichert werden.

Q Kann ich Daten-URI-SVGs in <img>-Tags verwenden?

Ja, das gleiche Daten-URI-Format funktioniert in img-src-Attributen und CSS-Hintergrundbildern.

About This Tool

SVG zu CSS-Hintergrund is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.