Comment utiliser : Redimensionner viewBox SVG
- Collez un SVG disposant d’un
viewBox(ou d’une largeur et d’une hauteur). - Saisissez la nouvelle taille du viewBox, par exemple 24 × 24 pour correspondre à un jeu d’icônes.
- Choisissez la précision et indiquez si les épaisseurs de trait doivent aussi être mises à l’échelle.
- Copiez le résultat : les deux aperçus doivent être identiques, seuls les nombres changent.
Pourquoi recalculer les coordonnées au lieu d’utiliser transform ?
Les jeux d’icônes fonctionnent mieux lorsque chaque icône partage le même viewBox (24×24, 20×20, 16×16…) : elles s’alignent et les épaisseurs de trait restent cohérentes. Encapsuler une icône dans <g transform="scale(0.5)"> fonctionne visuellement, mais laisse des valeurs peu lisibles dans le code source, met à l’échelle les traits de façon imprévisible et casse les outils qui lisent les données de chemin. Recalculer les coordonnées produit un SVG propre, qui se comporte comme s’il avait été dessiné à la nouvelle taille.
Ce qui est mis à l’échelle
- Les données de chemin (
d) : toutes les commandes, absolues et relatives, à savoir M, L, H, V, C, S, Q, T et A. Pour les arcs, les rayons sont mis à l’échelle, tandis que la rotation et les indicateurs sont conservés. x,y,cx,cy,x1…y2,width,height,rx,ry,retpoints.- En option,
stroke-widthetfont-size. - Un viewBox qui ne commence pas à 0 0 est ramené à 0 0.
Limites
Les éléments dotés de leur propre attribut transform le conservent tel quel, et les pourcentages ou tailles définis en CSS ne sont pas convertis. Pour un résultat exact, aplatissez d’abord les transformations dans Figma ou Illustrator (ou via convertTransform de SVGO). En cas de mise à l’échelle non uniforme (facteurs différents en X et en Y), les rayons des cercles sont approximés avec le facteur moyen.
Pour la suite : nettoyez et collez l’icône dans Webflow avec SVG vers Webflow, ou convertissez-la pour React avec SVG vers JSX.
Aussi recherché comme : viewbox svg, redimensionner svg, mise à l'échelle svg path, normaliser icônes svg, svg 24x24, transform path svg, changer taille svg, coordonnées svg.
Outils complémentaires : Redimensionner viewBox SVG
- Convertisseur SVG vers CSS — Collez un SVG pour obtenir une data URI compacte encodée en URL, ainsi que les règles CSS prêtes à l’emploi background-image et mask-image recolorable.
- Calculateur de ratio d’aspect — Redimensionnez images et vidéos sans déformation : indiquez un ratio et un côté pour obtenir l’autre, ou saisissez une taille pour trouver son ratio, avec un CSS prêt à coller.
- Générateur de favicons — Créez un ensemble complet de favicons à partir d'un logo, d'une lettre ou d'un emoji : un fichier favicon.ico en plusieurs tailles, une icône Apple Touch, des icônes Android/PWA, un Webclip Webflow, le manifeste Web et les balises HTML à insérer.
- Générateur d’animation CSS — Concevez vos animations CSS sur une vraie timeline de keyframes.
Questions fréquentes
Comment passer un SVG de 512×512 à 24×24 ?
Mon icône aura-t-elle un aspect différent ?
Pourquoi conserver stroke-width sans modification ?
Qu’en est-il des transformations ?
transform existants sont laissés tels quels, et un avertissement s’affiche. Aplatissez-les dans votre outil de conception pour obtenir un résultat totalement propre.