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".