SVG-Platzhalter-Generator

Wie der SVG-Platzhalter-Generator funktioniert

Was das Tool macht

Der SVG-Platzhalter-Generator erstellt leichte Vektor-Platzhalterbilder mit benutzerdefinierten Abmessungen, Hintergrundfarben, Text-Overlays und Schriftarteinstellungen. Er gibt das SVG-Markup direkt sowie als Base64-Data-URI aus, bereit zum Einbetten in HTML oder CSS. Da SVG auflösungsunabhängig ist und typischerweise unter 1 KB liegt, laden diese Platzhalter sofort ohne Netzwerkanfragen.

Häufige Anwendungsfälle für Entwickler

Frontend-Entwickler verwenden SVG-Platzhalter beim Prototyping, um Layoutplatz zu reservieren, bevor echte Bilder verfügbar sind, und so Cumulative Layout Shift (CLS) zu vermeiden. Sie sind nützlich in Designsystemen für Avatar-Fallbacks, Thumbnail-Skeletons und responsive Bildcontainer. E-Mail-Entwickler betten Data-URI-Platzhalter in HTML-Templates ein, bei denen das Laden externer Bilder von E-Mail-Clients blockiert werden kann.

Datenformate, Typen oder Varianten

Die Ausgabe ist ein standardkonformes SVG-1.1-Dokument, das ein gefülltes Rechteck und ein zentriertes Textelement enthält. Die Data-URI-Variante kodiert dieses SVG als Base64-String mit dem Präfix 'data:image/svg+xml;base64,' zur direkten Verwendung in img-src-Attributen, CSS-background-image-Eigenschaften oder Inline-HTML. Die Abmessungen werden in Pixeln angegeben, aber das SVG skaliert ohne Pixelbildung auf jede Containergröße, da es ein Vektorformat ist.

Häufige Fallstricke und Sonderfälle

Data-URIs werden von Browsern nicht unabhängig vom Dokument, in das sie eingebettet sind, zwischengespeichert. Daher erhöht die Verwendung desselben Platzhalters auf vielen Seiten die gesamte Übertragungsgröße im Vergleich zu einer einzelnen zwischengespeicherten externen Datei. Sehr lange Textbeschriftungen können die SVG-viewBox überlaufen lassen, wenn die Abmessungen klein sind. Einige ältere E-Mail-Clients unterstützen keine SVG-Data-URIs und fallen auf ein defektes Bildsymbol zurück. Content-Security-Policy-(CSP)-Header können Inline-Data-URIs blockieren, wenn 'data:' nicht in img-src enthalten ist.

Wann dieses Tool statt Code verwenden

Nutze dieses Browser-Tool, um während Wireframing oder Prototyping schnell einmalige Platzhalterbilder zu erzeugen, ohne Build-Abhängigkeiten hinzuzufügen. Für die dynamische Platzhaltererzeugung in Produktion (z. B. als Fallback für vom Nutzer hochgeladene Bilder) verwende serverseitiges SVG-Templating oder dedizierte Dienste wie plaiceholder, die sich in deine Bildoptimierungs-Pipeline integrieren und aus echten Bildern verschwommene Low-Quality-Image-Placeholders (LQIP) erzeugen können.