Redimensionner SVG — Width, Height et viewBox

Inspectez width, height et viewBox, puis corrigez les exports SVG sans casser le responsive. Très utile sur des fichiers design handoff.

Chargement…
Redimensionner SVG — guide dimensions & viewBox
Corrigez des exports SVG capricieux en inspectant width, height et viewBox, puis en réécrivant les dimensions pour un scaling responsive prévisible.

Notes développeur

• Utilise d’abord le viewBox existant pour préserver le ratio. • Si le viewBox manque, il peut en déduire un depuis les dimensions actuelles. • Convient surtout aux exports classiques avec width/height numériques. • Combinez avec validate-svg si vous voulez aussi contrôler title/desc.

Quand utiliser cet outil

• Corriger des SVG qui scale mal en responsive. • Normaliser des exports design trop grands avant livraison. • Ajouter un viewBox à d’anciens assets qui n’ont que width/height. • Générer un badge inline plus petit sans réexport depuis Figma.

Exemples

Export avec dimensions fixes

Entrée

<svg xmlns="http://www.w3.org/2000/svg" width="480" height="144" class="promo-badge"> <rect width="480" height="144" rx="36" fill="#f97316"/> <text x="76" y="84" font-size="36" font-weight="700" fill="#fff">FastMinify</text> </svg>

Sortie

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" class="promo-badge" viewBox="0 0 480 144"><rect width="480" height="144" rx="36" fill="#f97316"/><text x="76" y="84" font-size="36" font-weight="700" fill="#fff">FastMinify</text></svg>

Conserver le ratio depuis le viewBox

Entrée

<svg viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="10"/></svg>

Sortie

Définissez seulement la width avec le mode conservation du ratio activé pour déduire automatiquement la hauteur.

Outils SVG associés

Besoin d’une sortie CSS encodée ? Essayez SVG vers Data URI. Validez l’accessibilité avec validate SVG ou ouvrez le hub SVG.

FAQ redimensionner SVG

Dimensions et scaling responsive

Pourquoi le viewBox est-il important ?

Il définit le système de coordonnées interne qui permet au SVG de scaler proprement en responsive.

Peut-il déduire une dimension manquante ?

Oui, quand un ratio exploitable existe déjà.

Répare-t-il tous les exports cassés ?

Il couvre les cas width/height/viewBox courants, mais certains transforms exotiques nécessitent encore une relecture manuelle.

Convertisseurs, encodeurs, formateurs et minificateurs au même endroit ? Outils développeurs Ouvrez le catalogue des outils développeurs.