Catégorie: Développement
Éditeur de viewBox SVG
Lisez et réécrivez le viewBox d'un SVG à la main
Collez un balisage SVG, chargez son viewBox actuel (ou sa largeur et sa hauteur s'il n'en a pas), puis ajustez min-x, min-y, largeur et hauteur pour recadrer, marger ou déplacer l'origine du dessin, et copiez le SVG réécrit.
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <rect width="120" height="120" rx="16" fill="#0f766e" /> <circle cx="60" cy="60" r="34" fill="#f4d35e" /> </svg>
Rien n'est envoyé. Le balisage est analysé et réécrit uniquement sur cette page.
Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.
À quoi sert cet outil
L'attribut viewBox est ce qui projette le système de coordonnées interne d'un SVG sur l'espace où il s'affiche ; c'est donc lui qui permet de recadrer une partie d'une icône, d'ajouter une marge autour d'elle, ou de déplacer son origine sans toucher un seul tracé. Modifier quatre nombres à la main dans un éditeur de texte est fastidieux et source d'erreurs ; cet outil analyse le SVG que vous collez, préremplit les quatre champs du viewBox à partir de ce qu'il trouve, et réécrit le balisage en direct au fur et à mesure que vous les modifiez, avec un aperçu pour voir le cadrage avant de copier.
Mode d'emploi
- Collez un balisage SVG contenant une balise <svg>.
- Cliquez sur « Charger le viewBox actuel » pour préremplir les quatre champs, ou saisissez vos propres valeurs de min-x, min-y, largeur et hauteur.
- Vérifiez l'aperçu, puis copiez le balisage SVG réécrit.
Confidentialité
Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez n'est jamais envoyé, stocké ni partagé : fermer l'onglet suffit à tout effacer.
Questions fréquentes
- Mon SVG est-il envoyé quelque part ?
- Non. Le balisage est analysé et réécrit par simple correspondance de chaînes de caractères dans l'onglet de votre navigateur ; rien n'est envoyé à un serveur.
- Que deviennent les attributs width et height ?
- Ils restent exactement tels quels. Changer le viewBox redimensionne ce qui est dessiné à l'intérieur du viewport existant, de la même façon qu'un navigateur l'applique, plutôt que de redimensionner l'élément lui-même.
- Pourquoi l'aperçu paraît-il parfois vide ?
- Une largeur ou une hauteur à zéro, ou un viewBox qui ne chevauche pas le dessin, le recadre jusqu'à ne plus rien montrer. Élargissez la boîte ou vérifiez les valeurs de min-x et min-y.