T
Tooltastic
SVG Platzhalter Generator – Eigene SVG-Bilder online erstellen | Tooltastic
SVG Platzhalter Generator

SVG Platzhalter Generator

Eigene SVG-Platzhalterbilder erstellen — beliebige Größe, Farbe und Text.

Sofortige Vorschau Base64-Export 100% Lokal
Einstellungen
Live-Vorschau
SVG Placeholder Preview

× px  · 

SVG-HTML-Element
SVG als Base64

Was sind SVG-Platzhalter?

SVG-Platzhalter sind leichtgewichtige Vektorbilder, die während der Entwicklung verwendet werden, um Inhaltsbereiche darzustellen, bevor echte Bilder verfügbar sind. Da sie als SVG (XML-basiert) generiert werden, skalieren sie bei jeder Auflösung perfekt, haben winzige Dateigrößen und können direkt in HTML oder CSS ohne HTTP-Anfragen eingebettet werden.

SVG als Base64-Data-URL

Ein Base64-kodiertes SVG kann direkt als `src`-Attributwert in `<img>`-Tags oder als CSS-`background-image` verwendet werden – ohne separate Datei-Anfrage. Das Format `data:image/svg+xml;base64,...` wird von allen modernen Browsern unterstützt und eignet sich ideal zum Einbetten von Platzhaltern inline.

Typische Anwendungsfälle

SVG-Platzhalter werden als Standard-Bilder in `<img src="">`-Attributen, CSS-Hintergründe für nicht geladene Inhalte, Design-Mockups zur Darstellung von Bildbereichen und Lazy-Loading-Indikatoren eingesetzt. Sie werden auch in E-Mail-Vorlagen und Dokumentations-Screenshots verwendet, um saubere, einheitliche Layouts zu erstellen.

Häufig gestellte Fragen

Alles, was Sie über SVG-Platzhalterbilder wissen müssen

Das SVG-HTML-Element ist der rohe SVG-Code, den Sie direkt in HTML einfügen können. Die Base64-Version ist dasselbe SVG, kodiert als Data-URI, die in `src`- oder `background-image`-Attributen verwendet werden kann. Beide werden identisch dargestellt. Verwenden Sie rohes SVG für Inline-Einbettung und Base64 für Attribute oder CSS.

Wenn aktiviert, enthält das SVG explizite `width`- und `height`-Attribute, sodass es genau in den angegebenen Pixelabmessungen gerendert wird. Wenn deaktiviert, wird nur `viewBox` gesetzt – das SVG wird responsiv und skaliert auf seinen Container. Für die meisten Platzhalter-Anwendungsfälle wird die exakte Größe empfohlen.

Ja, SVG-Platzhalter sind leichtgewichtig und funktionieren in allen Browsern. Sie werden jedoch typischerweise während der Entwicklung eingesetzt. In der Produktion sollten Sie erwägen, sie durch echte Bilder zu ersetzen. Wenn Sie einen dauerhaften Platzhalter-Dienst benötigen, sind selbst gehostete SVGs besser als externe Dienste, die ausfallen könnten.

Kopieren Sie die Base64-Data-URL und verwenden Sie sie in CSS: `background-image: url("data:image/svg+xml;base64,...")`. Sie können auch das rohe SVG durch URL-Kodierung verwenden: `background-image: url("data:image/svg+xml,<svg...>")`. Die Base64-Version ist sicherer, da URL-Kodierung in älteren Browsern zu Problemen führen kann.

Dieser Generator unterstützt Abmessungen bis zu 4000×4000 px. Da SVGs Vektordateien sind, nimmt die tatsächliche Dateigröße bei größeren Abmessungen kaum zu – das SVG für einen 4000×4000 px Platzhalter ist von der Dateigröße her nahezu identisch mit einem 100×100 px großen. Nur die gerenderte Ausgabe ändert sich.