Créez une image placeholder sous forme de data URI SVG. Choisissez la taille, les couleurs et le libellé, puis copiez le markup, la data URI ou une balise img prête à l'emploi. Aucune requête, aucun service externe.
Des images placeholder sans aucune requête attachée. Réglez les dimensions, les couleurs et le libellé, puis copiez le SVG brut, une data URI ou une balise img complète. Rien n'est récupéré, donc le placeholder fonctionne hors ligne et dans un fichier de conception.
Vide revient à la largeur et à la hauteur, ce que la plupart des placeholders veulent.
Aperçu
Pourquoi un SVG intégré bat un service de placeholder
Une data URI n'est pas une requête réseau
Les services de placeholder sont pratiques jusqu'au moment où ils ne le sont plus : le domaine vous limite en débit, le proxy de l'entreprise le bloque, vous faites une démo dans un avion, ou le service modifie discrètement sa sortie et la moitié de vos maquettes change. Chacun de ces échecs est causé par la même chose - le placeholder vit sur le serveur de quelqu'un d'autre.
Une data URI SVG n'a pas une telle dépendance. L'image entière est une chaîne dans votre markup, donc elle s'affiche de façon identique hors ligne, dans un client e-mail, dans un export statique et dans une capture prise trois ans plus tard. Elle ne coûte rien non plus en latence : pas de recherche DNS, pas de connexion, pas d'aller-retour. Pour une page avec vingt placeholders pendant le développement, la différence est très perceptible.
Préférez l'encodage URL plutôt que base64
La data URI émise par cet outil est encodée en pourcentage, pas en base64. Les deux sont valides, mais l'encodage en pourcentage est le meilleur défaut pour SVG pour deux raisons.
La première est la taille. Base64 gonfle la charge d'environ un tiers, tandis que l'encodage en pourcentage n'étend que la poignée de caractères qui ont réellement besoin d'échappement, donc pour SVG - qui est principalement de l'ASCII pur - il finit généralement plus court. La seconde est la lisibilité : vous pouvez regarder un SVG encodé en pourcentage dans votre feuille de style et reconnaître ce que c'est, ajuster une couleur, ou repérer une faute de frappe. Un blob base64 doit être décodé avant de signifier quoi que ce soit.
La seule chose à laquelle l'encodage en pourcentage doit prêter attention est l'apostrophe simple, c'est pourquoi elle est échappée explicitement ici : les valeurs CSS url() sont généralement entourées de guillemets simples, et une apostrophe non échappée dans le SVG terminerait la valeur prématurément.
Dimensionnement, mise à l'échelle et le viewBox
Le SVG généré porte à la fois des attributs de largeur et de hauteur explicites et un viewBox correspondant. Cette combinaison est délibérée. La largeur et la hauteur donnent au navigateur une taille intrinsèque afin que la mise en page ne saute pas avant que l'image soit disposée, et le viewBox permet à la même image de s'adapter proprement à toute taille que vous fixez en CSS.
Comme il est vectoriel, le libellé reste net à toute échelle - pas de texte flou sur un affichage haute densité, pas d'asset 2x séparé. Si vous voulez que le placeholder remplisse son conteneur, définissez width: 100%; height: auto en CSS et le viewBox préservera le ratio pour vous. Si vous voulez une boîte fixe quelle que soit le ratio, conservez les attributs tels que générés et le navigateur les respectera.
Foire aux questions
Pourquoi le libellé est-il par défaut les dimensions ?
Parce que c'est généralement ce qu'un placeholder communique : la taille de l'emplacement. Laisser le champ vide affiche un texte de style « 600x350 », et taper quoi que ce soit le remplace.
Puis-je utiliser la data URI en CSS ?
Oui. Insérez-la dans `background-image: url('...')`. Les guillemets simples à l'intérieur du SVG sont échappés précisément pour ce cas, donc la valeur ne se terminera pas prématurément.
Le texte s'adaptera-t-il à l'image ?
Oui. Le SVG possède un viewBox, donc toute la graphique incluant le texte s'adapte proportionnellement quand vous le redimensionnez en CSS. La taille de police choisie est relative au viewBox, pas aux pixels rendus.
Le base64 est-il disponible à la place ?
Pas avec cet outil, volontairement. L'encodage en pourcentage est généralement plus court pour SVG et reste lisible par un humain, ce qui facilite l'ajustement d'une couleur plus tard sans régénérer.
Les couleurs nommées fonctionnent-elles, ou seulement le hex ?
Les deux. Toute couleur nommée CSS comme `tomato` ou `slategray` est acceptée dans le champ texte, avec les valeurs hexadécimales à 3, 6 et 8 chiffres.
Le placeholder fonctionne-t-il dans les e-mails ?
La prise en charge de SVG dans les clients e-mail est inégale - Gmail en particulier le supprime. Pour l'e-mail, rendez le SVG en PNG d'abord. Pour le web, les applications et les outils de conception, la data URI convient.