Redimensionner SVG en ligne — Width, Height et viewBox
Inspectez width, height et viewBox, puis redimensionnez les exports SVG sans casser l'affichage responsive. Utile pour les fichiers livrés par le design.
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 de la hauteur et du ratio).
- Hauteur
- Attribut height cible. Laissez vide pour conserver la hauteur actuelle (ou la dériver de la largeur et du 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 une mise à l’échelle prévisible.
Quand utiliser cet outil
Corriger des SVG qui se redimensionnent mal dans une mise en page responsive. Normaliser des exports design trop grands avant livraison. Ajouter un viewBox à d’anciens fichiers qui n’ont que width/height. Générer un badge inline plus petit sans nouvel export depuis Figma.
Exemples
Badge marketing avec métadonnées
Entrée
Sortie
Conserver le ratio depuis le viewBox
Entrée
Sortie
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 sur le redimensionnement de SVG
Dimensions et mise à l’échelle responsive
Pourquoi le viewBox est-il important ?
Il définit le système de coordonnées interne, qui permet au SVG de s’adapter proprement dans une mise en page 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 certaines transformations inhabituelles 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.
- 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.
- Encodage
Encodez ou décodez Base64, composants URL et entités HTML — uniquement côté client.
- Sérialisation
Sérialisez et désérialisez des structures PHP à côté de vos flux JSON.
- Outils JSON
Validez, formatez, comparez et explorez des payloads JSON — complémentaires aux minificateurs et convertisseurs.
- 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.
- 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 couleur & CSS
Vérification de contraste WCAG en collage local avec syntaxe couleur CSS moderne — vues paire et matrice, jamais envoyé.
- 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.
- Outils HTTP
cURL, messages HTTP, URLs, HAR et Cookie / Set-Cookie collés dans le navigateur — formater et inspecter, jamais envoyé.
- Outils SEO / Web
Générez meta tags, Open Graph et Twitter Card localement — aperçus simulés depuis vos saisies, jamais fetch de votre site live.
- 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.
- Données de test
Valeurs de champs synthétiques pour fixtures et seed DB — d'abord des numéros de téléphone en plages réservées.
- Étiquettes code-barres
Dessinez des étiquettes Code 128, EAN-13 et UPC-A dans le navigateur — téléchargement PNG et SVG, pas un lookup GS1.