Sur la route de la Geek I'll still be a geek after nobody thinks it's chic !

17Fév/123

L’attribut viewBox en SVG

En ce moment, je profite de mon chômage pour faire de la documentation. SVG sur le portail MDN, pour être plus précise. C'est donc en traduisant le guide du débutant pour le SVG que je me suis frottée à une incompréhension :  l'attribut viewBox, extrêmement mal documenté, même en anglais. D'où ce petit article, qui va servir de bac à sable pour écrire la page de documentation correspondante.

Commençons déjà par une belle démonstration, histoire d'expliquer comment fonctionne SVG. SVG permet de faire du rendu graphique grâce à du balisage XML :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect x="0" y="0" width="1500" height="1000" fill="red"/>

<circle cx="750" cy="500" r="450" fill="green"/>

<text x="750" y="550" font-size="250" text-anchor="middle" fill="white">SVG</text>
</svg>

Voici le résultat. Ici, rien de bien sorcier, je dessine un rectangle rouge, un cercle vert et des lettres blanches. C'est un peu gros, n'est-ce pas ? Il faudrait le redimensionner, non ? Si je me souviens bien de mes cours de CSS, peut être qu'en rajoutant des attributs width et height, ça va passer, non ?

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" width="300" height="200"
xmlns="http://www.w3.org/2000/svg">

<rect x="0" y="0" width="1500" height="1000" fill="red"/>

<circle cx="750" cy="500" r="450" fill="green"/>

<text x="750" y="550" font-size="250" text-anchor="middle" fill="white">SVG</text>
</svg>

Le résultat n'est pas vraiment ce que j'attendais. Cela m'a effectivement retaillé l'image, mais ne l'a pas redimensionné. En gros, il a pris mon image d'origine, à tailler ce qui correspondait aux coordonnées (0,0) (3OO,200) (soit un rectangle de 300 px par 200) et à laisser tomber tout le reste. C'est ici que viewBox entre en jeu :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" width="300" height="200"
viewBox="0 0 1500 1000"
xmlns="http://www.w3.org/2000/svg">

<rect x="0" y="0" width="1500" height="1000" fill="red"/>

<circle cx="750" cy="500" r="450" fill="green"/>

<text x="750" y="550" font-size="250" text-anchor="middle" fill="white">SVG</text>

</svg>

C'est mieux, , non ? En fait, viewBox va tout simplement définir l'échelle de l'image à afficher. Mon image d'origine commence au point (0,0) et fait 1500 par 1300px. Ainsi, quand je vais adjoindre des attributs de taille à mon élément SVG, le viewBox adaptera automatiquement l'échelle définit à ces nouveaux attributs.

Commentaires (3) Trackbacks (0)
  1. Merci beaucoup, beaucoup, beaucoup !

  2. Merci, tres instructif.

    juste un ajout : viewBox et un des ettribut sensible a la CASE
    si vous l’ajouter en JS « viewbox » ne sera pas interpreté alors que « viewBox » le sera correctement
    http://stackoverflow.com/questions/17741129/constructed-svg-does-not-work-where-html-drawn-does

  3. Merci beaucoup, votre explication était très claire et précise.


Leave a comment

Aucun trackbacks pour l'instant