`viewBox` SVG et mise à l’échelle adaptative

Les attributs de largeur et de hauteur de SVG définissent sa taille affichée dans le DOM. L’attribut viewBox définit l’espace de coordonnées interne. Ces deux notions sont indépendantes : un viewBox de "0 0 100 100" avec une largeur de "200" et une hauteur de "200" agrandit l’espace de coordonnées d’un facteur 2.

viewBox="min-x min-y width height". Le cas le plus courant est viewBox="0 0 100 100", qui définit un espace de coordonnées de 100×100 commençant à l’origine. Les valeurs de coordonnées dans SVG font référence à cet espace, et non aux pixels.

Pour obtenir un SVG adaptatif, omettez les attributs de largeur et de hauteur (ou définissez-les à 100 %) et laissez viewBox définir les proportions. Ajoutez le CSS suivant : svg { width: 100%; height: auto; }. Le SVG s’adapte à son conteneur tout en conservant son rapport d’aspect.

preserveAspectRatio contrôle la manière dont viewBox s’ajuste à la fenêtre d’affichage SVG lorsque les rapports d’aspect diffèrent. Valeurs possibles : "xMidYMid meet" (par défaut, avec des bandes), "xMidYMid slice" (recadrage pour remplir) et "none" (étirement pour remplir sans conserver le rapport d’aspect).

Modifier min-x et min-y déplace la portion visible de l’espace de coordonnées SVG. viewBox="50 50 100 100" affiche la région allant de (50,50) à (150,150). Cela permet de réaliser un panoramique interactif en mettant à jour les valeurs de viewBox avec JavaScript.

Réduisez les dimensions de viewBox pour effectuer un zoom avant : viewBox="25 25 50 50" affiche une région plus petite, agrandie pour remplir l’élément SVG. Augmentez les dimensions pour effectuer un zoom arrière. Mettez à jour viewBox lors des événements de molette pour créer un zoom interactif sans modifier l’échelle de l’élément SVG.

Un SVG utilisé comme image s’adapte avec object-fit, mais ne peut pas être mis en forme avec CSS ni piloté par un script. Un SVG intégré directement est entièrement accessible à CSS et à JavaScript, mais augmente la taille du HTML. Faites votre choix selon les besoins d’interactivité.

Les icônes SVG utilisent un viewBox fixe (par exemple, "0 0 24 24") et aucun attribut de largeur ou de hauteur, ce qui permet à CSS de définir leur taille : .icon { width: 1.5rem; height: 1.5rem; }. viewBox garantit que les icônes s’adaptent correctement à toutes les tailles tout en conservant un rendu vectoriel net.

Définissez les icônes dans des éléments <symbol viewBox="0 0 24 24"> à l’intérieur d’un SVG masqué. Référencez-les avec <use href="#icon-name">. Chaque élément use peut avoir sa propre largeur, sa propre hauteur, son propre remplissage et sa propre couleur : un seul fichier de planche pour toutes les icônes.

Le remplissage SVG défini sur currentColor hérite de la propriété CSS de couleur de l’élément ou de son parent. Définissez color: red sur le SVG ou sur un parent, et l’icône sera automatiquement remplie en rouge. Les icônes monochromes peuvent ainsi suivre la couleur du texte sans mise en forme propre à SVG.

Si le contenu SVG semble rogné ou positionné de manière inattendue, consignez ou inspectez la valeur de viewBox. Une erreur courante consiste à définir viewBox sur les dimensions en pixels de l’illustration source sans tenir compte de sa taille affichée, ce qui provoque des problèmes de mise à l’échelle. Vérifiez que viewBox correspond aux limites réelles du contenu de l’illustration SVG.

Comment faire pour qu’un SVG s’adapte de manière réactive à la largeur de n’importe quel conteneur ?

Le viewBox de SVG définit un espace de coordonnées interne indépendant de la taille affichée en pixels, ce qui permet une mise à l’échelle adaptative. Définir une largeur à 100 % et une hauteur automatique avec un viewBox permet aux SVG de s’adapter à n’importe quel conteneur. Le modèle de planche symbol+use, les thèmes avec currentColor et preserveAspectRatio forment une boîte à outils complète pour utiliser des SVG flexibles et adaptables aux thèmes.