SVG viewBox – mettre à l'échelle, recadrer et ajuster

SVG viewBox

L’attribut viewBox indique à SVG quel rectangle de coordonnées doit être ajusté au viewport visible. En changeant ses quatre valeurs, vous pouvez mettre le dessin à l’échelle, le recadrer, déplacer la zone visible ou rendre le même SVG responsive.

Ce guide pratique suppose que vous connaissez déjà canvas, viewport et système de coordonnées. Sinon, commencez par Systèmes de coordonnées et unités SVG.

Dans cet article, vous apprendrez à :

• Lire viewBox="min-x min-y width height".
• Mettre à l’échelle le dessin en changeant width et height du viewBox.
• Recadrer ou repositionner avec min-x et min-y.
• Combiner viewBox avec preserveAspectRatio.

Fonctionnement de viewBox

viewBox définit un système de coordonnées utilisateur pour le viewport SVG :

viewBox="min-x min-y width height"

Valeur	Signification
min-x	Coordonnée X où commence le rectangle visible
min-y	Coordonnée Y où commence le rectangle visible
width	Largeur du rectangle de coordonnées visible
height	Hauteur du rectangle de coordonnées visible

Le viewport est la zone de sortie. Le viewBox est le rectangle de coordonnées que SVG adapte à cette zone. Un viewBox plus petit est agrandi; un viewBox plus grand rend le contenu visuellement plus petit.

SVG d'exemple utilisé dans l'article

Les exemples utilisent le même dessin SVG; seule la valeur viewBox change, afin de montrer l’effet du rectangle de coordonnées.

Mettre SVG à l’échelle avec viewBox

Zoom arrière avec un `viewBox` plus grand

Si width et height de viewBox dépassent le viewport, SVG adapte une zone de coordonnées plus grande au même espace. Le dessin paraît plus petit.

<svg width="250" height="250" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">

Zoom avant avec un `viewBox` plus petit

Un viewBox plus petit est agrandi pour remplir le viewport. Le contenu paraît zoomé et ce qui sort du rectangle choisi peut être coupé.

<svg width="250" height="250" viewBox="0 0 125 125" xmlns="http://www.w3.org/2000/svg">

Recadrer ou repositionner SVG avec viewBox

min-x et min-y déplacent le début du rectangle visible.

Recadrer le côté droit

Un min-x négatif déplace le rectangle sélectionné vers la gauche; le contenu à droite peut être coupé.

Recadrer le côté gauche

Un min-x positif déplace la zone visible vers la droite; la partie gauche du dessin disparaît.

SVG responsive et preserveAspectRatio

Pour un SVG responsive, conservez viewBox et laissez CSS ou le conteneur contrôler la taille affichée.

<svg viewBox="0 0 250 250" width="100%" height="auto" xmlns="http://www.w3.org/2000/svg">

preserveAspectRatio contrôle l’alignement et l’ajustement si les proportions du viewport et du viewBox diffèrent. Utilisez meet pour tout afficher et slice pour remplir au prix d’un recadrage.

Comment utiliser SVG viewBox

1. Définissez le viewport avec width, height, CSS ou layout.
2. Choisissez le rectangle avec viewBox="min-x min-y width height".
3. Changez width et height pour zoomer ou dézoomer.
4. Changez min-x et min-y pour recadrer ou repositionner.
5. Ajoutez preserveAspectRatio si les proportions diffèrent.

Erreurs courantes et corrections

Problème	Cause	Correction
SVG étiré	Ratios viewport et viewBox différents	Ajoutez preserveAspectRatio
Dessin coupé	viewBox ne couvre pas la zone voulue	Vérifiez min-x, min-y, width, height
SVG non responsive	Dimensions fixes sans viewBox	Gardez viewBox et contrôlez la taille par CSS
CSS ne change pas le recadrage	CSS change le viewport, pas le rectangle sélectionné	Modifiez viewBox
viewBox ignoré	Mauvais nombre de valeurs ou guillemets absents	Utilisez quatre valeurs séparées par espaces

FAQ – viewBox

Que fait l'attribut viewBox ?

Il définit le rectangle de coordonnées du canvas SVG qui est adapté au viewport. Il contrôle échelle, recadrage et position visible.

Quelle différence entre viewBox, width et height ?

width et height définissent la taille de sortie. viewBox définit l’espace de coordonnées affiché dans cette sortie.

Faut-il viewBox pour un SVG responsive ?

Oui dans la plupart des cas. viewBox donne un système interne stable tandis que CSS change la taille affichée.

viewBox modifie-t-il les coordonnées des formes ?

Non. Il change seulement la façon dont les coordonnées existantes sont mappées vers le viewport.

Spécification et ressources associées

• La section viewBox définit le mapping du rectangle utilisateur vers le viewport.
• preserveAspectRatio explique l’alignement quand les ratios diffèrent.
• Systèmes de coordonnées et unités SVG explique le modèle de coordonnées.
• Transformations SVG s’applique quand vous devez transformer des éléments plutôt que la zone visible.