SVG-placeholdergenerator

Hoe de SVG-placeholdergenerator werkt

Wat de tool doet

De SVG-placeholdergenerator maakt lichtgewicht vector-placeholderafbeeldingen met aangepaste afmetingen, achtergrondkleuren, tekstoverlays en lettertype-instellingen. Hij geeft de SVG-markup direct uit en als een Base64 data URI die klaar is om in HTML of CSS te embedden. Omdat SVG resolutie-onafhankelijk is en doorgaans onder 1KB blijft, laden deze placeholders direct zonder netwerkrequests.

Veelvoorkomende use-cases voor ontwikkelaars

Frontendontwikkelaars gebruiken SVG-placeholders tijdens prototyping om lay-outruimte te reserveren voordat echte afbeeldingen beschikbaar zijn, waardoor cumulative layout shift (CLS) wordt voorkomen. Ze zijn nuttig in design systems voor avatar-fallbacks, thumbnail-skeletons en responsive image containers. E-mailontwikkelaars embedden data URI-placeholders in HTML-templates waar het laden van externe afbeeldingen door e-mailclients kan worden geblokkeerd.

Gegevensformaten, typen of varianten

De output is een standaard SVG 1.1-document met een gevuld rechthoek en een gecentreerd tekstelement. De data URI-variant codeert deze SVG als een Base64-string met als prefix 'data:image/svg+xml;base64,' voor direct gebruik in img src-attributen, CSS background-image-eigenschappen of inline HTML. Afmetingen worden in pixels opgegeven, maar de SVG schaalt naar elke containergrootte zonder pixelvorming, omdat het een vectorformaat is.

Veelvoorkomende valkuilen en edge-cases

Data-URI's worden door browsers niet onafhankelijk van het document waarin ze zijn ingesloten gecachet, dus het gebruik van dezelfde placeholder op veel pagina's vergroot de totale overdrachtsgrootte vergeleken met één extern bestand dat wél gecachet wordt. Zeer lange tekstlabels kunnen buiten de SVG-viewBox vallen als de afmetingen klein zijn. Sommige oudere e-mailclients ondersteunen geen SVG-data-URI's en vallen terug op een pictogram voor een kapotte afbeelding. Content Security Policy (CSP)-headers kunnen inline data-URI's blokkeren als 'data:' niet is opgenomen in img-src.

Wanneer je deze tool gebruikt vs code

Gebruik deze browsertool om tijdens wireframing of prototyping snel eenmalige placeholderafbeeldingen te genereren zonder build-afhankelijkheden toe te voegen. Voor dynamische placeholdergeneratie in productie (bijv. fallbacks voor door gebruikers geüploade afbeeldingen) gebruik je server-side SVG-templating of gespecialiseerde diensten zoals plaiceholder die integreren met je image-optimization-pipeline en vervaagde low-quality image placeholders (LQIP) kunnen genereren op basis van echte afbeeldingen.