CSS dans fichiers d'images vectorielles

Dans un fichier correspondant à une image vectorielle, un document Inkscape par exemple, le formatage des objets graphiques peut être réalisé avec une feuille de style donc en CSS.

Premier exemple

Ci-dessous un canevas SVG avec trois courbes de Bézier cubiques :

Le code du fichier SVG

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width ="100%" height ="auto" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox ="0 0 300 200"> <style> path {fill : none ; stroke-width : 4 ;stroke-dasharray:5 5; stroke-linecap : round ; } .rouge {stroke : red ; } .bleu {stroke : blue ; } .verte {stroke : green; } </style> <title>courbe de Bézier avec SVG</title> <path d="M 20,100 C 100,50 200,150 280,100" class ='rouge'/> <path d="M 20,100 C 100,0 200,200 280,100" class ='bleu'/> <path d ="M 20,100 c100,-150 200,150 260,0" class ="verte" /> </svg>

Commentaire

Notez bien la feuille de style à l'intérieur du conteneur STYLE.

Pour les objets SVG vous ne pouvez utiliser en guise de propriétés CSS que les attributs des balises SVG.
Ainsi pour remplir une forme SVG la propriété ne sera pas "background" mais "fill".
Concernant le contour d'un forme SVG les propriétés à utiliser sont stroke, stroke-width, stroke-linecap, stroke-dasharray et non "border" !

Exemple 2

Ci-dessous un image vectorielle animée grâce au CSS.

Le code du fichier SVG

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="auto" viewBox="0 0 400 400" version="1.1"> <style> @keyframes tricolorer { 0%{fill : blue ; } 25%{fill : white ; } 50% {fill : red ; } 75% {fill : white ; } 100% {fill : blue ; } } #croix{animation : tricolorer 15s 0s infinite linear ; } </style> <g transform="translate(0,-652.36216)" id ="croix"> <path d="m234.1 693.3 19.8 14.7 1 323.1-20.8-15.7z" fill="#666"/> <rect y="692.4" x="162" height="319.6" width="70"/> <rect y="752.4" x="90" height="60" width="220" /> <rect y="872.4" x="70" height="60" width="260" /> <path d="m311 751.4 20 10.8 0 61-20-11.8zM331 870.4l21 13.8 0.4 61-21.4-9.9zM160 1012.4l80 0 12.7 19-78 1zM236.5 933.7 330 932.4l18.7 11.7-93.5 1.4zM236.5 813.7 310 812.4l22.2 12.4-85.2-0.7z" fill="#666"/> </g> </svg>

Commentaire

Dans la feuille de style on définit un modèle d'animation appelé "tricolorer".
Ce modèle d'animation est appliqué à un objet SVG identifié "croix".
Retour menu