Tools
SVG Platzhalter-Generator
Der SVG Platzhalter-Generator erstellt individuelle Platzhalterbilder direkt im Browser – ohne externe Dienste. Größe, Hintergrundfarbe, Textfarbe, Schriftgröße und optionaler Text können frei konfiguriert werden. Das Ergebnis steht sofort als SVG-Code, Data-URL oder HTML-img-Tag zur Verfügung und ist damit ideal für UI-Prototypen, Mockups und Testdaten.
Was ist der SVG Platzhalter-Generator?
In der Webentwicklung werden Platzhalterbilder während der Prototyp- und Entwicklungsphase eingesetzt, bevor die eigentlichen Bilder verfügbar sind. Der SVG Platzhalter-Generator erzeugt skalierbare Vektorgrafiken (SVG) als Platzhalter mit konfigurierbaren Dimensionen, Farben und Beschriftungen. SVG-Platzhalter haben gegenüber Rastergrafik-Platzhaltern (PNG/JPEG) den Vorteil, dass sie pixelperfekt in jeder Auflösung dargestellt werden – auch auf Retina-Displays – und als Data-URL direkt in HTML oder CSS eingebettet werden können.
Wie funktioniert das Tool?
Das Tool generiert SVG-Code clientseitig auf Basis der eingegebenen Parameter: Breite, Höhe, Hintergrundfarbe, Textfarbe, Schriftgröße und optionalen Beschriftungstext. Standardmäßig zeigt der Platzhalter die Dimensionen als Text an (z. B. '400×300'). Die Ausgabe ist in mehreren Formaten verfügbar: als reiner SVG-Code zum Einbetten, als Data-URL für das src-Attribut eines img-Tags, als fertiger HTML-img-Tag und als direkter Download der .svg-Datei.
Typische Anwendungsfälle
- Einfügen von Platzhalterbildern in HTML-Mockups ohne externe Bild-CDNs
- Generieren von Thumbnail-Platzhaltern für Galerie-Layouts in verschiedenen Größen
- Erstellen von benutzerdefinierten Platzhaltern mit Produktnamen oder Kategoriebezeichnungen
- Testen von responsive Bildlayouts durch schnelles Anpassen der Platzhaltergrößen
Schritt-für-Schritt-Anleitung
- Schritt 1: Gib Breite und Höhe des Platzhalterbilds in Pixel ein.
- Schritt 2: Wähle Hintergrundfarbe und Textfarbe über den Farbwähler.
- Schritt 3: Passe den angezeigten Text an (Standard: Bildabmessungen) oder lasse ihn leer.
- Schritt 4: Kopiere den SVG-Code, die Data-URL oder den img-Tag für dein Projekt.
Beispiel
Eingabe
Breite: 400, Höhe: 300, Hintergrund: #cccccc, Text: Produktbild
Ausgabe
<img src="data:image/svg+xml,..." width="400" height="300" alt="Produktbild">
Tipps & Hinweise
- Nutze Data-URLs für kleine Platzhalter – sie benötigen keinen separaten HTTP-Request und können direkt in HTML eingebettet werden.
- Für Responsive-Designs empfiehlt sich die Angabe von Seitenverhältnissen (z. B. 16:9) statt absoluter Pixel, da SVGs ohne Qualitätsverlust skalieren.
- Füge Kategorie- oder Slot-Namen als Platzhaltertext ein (z. B. 'Header-Bild 1920×600'), um Mockups für Kollegen verständlicher zu gestalten.
Häufige Fragen
Was ist der Unterschied zwischen SVG-Platzhaltern und externen Diensten wie picsum.photos?
Externe Dienste liefern echte Fotos als Platzhalter und erfordern eine Internetverbindung. SVG-Platzhalter dieses Tools werden lokal generiert, sind immer verfügbar, haben keine Abhängigkeit zu Drittdiensten und können vollständig angepasst werden.
Kann ich die SVG-Platzhalter in E-Mails verwenden?
Data-URLs werden von den meisten E-Mail-Clients nicht unterstützt. Für E-Mails sollte die SVG-Datei hochgeladen und per absoluter URL eingebunden werden. Beachte auch, dass manche E-Mail-Clients SVG generell blockieren.
Werden die generierten SVGs gecacht?
Nein, jede Konfiguration erzeugt einen neuen SVG-Code direkt im Browser. Es gibt keine Serverseite, die SVGs cached oder speichert.
SVG Platzhalter-Generator
Erstelle SVG-Platzhalterbilder für deine Anwendungen – mit anpassbarer Größe, Farben, Text und Stil. Als SVG herunterladen oder Data-URI kopieren.
Tool öffnen