Générateur de placeholders SVG

Comment fonctionne le générateur de placeholders SVG

Ce que fait l’outil

Le générateur de placeholders SVG crée des images de substitution vectorielles légères avec des dimensions personnalisées, des couleurs d’arrière-plan, des superpositions de texte et des paramètres de police. Il produit le balisage SVG directement ainsi qu’une URI de données Base64 prête à être intégrée dans du HTML ou du CSS. Comme le SVG est indépendant de la résolution et généralement inférieur à 1 Ko, ces placeholders se chargent instantanément sans requêtes réseau.

Cas d’usage courants pour les développeurs

Les développeurs frontend utilisent des placeholders SVG pendant le prototypage pour réserver de l’espace dans la mise en page avant que les vraies images ne soient disponibles, évitant le décalage cumulatif de mise en page (CLS). Ils sont utiles dans les design systems pour les avatars de secours, les squelettes de vignettes et les conteneurs d’images responsives. Les développeurs email intègrent des placeholders en URI de données dans des modèles HTML lorsque le chargement d’images externes peut être bloqué par les clients de messagerie.

Formats de données, types ou variantes

La sortie est un document SVG 1.1 standard contenant un rectangle rempli et un élément de texte centré. La variante en URI de données encode ce SVG sous forme de chaîne Base64 préfixée par 'data:image/svg+xml;base64,' pour une utilisation directe dans des attributs img src, des propriétés CSS background-image ou du HTML inline. Les dimensions sont spécifiées en pixels, mais le SVG s’adapte à toute taille de conteneur sans pixellisation puisqu’il s’agit d’un format vectoriel.

Pièges courants et cas limites

Les URI de données ne sont pas mises en cache par les navigateurs indépendamment du document dans lequel elles sont intégrées ; ainsi, utiliser le même placeholder sur de nombreuses pages augmente la taille totale des transferts par rapport à un unique fichier externe mis en cache. Des libellés de texte très longs peuvent déborder de la viewBox SVG si les dimensions sont petites. Certains clients e-mail plus anciens ne prennent pas en charge les URI de données SVG et reviennent à une icône d’image cassée. Les en-têtes Content Security Policy (CSP) peuvent bloquer les URI de données inline si 'data:' n’est pas inclus dans img-src.

Quand utiliser cet outil plutôt que du code

Utilisez cet outil de navigateur pour générer rapidement des images placeholder ponctuelles lors de la création de wireframes ou de prototypes, sans ajouter de dépendances de build. Pour la génération dynamique de placeholders en production (p. ex., des images de remplacement pour des images téléversées par les utilisateurs), utilisez un templating SVG côté serveur ou des services dédiés comme plaiceholder, qui s’intègrent à votre pipeline d’optimisation d’images et peuvent générer des placeholders d’image floutés de faible qualité (LQIP) à partir d’images réelles.