SVG de remplacement aux dimensions voulues

Designers et développeurs peuvent produire une image de remplacement lorsqu’une maquette exige un SVG aux dimensions précisément prévues.

Générez un SVG aux dimensions voulues pour disposer d’une image de remplacement adaptée à l’espace que vous devez matérialiser.

Mode d’emploi

Saisissez la largeur souhaitée sur la première ligne du champ, puis la hauteur sur la deuxième.
Ajoutez, si vous le voulez, un texte facultatif sur la troisième ligne : il apparaîtra dans l'image générée.
Lancez la génération pour obtenir le SVG aux dimensions demandées.
Copiez le code obtenu dans la zone de résultat et collez-le dans votre page ou votre maquette.
Modifiez les valeurs et relancez la génération autant de fois que nécessaire.

Exemple

L'exemple fourni demande une largeur de 600, une hauteur de 400 et le texte Bannière. Après génération, vérifiez que le code obtenu est bien du SVG et que les dimensions annoncées correspondent à celles demandées, car ce sont elles qui décident de la place occupée dans la mise en page.

Entrée

600
400
Bannière

Résultat

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400" role="img" aria-label="Bannière"><rect width="600" height="400" fill="#e4ebef"/><path d="M0 0L600 400M600 0L0 400" stroke="#c3d0d8" stroke-width="1" fill="none"/><text x="300" y="200" fill="#5b7280" font-family="sans-serif" font-size="67" text-anchor="middle" dominant-baseline="middle">Bannière</text></svg>

--- en source d image …

Limites et formats

Le résultat est un dessin vectoriel, pas une photo : il convient aux maquettes plutôt qu'à un visuel définitif.
L'image ne contient que ce que vous demandez, soit les dimensions et éventuellement un texte.
Utilisez des nombres entiers et positifs pour la largeur comme pour la hauteur.
Regardez le rendu dans votre navigateur avant d'intégrer le code à une page en ligne.

Où le traitement a lieu

L'image vectorielle est décrite et assemblée par la page, dans votre navigateur, à partir des dimensions et du texte que vous fournissez. Aucun fichier n'est téléversé et rien n'est transmis au moment de la génération. Le code obtenu reste à l'écran jusqu'à ce que vous l'effaciez ou quittiez la page.

Questions fréquentes

À quoi sert une image de remplacement dans une maquette ?

Elle matérialise l'emplacement réservé à un visuel qui n'est pas encore disponible. Vous voyez tout de suite si la mise en page tient debout et si les proportions prévues sont réalistes, sans attendre la photo définitive.

Que contient exactement le SVG produit ?

Le fichier décrit un cadre aux dimensions demandées, avec le texte que vous avez saisi s'il y en a un. Rien d'autre n'est ajouté, donc vous savez précisément ce que contient le code avant de le coller ailleurs.

Puis-je le laisser sur un site en production ?

Mieux vaut le réserver aux maquettes et aux tests, car il signale une image manquante. Remplacez-le par le visuel définitif avant de publier la page, sinon vos visiteurs verront un cadre de remplacement.