Aller au contenu
Tout en local

Générateur d'images de remplissage

Générez une image SVG de remplissage avec une taille, des couleurs et une étiquette personnalisées — en tant que SVG, data: URI ou balise <img>.

0
Sortie

Générateur d'images de remplissage

Choisissez une largeur et une hauteur — ou un rapport d'aspect courant comme 16:9 ou 4:3 — et cet outil dessine une image de remplissage instantanément, prête à déposer dans une maquette, un schéma ou un espace dans votre balisage où l'élément réel n'est pas encore prêt. Il s'affiche en SVG, de sorte que la boîte reste nette à n'importe quelle taille et s'adapte sans image raster floue en dessous.

Définissez une couleur de fond et de texte, et laissez l'étiquette par défaut être les dimensions rendues (comme "800×600") ou tapez votre propre légende — un nom de composant, un point d'arrêt, tout ce qui vous aide à distinguer un espace réservé d'un autre pendant que vous construisez. La famille de polices et la taille sont également ajustables, et arrondir les coins ou superposer une grille ou une croix diagonale donne à la boîte l'aspect familier de "ceci est un espace réservé" au lieu d'un simple rectangle gris.

Choisissez comment le résultat apparaît : balisage SVG brut à enregistrer sous forme de fichier, un data: URI codé en pourcentage ou un data: URI base64 pour un arrière-plan CSS ou une source d'image en ligne, ou une balise img complète que vous pouvez coller directement dans le HTML. Les très grandes dimensions ou une étiquette déraisonnablement longue sont limitées plutôt que d'être autorisées à geler l'onglet ou de produire quelque chose que personne ne pourrait utiliser.

Tout est dessiné localement dans votre navigateur au moment où vous modifiez une option — aucune image n'est générée sur un serveur et rien de ce que vous tapez n'est téléchargé nulle part. Copiez le résultat, téléchargez-le sous forme de fichier .txt ou envoyez-le directement à un autre outil tel que l'encodeur d'URL SVG ou le convertisseur de couleurs.

FAQ

L'image est-elle mise à jour au fur et à mesure que je modifie les options?
Oui. L'aperçu se régénère en direct lorsque vous ajustez la largeur, la hauteur, les couleurs, l'étiquette ou toute autre option.
Puis-je utiliser la sortie directement comme source d'image?
Oui. Choisissez le format data: URI ou base64 et collez le résultat directement dans un <img src="…"> ou un background-image CSS.
Que se passe-t-il si je définis à la fois un rapport d'aspect et une hauteur?
Le rapport d'aspect gagne : la hauteur est recalculée à partir de la largeur pour que l'image conserve exactement ce rapport.
Y a-t-il une limite de taille?
La largeur et la hauteur sont limitées à 4000px chacune, et une étiquette personnalisée extrêmement longue est rejetée avec un message vous demandant de la raccourcir, de sorte que l'outil ne tente jamais de créer une image inutilisablement grande.
Mes données sont-elles chargées quelque part?
Non. L'image d'espace réservé est générée entièrement dans votre navigateur — rien n'est envoyé à un serveur.