Erstelle ein Platzhalterbild als SVG-Data-URI. Wähle Größe, Farben und Beschriftung, dann kopiere das Markup, den Data-URI oder einen fertigen img-Tag. Keine Anfragen, kein externer Dienst.
Platzhalterbilder ohne dazugehörige Anfrage. Setze die Maße, Farben und Beschriftung und kopiere das rohe SVG, einen Data-URI oder einen kompletten img-Tag. Es wird nichts abgerufen, sodass der Platzhalter offline und in einer Design-Datei funktioniert.
Leer fällt auf Breite und Höhe zurück, was die meisten Platzhalter wollen.
Vorschau
Warum ein inline SVG besser ist als ein Platzhalterdienst
Ein Data-URI ist keine Netzwerkanfrage
Platzhalterdienste sind praktisch — bis sie es nicht mehr sind: die Domain begrenzt dich per Ratenlimit, der Büro-Proxy blockiert sie, du demonstrierst im Flugzeug, oder der Dienst ändert leise seine Ausgabe und die Hälfte deiner Mockups verschiebt sich. Jeder dieser Fehler wird vom selben verursacht — der Platzhalter liegt auf dem Server von jemand anderem.
Ein SVG-Data-URI hat keine solche Abhängigkeit. Das ganze Bild ist ein String in deinem Markup, sodass es identisch offline, in einem E-Mail-Client, in einem statischen Export und in einem Screenshot gerendert wird, der in drei Jahren aufgenommen wurde. Es kostet auch nichts an Latenz: kein DNS-Lookup, keine Verbindung, kein Round-Trip. Für eine Seite mit zwanzig Platzhaltern während der Entwicklung ist dieser Unterschied sehr spürbar.
Lieber URL-codiert statt base64
Der Data-URI, den dieses Werkzeug ausgibt, ist prozent-codiert, nicht base64. Beide sind gültig, aber Prozent-Codierung ist die bessere Voreinstellung für SVG aus zwei Gründen.
Der erste ist die Größe. Base64 bläht die Nutzlast um etwa ein Drittel auf, während Prozent-Codierung nur die Handvoll Zeichen erweitert, die tatsächlich Escape brauchen, sodass es für SVG — das meist einfaches ASCII ist — meist kürzer endet. Der zweite ist Lesbarkeit: du kannst ein prozent-codiertes SVG in deinem Stylesheet ansehen und trotzdem erkennen, was es ist, eine Farbe anpassen oder einen Tippfehler finden. Ein base64-Blob muss erst decodiert werden, bevor er etwas bedeutet.
Das eine, worauf man bei Prozent-Codierung achten muss, ist das einfache Anführungszeichen, weshalb es hier explizit escaped wird: CSS-url()-Werte werden üblicherweise in einfache Anführungszeichen eingeschlossen, und ein nicht escapetes Apostroph im SVG würde den Wert vorzeitig beenden.
Größe, Skalierung und die viewBox
Das generierte SVG trägt sowohl explizite Breiten- und Höhenattribute als auch eine passende viewBox. Diese Kombination ist absichtlich. Die Breite und Höhe geben dem Browser eine intrinsische Größe, sodass das Layout nicht springt, bevor das Bild angeordnet ist, und die viewBox lässt dasselbe Bild sauber auf jede Größe skalieren, die du in CSS setzt.
Weil es Vektor ist, bleibt die Beschriftung in jeder Skalierung scharf — kein unscharfer Text auf einem High-DPI-Display, kein separates 2x-Asset. Wenn du willst, dass der Platzhalter seinen Container füllt, setze width: 100%; height: auto in CSS, und die viewBox erhält das Seitenverhältnis für dich. Wenn du eine feste Box unabhängig vom Seitenverhältnis willst, behalte die Attribute wie generiert, und der Browser wird sie respektieren.
Häufig gestellte Fragen
Warum fällt die Beschriftung standardmäßig auf die Maße?
Weil das meist das ist, was ein Platzhalter kommuniziert: wie groß der Slot ist. Das Feld leer zu lassen zeigt „600x350"-artigen Text, und Tippen von etwas ersetzt ihn.
Kann ich den Data-URI in CSS verwenden?
Ja. Setze ihn in `background-image: url('...')`. Einfache Anführungszeichen im SVG sind genau für diesen Fall escaped, sodass der Wert nicht vorzeitig endet.
Skaliert der Text mit dem Bild?
Ja. Das SVG hat eine viewBox, sodass die ganze Grafik einschließlich Text proportional skaliert, wenn du sie mit CSS vergrößerst oder verkleinerst. Die gewählte Schriftgröße bezieht sich auf die viewBox, nicht auf die gerenderten Pixel.
Ist base64 stattdessen verfügbar?
Nicht von diesem Werkzeug, bewusst. Prozent-Codierung ist für SVG meist kürzer und bleibt lesbar, was späteres Anpassen einer Farbe ohne Neugenerierung erleichtert.
Funktionieren benannte Farben oder nur hex?
Beides. Jede CSS-benannte Farbe wie `tomato` oder `slategray` wird im Textfeld akzeptiert, ebenso 3-, 6- und 8-stellige hex-Werte.
Funktioniert der Platzhalter in E-Mails?
Die Unterstützung für SVG in E-Mail-Clients ist lückenhaft — Gmail streicht es besonders. Für E-Mail rendere das SVG zuerst in ein PNG. Für Web, Apps und Designtools ist der Data-URI in Ordnung.