Dernièrement, on m'a demandé de rajouter un svg dans une librairie de svg optimisé.
En intégrant ce svg, je me suis rendu compte qu'il n'avait pas les mêmes propriétés de tailles que les autres. Suite à une rapide édition des propriétés height et width, le svg apparaissait devant moi avec des éléments en moins !
Dans cet article, nous allons décrypter le fonctionnement des svg afin de comprendre comment les manipuler pour les intégrer correctement.
Le SVG, pour scalable vertor graphics, est un langage XML permettant l'intégration d'images vectorielles. Par conséquent, ces images peuvent être dimensionnées sans aucune perte de qualité.
La plupart des éléments qui composes un svg ont des propriétés de placement et de taille :
Toutes ces propriétés sont relatives à une viewBox. Par défaut, la viewBox a les valeurs suivantes "0 0 300 150". Pour lire une viewBox, il suffit de séparer en deux celle-ci (0 0 et 300 150). Ce qui correspond aux coordonnées du coin supérieur gauche et celles du coin inférieur droit. Les coordonnées ne sont pas forcément positives.
Pour résumer la viewBox est comme son nom l'indique en anglais, la partie visible de votre image. Elle influt notre vision mais pas le contenu ni sa taille comme dans mon problème actuel.
Dans mon cas, j'avais un svg comme celui-ci :
<svg height="90" width="90">
<circle cx="45" cy="45" r="45" />
</svg>
Pour modifier sa taille, j'ai dû lui spécifier une viewBox, puis modifier sa taille comme je le souhaitais.
<svg height="40" width="40" viewBox="0 0 90 90">
<circle cx="45" cy="45" r="45" />
</svg>
Rien de sorcier donc mais l'utilisation de viewBox peut être perturbant.
Voici quelques liens pour améliorer ses connaissances sur les svg :