À propos de cet outil
Le calculateur viewBox aide à distinguer les coordonnées internes de la taille d’affichage. Saisissez un viewBox existant pour consulter son origine et ses dimensions, ou entrez directement quatre valeurs pour créer l’attribut, sans fichier SVG.
Mode d’emploi
- Saisissez un viewBox existant ou lisez les coordonnées depuis un fichier SVG ou son code source.
- Vérifiez les valeurs X et Y minimales ainsi que la largeur et la hauteur internes.
- Ajustez la zone de coordonnées si nécessaire et indiquez les dimensions d’affichage pour comparer les proportions.
- Copiez l’attribut viewBox obtenu et vérifiez que l’image reste entièrement visible.
Fonctionnalités
- Les coordonnées d’origine peuvent être positives ou négatives. La largeur et la hauteur internes doivent être strictement positives.
- Affiche le rapport largeur/hauteur : par exemple, 0 0 800 600 correspond à 4:3.
- Compare la zone interne aux dimensions d’affichage pour repérer une mise à l’échelle proportionnelle ou des rapports différents.
Comprendre les coordonnées
- Les valeurs du viewBox sont, dans l’ordre, min-x, min-y, width et height. Les deux premières indiquent l’origine de la zone visible ; les deux suivantes sa largeur et sa hauteur.
- Par exemple, -100 -50 200 100 définit une zone commençant en (-100, -50), large de 200 et haute de 100, soit un rapport de 2:1.
- Avec une zone d’affichage de 400 × 300 et un viewBox de 0 0 800 600, une unité interne correspond à 0,5 pixel CSS sur chaque axe. Si les rapports diffèrent, les marges ou le recadrage dépendent aussi de preserveAspectRatio.
Sécurité des fichiers SVG
L’aperçu utilise une copie statique sécurisée. Il n’exécute aucun script, clic interactif ou animation et ne charge aucune image, police ni feuille de style externe. Les références externes, pages intégrées et contenus non pris en charge sont retirés : l’aperçu peut donc différer de l’original. Les documents contenant un DOCTYPE ou des entités personnalisées ne sont pas acceptés.
Le fichier SVG ou son code UTF-8 est limité à 2 Mio, 20 000 nœuds (éléments et texte compris) et 96 niveaux d’imbrication. Simplifiez d’abord les fichiers trop volumineux ou trop complexes.
Confidentialité
Votre SVG est traité uniquement dans votre navigateur, sans envoi à un serveur.
L’outil n’enregistre pas automatiquement vos données ni vos résultats. Téléchargez ce que vous souhaitez garder avant d’effacer le contenu ou de quitter la page, et conservez l’original.
Questions fréquentes
Que signifient les quatre nombres du viewBox ?
Ce sont le X minimal, le Y minimal, la largeur interne et la hauteur interne. L’origine peut être négative ; la largeur et la hauteur doivent être strictement positives.
Que signifie viewBox="0 0 100 100" ?
Il s’agit d’une zone de 100 × 100 commençant en (0, 0), au rapport 1:1. La taille réelle en pixels dépend des dimensions d’affichage.
Quel est le lien entre viewBox, width et height ?
viewBox définit la zone de coordonnées internes, tandis que width et height définissent la zone d’affichage. Le navigateur adapte la première à la seconde.
Qu’est-ce que preserveAspectRatio ?
Cet attribut règle l’alignement et la mise à l’échelle lorsque les proportions diffèrent. meet affiche l’image entière avec d’éventuelles marges ; slice remplit la zone avec un recadrage possible ; none ajuste les deux axes séparément.