Redimensionner SVG en ligne — 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.

Options

Largeur
Attribut width cible. Laissez vide pour conserver la largeur actuelle (ou la dériver hauteur + ratio).
Hauteur
Attribut height cible. Laissez vide pour conserver la hauteur actuelle (ou la dériver largeur + ratio).
Garder le ratio
Quand une dimension est saisie, calcule l’autre à partir du ratio / viewBox existant.
Garantir le viewBox
Si viewBox est absent, en dérive un depuis width/height pour un scale prévisible.

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

Badge marketing avec métadonnées

Entrée

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" class="promo-badge" role="img" aria-labelledby="badge-title badge-desc"> <title id="badge-title">Badge livraison rapide</title> <desc id="badge-desc">Badge arrondi avec icône éclair et fond en dégradé.</desc> <defs> <linearGradient id="badgeGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#f97316"/> <stop offset="100%" stop-color="#fb923c"/> </linearGradient> <clipPath id="badgeClip"> <rect x="0" y="0" width="240" height="72" rx="18" ry="18"/> </clipPath> </defs> <g clip-path="url(#badgeClip)"> <rect width="240" height="72" fill="url(#badgeGradient)"/> <g transform="translate(20 16)"> <circle cx="20" cy="20" r="20" fill="#0f172a" fill-opacity="0.14"/> <path fill="#fff" d="M24 4 11 22h9l-4 14 13-18h-9z"/> </g> <g font-family="Inter, Arial, sans-serif" fill="#fff"> <text x="76" y="31" font-size="18" font-weight="700">FastMinify</text> <text x="76" y="49" font-size="12" fill-opacity="0.92">SVG optimisé prêt à intégrer</text> </g> </g> </svg>

Sortie

Réglez la largeur à 120 avec le ratio conservé pour réduire le badge de moitié tout en gardant le viewBox.

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.

Outils SVG

Prévisualisez, optimisez avec SVGO, exportez en Data URI, redimensionnez, formatez, convertissez en JSX et validez vos SVG — tout dans le navigateur.

Découvrez les autres catégories d'outils

Minifier

Réduisez code et assets pour la production — minifiez JS, CSS, HTML, JSON, XML et SVG avant gzip ou déploiement CDN.

Beautifier

Rendez le code lisible avec une indentation cohérente — beautifiez JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML et plus encore dans votre navigateur.

Déminifier

Développez du code minifié ou compressé — déminifiez JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML et d'autres formats pour déboguer ou relire.

Conversion

Transformez des données entre JSON, YAML, XML et CSV localement — sans envoi serveur.

Préprocesseurs CSS

Compilez SCSS ou LESS en CSS standard dans le navigateur — complétez avec beautify ou minify pour un workflow feuille de style complet.

Outils JSON

Validez, formatez, comparez et explorez des payloads JSON — complémentaires aux minificateurs et convertisseurs.

DevOps & Infra

Format/validate/minify HCL, format & lint Dockerfile, validation Compose et .env.

CI/CD

GitHub Actions et GitLab CI — formater le YAML et vérifier la structure des workflows/jobs dans le navigateur.

Logs & observabilité

JSON/NDJSON ligne à ligne et access logs Nginx/Apache — format, filtre, validation et CSV/TSV.

Kubernetes

Manifestes multi-docs, validation structurelle, starters Ingress/Deployment et formatage values Helm.

Réseau / IP

CIDR, sous-réseaux et helpers IPv4/IPv6 — dans le navigateur.

Sécurité & tokens

JWKS, certificats X.509 et scan de secrets — locaux navigateur.

API & schémas

Outils OpenAPI pour formater, valider et analyser vos specs.

Encodage

Encodez ou décodez Base64, composants URL et entités HTML — uniquement côté client.

Utilitaires développeur

Timestamps, UUID, ULID, Nanoid, cron, mots de passe, regex, slugify, bases, casse, diff texte et chmod — tout côté client.

Texte & Markdown

Comptez, générez un sommaire Markdown et nettoyez des listes de lignes — dans le navigateur.

IA & LLM

Comptage de tokens, estimation des coûts et fenêtre de contexte — 100 % local.

Sérialisation

Sérialisez et désérialisez des structures PHP à côté de vos flux JSON.