Générateur d'images d'espace réservé SVG

Cet outil prend en charge la personnalisation de la taille, du texte et de la couleur de premier plan (arrière-plan) des images SVG. L'image d'espace réservé SVG générée peut être directement référencée via l'URL, ou le SVG peut être enregistré localement pour être utilisé dans d'autres scènes.

Largeur(px)

Hauteur(px)

Couleur avant-plan

Hex

Alpha

Couleur de fond

Hex

Alpha

SVG HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 350" width="600" height="350">
  <rect width="600" height="350" fill="#cccccc"></rect>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="monospace" font-size="26px" fill="#333333">600*350</text>   
</svg>

SVG Base64

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgMzUwIiB3aWR0aD0iNjAwIiBoZWlnaHQ9IjM1MCI+CiAgPHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSIzNTAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj42MDAqMzUwPC90ZXh0PiAgIAo8L3N2Zz4=

Preview

Qu'est-ce qu'un placeholder?

Placeholder, également appelé PlaceHolder en anglais, est généralement utilisé dans des scénarios où un contenu réel n'est pas requis mais que sa position doit être conservée, par exemple: espaces réservés pour le texte, espaces réservés pour les images. Cet outil fournit la fonction de génération d'images de placeholder. L'image de placeholder générée est au format SVG. Le processus de génération de SVG est terminé sur le client (navigateur), ce qui est extrêmement rapide, c'est pourquoi cet outil est également appelé outil de placeholder SVG.
Le placeholder est principalement utilisé dans la conception de prototypes de page Web (APP), la présentation PPT, les instructions d'exploitation et autres scénarios. La signification transmise est: quel type d'image sera placée ici et la taille est xxx pixels. Dans les scénarios ci-dessus, l'utilisation de placeholders peut éviter le coût de temps de recherche d'images à chaque fois.