Taille par défaut
Quand on utilise une iframe, on ne s'attend pas à ce que le texte compris à l'intérieur change de taille et d'échelle quand on change la taille de l'iframe. Il en est de même pour SVG.
Par défaut, le svg va être dessiné à la taille spécifiée dans le code sans prendre en compte la taille du "canvas". Cette dernière est par défaut de 300 px de large sur 150 de haut.
Le code suivant va se référer à cette taille de référence :
svg { width: 100%; height: auto; }
SVG à taille adaptable
Le but n'est pas d'attribuer une taille exacte à notre svg mais de lui permettre de s'adapter à la hauteur et à la largeur écrites dans le css tout en gardant les proportions.
Il faut passer par le "viewbox". Ce dernier va nous permettre de définir :
- l'origine du système de coordonnées du svg (les deux premières valeurs)
- les proportions (les deux dernières valeurs)
Ex : le code html suivant indique que l'origine du système de coordonnées est 0 0 et que la proportion entre largeur et hauteur est de 111 pour 89
<svg viewBox="0 0 111 89"
Ensuite il ne reste plus qu'à définir la taille du svg de façon classique en css
#coeur { stroke: #000066; stroke-width: 1px; fill: red; width: 50%; }
Attention tout de même à avoir :
- enlevé tous les styles qui sont compris dans votre balise svg, c'est eux qui ont la priorité
- défini comme il faut votre image de base (avec inkscape : Fichiers > propriété du document > Ajuster la page au dessin ou à la sélection
Et voilà le résultat ...
Et voilà le résultat ...