Comment redimensionner un SVG sans perdre en qualité

« Redimensionner » veut dire trois choses différentes dans un fichier vectoriel, et deux d’entre elles n’ont rien à voir avec la qualité. Vouloir redimensionner un SVG sans perdre en qualité commence donc par une question plus précise : s’agit-il de la taille d’affichage, de la taille du dessin, ou de l’épaisseur des contours ?

L’Éditeur vectoriel travaille sur la géométrie, pas sur des pixels. C’est ce qui rend l’opération réversible. Encore faut-il savoir laquelle des trois opérations on est en train de faire.

La qualité n’est pas menacée par défaut

Un SVG ne stocke pas de pixels. Il stocke des coordonnées et des courbes, et le rendu est calculé à la taille demandée. Agrandir un SVG ne lisse rien, ne floute rien, n’invente rien : il y a simplement plus de pixels produits parce que la zone est plus grande.

C’est la différence fondamentale avec un PNG, dont la grille est fixe. Sur un SVG, l’agrandissement ne coûte pas de détail. La question de la qualité se déplace donc ailleurs, vers les contours et vers les images intégrées.

Taille d’affichage et viewBox

L’attribut viewBox définit le système de coordonnées interne. viewBox="0 0 24 24" accompagné de width="240" donne dix pixels d’affichage par unité utilisateur. Rien dans le dessin n’a été modifié : seule la correspondance entre les unités et l’écran a changé.

Conséquence pratique : il suffit le plus souvent de modifier le width et le height du document, ou la taille de la zone qui l’accueille, pour obtenir un grand format propre. C’est le réglage à essayer en premier, avant toute manipulation des objets.

Le pourcentage joue le même rôle. Un SVG sans dimensions fixes, inséré dans un conteneur fluide, s’adapte à la place disponible et reste net.

Les contours suivent l’échelle

L’épaisseur d’un trait s’exprime en unités utilisateur. Elle grandit donc avec le dessin. Une icône de 24 × 24 unités affichée à 2 400 pixels est agrandie cent fois : un contour de 1 unité arrive à 100 pixels de large.

C’est mathématiquement correct et visuellement souvent indésirable. Un trait pensé pour une icône de barre de navigation devient un cadre épais en grand format. La correction ne consiste pas à réduire la taille du document, mais à modifier la valeur du contour, ou à s’appuyer sur la propriété qui empêche le trait de suivre l’échelle quand le fichier la prévoit.

Le cas où il faut vraiment redimensionner les objets

Changer la taille de la zone de travail n’est pas changer la taille du dessin. Si vous augmentez le plan de travail sans toucher aux objets, vous ajoutez de l’espace vide autour d’eux, et le fichier exporté contiendra cet espace.

Pour que le dessin occupe la nouvelle zone, il faut sélectionner les objets et les mettre à l’échelle, ou ajuster le viewBox pour qu’il corresponde exactement aux limites du contenu. Deux opérations différentes, deux résultats différents, et une seule des deux conserve les marges d’origine.

L’exception qui casse la promesse

Une image matricielle intégrée dans le SVG ne gagne pas de résolution. Elle reste ce qu’elle est, et l’agrandir la fait pixeliser. Le fichier entier a beau être vectoriel, cette partie ne l’est pas, et aucun outil ne peut inventer les détails qui n’ont jamais été enregistrés.

Le texte pose un problème plus discret. Un SVG désigne une police plus qu’il ne l’embarque : sur une machine où elle manque, le moteur substitue et la composition change. Redimensionner ne crée pas le problème, mais l’agrandissement le rend visible. Convertir le texte en tracés fige l’apparence et supprime la sélection des caractères.

Les dimensions de référence

Quelques repères évitent de confondre taille de fichier, taille d’affichage et résolution de sortie. Une page A4 à 300 ppp représente 2 480 × 3 508 pixels. Une icône de 24 unités affichée à 96 pixels est à l’échelle 4. Et un même fichier SVG peut servir les trois densités d’écran courantes sans être réexporté.

Un fichier de test, deux exports et une comparaison côte à côte suffisent à vérifier le comportement avant de livrer.

Le premier lancement et les limites de l’éditeur sont décrits dans comment modifier des fichiers SVG en ligne dans votre navigateur. Une fois les dimensions réglées, comment préparer et optimiser des fichiers SVG pour le Web traite le poids du fichier livré, qui est un autre sujet.