Générateur de ViewBox SVG

Contrôlez précisément la mise à l'échelle et l'affichage de vos graphiques SVG en ajustant l'attribut viewBox. Le viewBox définit le système de coordonnées et le ratio d'aspect de vos graphiques vectoriels — bien le configurer garantit une mise à l'échelle parfaite quelle que soit la taille.

Comprendre les coordonnées viewBox

L'attribut viewBox contient quatre valeurs : minX, minY, largeur et hauteur. Elles définissent la zone visible du canevas SVG. Des valeurs incorrectes provoquent des graphiques étirés, rognés ou mal positionnés. Cet outil vous permet d'ajuster chaque valeur avec un retour visuel en temps réel.

Aperçu visuel pour plus de précision

Observez instantanément l'effet des changements de coordonnées sur votre SVG. Cette approche visuelle élimine les approximations lors du calibrage des valeurs viewBox. Si le contenu semble rogné, augmentez la largeur et la hauteur. Si le positionnement est incorrect, ajustez minX et minY.

Rembourrage pour l'aération

Ajoutez de l'espace autour du contenu sans modifier manuellement les coordonnées. Le rembourrage agrandit le viewBox de façon uniforme, permettant à vos graphiques de respirer plutôt que d'être collés aux bords.

Génération instantanée du code

Une fois les valeurs ajustées, copiez l'attribut viewBox prêt à l'emploi directement dans votre code SVG. Finis les calculs manuels ou les essais-erreurs dans l'éditeur de code.

Quand utiliser ce générateur

Lors de l'exportation de SVG depuis Figma, Illustrator ou Inkscape, le viewBox peut ne pas correspondre à l'espace visuel souhaité. Si vos icônes apparaissent tronquées, s'il y a des espaces blancs indésirables ou si le SVG ne se met pas à l'échelle correctement, ce générateur vous aide à corriger cela de façon visuelle.