SVG : balise symbol

Pour créer un modèle (sans le dessiner) composé d'un groupe de formes basiques on a utilisé la balise G à l'intérieur du conteneur defs mais il y a une autre solution plus simple.

Sachez que la balise symbol remplace avantageusement les deux balises précitées.

Ci-dessous une image de 800 par 600 avec un modèle "homme" et un modèle "femme"

Le code SVG dans cette page

Définition des modèles

<svg viewBox ="0 0 800 600" width ="100%" height ="100%"> <symbol id ="homme" viewbox ="0 0 100 100"> <circle cx ="50" cy ="20" r ="10" /> <polyline points ="30,30 50,40 70,30" /> <ellipse cx="50" cy ="50" rx ="5" ry="20" /> <polyline points ="40,90 50,70 60,90" /> </symbol> <symbol id ="femme" viewbox ="0 0 100 100"> <circle cx ="50" cy ="20" r ="10" /> <polyline points ="30,30 50,40 70,30" /> <polygon points ="50,30 60,70 40,70" /> <polyline points ="40,90 50,70 60,90" /> </symbol>

Pour chaque modèle on crée une zone de dessin de 100 par 100 avec l'attribut viewbox.
Les coordonnées des formes constitutives du modèle sont donc désormais indépendantes du canevas SVG mais liées au viewBox associé à la balise symbol.
L'homme et la femme sont identiques sauf que chez la femme l'ellipse (tronc) est remplacée par un polygone (triangle symbolisant une robe).

Clonage des modèles

<use xlink:href ="#homme" width ="100" height="100" x="0" y="0" /> <use xlink:href ="#femme" width ="100" height="100" x="200" y="0" /> <use xlink:href ="#homme" width ="100" height="100" x="400" y="0" /> <use xlink:href ="#femme" width ="100" height="100" x="600" y="0"/> <use xlink:href ="#homme" width ="100" height="100" x ="0" y ="200" transform="skewX(30)"/> <use xlink:href ="#femme" width ="100" height="100" x ="200" y ="200" transform="skewY(30)"/> <use xlink:href ="#homme" width ="100" height="100" x ="200" y ="200" transform="scale(1.5)"/> <use xlink:href ="#femme" width ="100" height="100" x ="200" y ="200" transform="scale(0.5)"/> ...

Attention si les modèles ont été définis via la balise symbol il faut impérativement utiliser les attributs width et height dans la balise use.

Naturellement il est toujours possible de cloner le modèle avec des transformations (attribut transform).
Retour menu