Redimensionner un SVG

Le SVG est un format vectoriel : il est indépendant de la résolution et reste parfaitement net à toute taille. “Redimensionner” un SVG ne le rastérise pas et ne change pas le dessin : cet outil se contente de définir de nouvelles valeurs width et height en pixels sur l’élément racine <svg>, c’est-à-dire sa taille d’affichage déclarée. Le viewBox, les tracés et chaque coordonnée restent exactement tels quels, si bien que le dessin conserve ses proportions et ne perd aucune qualité. Collez votre balisage, définissez la largeur et la hauteur, prévisualisez le résultat, puis copiez-le ou téléchargez-le.

Comment redimensionner un SVG

  1. 1

    Collez le SVG

    Collez le balisage complet `<svg>...</svg>` dans la zone de texte.

  2. 2

    Définissez la largeur et la hauteur

    Saisissez la nouvelle largeur et hauteur en pixels.

  3. 3

    Aperçu en direct

    L'outil réécrit le `width` et le `height` du `<svg>` racine (ou les ajoute s'ils manquent) et affiche le résultat immédiatement.

  4. 4

    Copiez ou téléchargez

    Copiez le balisage mis à jour dans le presse-papiers ou enregistrez-le en tant que fichier `.svg`.

Taille d’affichage et viewBox

Un SVG possède une taille d’affichage (width/height) et son propre système de coordonnées (viewBox).

<svg width="200" height="200" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" />
</svg>

Ce SVG mesure 200 x 200 pixels à l’écran, tandis que ses coordonnées internes vont de 0 à 100. Le cercle avec r="40" remplit environ 80 % du viewBox, il s’affiche donc sur environ 160 px de large. Cet outil ne modifie que le width et le height, c’est-à-dire la taille d’affichage déclarée. Il ne touche ni au viewBox ni aux coordonnées, et c’est précisément pourquoi le dessin conserve ses proportions et reste net : vous demandez au navigateur de dessiner la même image à une autre taille, pas de la redessiner.

Pourquoi un SVG peut sembler identique après un changement de taille

Si le SVG est placé avec quelque chose comme <img src="icone.svg" width="500"> ou dimensionné par du CSS, la page environnante contrôle la taille d’affichage et remplace le width/height du fichier. Dans ce cas, changez la taille là où le SVG est utilisé (le <img>, le CSS ou le conteneur), pas seulement dans le balisage.

Les traits et le texte restent nets

Comme rien n’est rastérisé, le texte reste du vrai texte vectoriel et les lignes restent lisses à toute taille. L’épaisseur des traits est définie dans le système de coordonnées, elle est donc mise à l’échelle avec le dessin. Pour qu’un trait garde la même épaisseur visuelle quelle que soit la taille, ajoutez vector-effect="non-scaling-stroke" à cet élément dans votre source avant de redimensionner.

Nettoyez le balisage

Les SVG exportés depuis Figma, Illustrator ou Sketch traînent souvent du poids inutile : espaces de noms d’éditeur (sodipodi:, inkscape:), métadonnées cachées et <defs> inutilisés. Cet outil laisse votre balisage tel quel, hormis la taille. Pour retirer le superflu, passez le fichier dans un optimiseur comme SVGO avant ou après le redimensionnement.

Questions fréquentes

Non. Cela définit uniquement le width et le height du <svg> racine. Le viewBox, les tracés et chaque coordonnée restent intacts, si bien que l’illustration conserve ses proportions exactes.

En général, c’est la page qui contrôle la taille : une largeur sur <img>, une règle CSS ou un conteneur remplacent les dimensions propres du fichier. Changez la taille là où le SVG est utilisé, pas seulement dans le balisage.

Oui. Le SVG est un format vectoriel : rien n’est rastérisé et le texte comme les traits restent nets à toute taille. Si le fichier source a déjà converti le texte en tracés, il est mis à l’échelle comme n’importe quelle forme, et reste net.

Oui. Seuls le width et le height sont modifiés ; <animate>, <script>, les gestionnaires d’événements et le CSS à l’intérieur du SVG sont laissés tels quels.

Le balisage est envoyé à notre serveur pour générer l’aperçu redimensionné et n’est pas conservé après la requête. Il n’est ni enregistré ni partagé.

Outils similaires

Outil disponible dans d’autres langues