Le format SVG : les styles

SVG est très proche du HTML et partage avec lui l’usage des styles. Il est donc possible de créer une feuille de style, et de sélectionner des tags, des classes et des id àtravers des déclarations CSS standard.

Utiliser defs

Pour déclarer des comportements css àl’intérieur d’un dessin SVG, on crée un tag defs et un autre tag style àl’intérieur. De là, on code en css.
Il est possible de créer des classes et des id.

   <svg width="190" height="160">
            <defs>
            <style type="text/css">
                .rr {
                    stroke: yellow;
                    fill: red;
                }
            </style>
        </defs>
            <path d="M10 80 Q 52.5 10 95 80 T 180 80" stroke="black" class="rr"/>
        </svg>

Il reste ensuite àassocier ces classes et id àdes éléments.

Utiliser les groupes pour réemployer des éléments

Il est possible en SVG d’utiliser de groupes. Le tag g sert àça.

<svg width="200" height="200">
<g id="groupe">
                    <line x1="0" y1="0" x2="160"  y2="0" stroke="black" stroke-width="5"/>
                    <line x1="0" y1="20" x2="160"  y2="20" stroke="black" stroke-width="5"/>
                    <line x1="0" y1="40" x2="160"  y2="40" stroke="black" stroke-width="5"/>
</g>
</svg>

Mais les groupes sont intéressants lorsqu’ils sont stockés et réemployés. Pour cela on les place dans la balise defs. Ils sont alors stockés mais pas utilisés encore.
On les appelle ensuite avec la balise use àlaquelle on ajoute l’attribut href. Dans cet exemple on crée un groupe avec l’id "groupe" et on l’affiche quatre fois avec la balise use.

<svg width="200" height="200">
            <defs>
                <g id="groupe">
                    <line x1="0" y1="0" x2="160"  y2="0" stroke-width="5"/>
                    <line x1="0" y1="20" x2="160"  y2="20" stroke-width="5"/>
                    <line x1="0" y1="40" x2="160"  y2="40" stroke-width="5"/>
                </g>
                <style type="text/css">
                    .blue {
                        stroke:blue;
                    }
                    .red {
                        stroke:red;
                    }
                </style>
            </defs>
            
            <use x="20" y="20" href="#groupe" class="red" />
            <use x="20" y="80" href="#groupe" class="blue" />
            
            <use X="20" Y="-180" href="#groupe" transform="rotate(90)" class="red" />
            <use X="20" Y="-120" href="#groupe" transform="rotate(90)" class="blue" />
        </svg>

Remarquez ici l’utilisation de l’attribut "transform".