Toolipedia Einbetten
DE
← Alle Text-Tools

SVG zu Data-URI

Einen SVG-Code in einen Data-URI für CSS-Hintergründe oder <img>-Tags umwandeln.

  • Kostenlos
  • Ohne Anmeldung
  • Funktioniert auf jedem Gerät

Über SVG zu Data-URI

Wandeln Sie ein SVG in eine Data-URI um, die Sie in einem CSS-background-image oder im src eines img verwenden können, um eine zusätzliche Dateianfrage zu vermeiden. URL-kodiertes SVG ist meist kleiner als Base64, das etwa ein Drittel hinzufügt. Kleine Symbole eignen sich gut zum Inlining, große Bilder sind als separate, zwischenspeicherbare Dateien besser.

So verwenden Sie SVG zu Data-URI

  1. Füge deinen SVG-Code ein.
  2. Wähle die Kodierung und den Ausgabetyp, etwa CSS-Hintergrund oder img src.
  3. Kopiere den Data-URI in dein Stylesheet oder HTML.

Warum dieses Tool?

Auch bekannt als

Häufig gestellte Fragen

Ist Base64 oder URL-kodiertes SVG kleiner?

URL-kodiert ist meist kleiner, da Base64 die Daten um etwa 33 Prozent aufbläht. Base64 ist in manchen alten Tools dennoch sicherer.

Warum funktioniert mein Data-URI in CSS nicht?

Anführungszeichen im SVG können mit den Anführungszeichen um die URL kollidieren. Nutze die CSS-Ausgabeoption, die das Quoting für dich übernimmt.

Kann ich die Farbe eines als Data-URI genutzten SVG ändern?

Nicht mit CSS-color, da das Bild als Grafik behandelt wird. Ändere die Füllung im SVG, bevor du es codierst.

Ist SVG zu Data-URI kostenlos?

Ja. SVG zu Data-URI auf Toolipedia ist kostenlos nutzbar, ohne Anmeldung und ohne Wasserzeichen.

Ist die Nutzung sicher?

Ja. Alles wird in Ihrem Browser berechnet, und nichts von Ihren Eingaben wird an unseren Server gesendet.

Funktioniert es auf meinem Smartphone?

Ja. Es funktioniert in jedem modernen Browser auf Android und iPhone sowie auf Tablets und Computern. Sie müssen nichts installieren.

Brauche ich ein Konto?

Nein. Öffnen Sie einfach die Seite und nutzen Sie das Tool. Keine Anmeldung, keine E-Mail-Adresse nötig.

Kann ich SVG zu Data-URI auf meiner eigenen Website einsetzen?

Ja. Nutze unter dem Tool die Schaltfläche „Auf deiner Website einbetten“, um ein kurzes Stück Code zu kopieren und in deine Seite einzufügen. Es ist kostenlos, braucht kein Konto, und das Tool funktioniert weiter innerhalb deiner Seite.

Ähnliche Tools