• {0} Facile|{1} Moyenne|{2} Difficile

Mis à jour le 08/01/2013

Colorier vos formes

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Apprenons maintenant à ajouter un peu de couleur à nos formes !

Ajouter du CSS

Eh oui, on utilise le CSS pour ajouter du style aux formes SVG. Quelques propriétés CSS peuvent être utilisées en SVG, mais il existe aussi des propriétés propres à ce langage.

Mais voyons d'abord comment intégrer du CSS dans un document SVG...

Nous avons quatre possibilités :

  • utiliser une feuille de style externe ;

  • utiliser une feuille de style interne ;

  • utiliser des styles inline ;

  • utiliser des attributs.

(Presque) comme en xHTML, quoi ! ;) Voyons chacune de ces méthodes en détails...

Feuille de style externe

On rattache une feuille de style à un document SVG en incluant une déclaration XML de feuille de style :

<?xml-stylesheet href="masuperfeuilledestyle.css" type="text/css"?>

juste après la déclaration XML du document, comme ceci :

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="masuperfeuilledestyle.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="800" height="800"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Exemple de feuille de style externe</title>
<rect x="200" y="100" width="600" height="300"/>
</svg>

L'attribut href pointe vers le chemin de votre feuille de style, ici masuperfeuilledestyle.css, qui serait comme ça :

rect
{
propriété: valeur;
propriété: valeur;
propriété: valeur;
}

Je vous conseille d'utiliser cette méthode si vous avez plusieurs documents SVG à styler de la même façon.

Feuille de style interne

Pour incorporer une feuille de style dans le document SVG lui-même, vous devez utiliser la balise <style>, mais attention : à l'intérieur de celle-ci, vous devrez écrire votre CSS entre <![CDATA[ et ]]>.

Mais pourquoi donc ? o_O !

En fait, c'est pour indiquer au navigateur que le texte qui suit n'est pas du SVG et n'a donc pas à être lu comme tel. Si vous ne rajoutiez pas ces caractères, le navigateur essaierait de lire le CSS comme étant du SVG et cela générerait tout plein d'erreurs !

Un exemple :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="800" height="500"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<style type="text/css"><![CDATA[
rect
{
propriété: valeur;
propriété: valeur;
propriété: valeur;
}
]]></style>
</defs>
<rect x="200" y="100" width="600" height="300"/>
</svg>

Vous remarquerez que j'ai inclus <style> dans la balise <defs>. Ce n'est pas obligatoire, mais c'est sémantiquement souhaitable.

Je vous recommande d'utiliser cette méthode si vous avez beaucoup de formes à styler pareillement dans votre document.

Styles inline

Ici, c'est un attribut style que l'on rajoute à la balise à styler. C'est la méthode que j'utilise le plus souvent, car une forme SVG est souvent unique.
Par exemple :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="800" height="500"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
</defs>
<rect x="200" y="100" width="600" height="300"
style="propriété:valeur; propriété:valeur; propriété:valeur;" />
</svg>

Attributs

C'est une méthode plutôt longue qui consiste à mettre en attribut chaque propriété CSS. Je ne vous conseille pas de l'utiliser. On l'utilise généralement pour faire des retouches. Je vous l'apprends seulement pour que vous ne soyez pas trop déconcertés si vous la rencontrez.
Je vous donne quand même un exemple, on ne sait jamais...

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="800" height="500"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
</defs>
<rect x="200" y="100" width="600" height="300"
propriété="valeur" propriété="valeur" propriété="valeur" />
</svg>

La couleur

Pour commencer, je vous montre quatre propriétés toutes simples pour colorier vos formes.

Le remplissage

C'est la propriété fill qui permet d'indiquer la couleur de votre forme. (ou de votre texte, mais laissons cela à plus tard !... ;) ).

Comme en CSS traditionnel, vous avez trois façons d'indiquer la couleur :

  • un nom de couleur ;

  • une valeur rouge-vert-bleu ;

  • une valeur hexadécimale.

Je ne vous expliquerai pas en détail chaque méthode, étant donné que M@teo l'a si bien fait ici.
Exemple :

<rect x="20" y="10" width="200" height="300"
style=" fill:#26CD22; " />

Vous pouvez aussi écrire none (aucun remplissage). Dans ce cas, le remplissage de la forme sera transparent.

La couleur du trait

Même façon d'indiquer la couleur, mais cette fois avec la propriété stroke.

<rect x="20" y="10" width="200" height="300"
style=" fill:#26CD22; stroke:#1F56D2" />

none s'applique ici aussi.

Pour l'instant, le trait a 1 pixel de large, car c'est sa valeur par défaut. Nous apprendrons à styliser les lignes plus particulièrement dans un prochain chapitre.

L'opacité

Vous pouvez changer la transparence du remplissage avec la propriété fill-opacity, et la transparence du trait avec la propriété stroke-opacity. Vous indiquez un nombre décimal entre 0 et 1.

<rect x="20" y="10" width="200" height="300"
style=" fill:#26CD22; stroke:#1F56D2; fill-opacity:0.7; stroke-opacity:0.5" />
opacity

Les dégradés

Tout d'abord, sachez qu'il y a deux types de dégradés en SVG :

  • les dégradés linéaires, comme ceci :

Image utilisateur
  • et les dégradés radiaux, comme ceci :

Image utilisateur

Les dégradés linéaires

Inclure le dégradé

On inclut un dégradé linéaire dans la balise <defs>, avec la balise <linearGradient>. Celle-ci a 5 attributs : un id, et x1, y1, x2, et y2, qui servent à indiquer le sens (horizontal, vertical, diagonal) du dégradé. On indique ces valeurs en pourcentages.

  • Pour faire un dégradé horizontal, mettez des valeurs différentes pour x1 et x2 (0% et 100%) et des valeurs égales pour y1 et y2 (0%).

  • Pour faire un dégradé vertical, mettez des valeurs égales pour x1 et x2 (0%) et des valeurs différentes pour y1 et y2 (0% et 100%).

  • Pour faire un dégradé diagonal, mettez des valeurs différentes pour x1 et x2 et des valeurs différentes pour y1 et y2.

Exemple :

<defs>
<linearGradient id="vertbleu" x1="0%" y1="0%" x2="100%" y2="100%">
</linearGradient>
</defs>
Les dégradés diagonals

Concrètement, x1 et y1 sont les coordonnées du point de départ du vecteur du dégradé et x2 et y2, les coordonnées de son point de fin. Donc si vous voulez faire un dégradé incliné, comme ceci :

Image utilisateur

vous devrez mettre 0% à x1 et y1 et 100% à x2 et y2.

Les couleurs

Chaque couleur dans le dégradé est introduite à l'aide d'une balise <stop />.
C'est son attribut offset qui détermine (en pourcentage) l'endroit dans le dégradé où la couleur est pure (non mélangée).
On utilise le CSS pour déterminer la couleur ainsi que son opacité, à l'aide des propriétés stop-color et stop-opacity.

Reprenons notre exemple de tout à l'heure et ajoutons-lui des couleurs :

<defs>
<linearGradient id="vertbleu" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#26CD22;
stop-opacity:1"/>
<stop offset="100%" style="stop-color:#1F56D2;
stop-opacity:1"/>
</linearGradient>
</defs>
Utiliser le dégradé

Pour appliquer un dégradé à une forme, on indique son URL à l'aide de son id comme valeur de la propriété fill ou stroke de la forme.

De ke sé ? o_O

<defs>
<linearGradient id="vertbleu" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#26CD22;
stop-opacity:1"/>
<stop offset="100%" style="stop-color:#1F56D2;
stop-opacity:1"/>
</linearGradient>
</defs>
<rect x="20" y="10" width="800" height="300"
style=" fill:url(#vertbleu); " />

Ici, j'ai utilisé le dégradé avec fill, mais j'aurais aussi pu l'appliquer au trait de la forme, avec stroke.

Les dégradés radiaux

On introduit un dégradé radial avec la balise <radialGradient>, qui s'inclut elle aussi dans <defs>. Elle a 6 attributs :

  • fx, la coordonnée sur l'axe des x du centre du dégradé, où sera dessinée la couleur dont l'attribut offset est à 0%. Pour que votre dégradé commence au centre de votre forme, mettez 50% ;

  • fy, la coordonnée sur l'axe des y du centre du dégradé ;

  • cx, la coordonnée (ou le pourcentage) sur l'axe des x du centre du plus grand cercle (la couleur dont l'offset est à 100%) ;

  • cy, la coordonnée (ou le pourcentage) sur l'axe des y du centre du plus grand cercle ;

  • r, le rayon du plus grand cercle ;

  • Et l'id, bien sûr !

Vous devez mettre des valeurs en pourcentage (%) partout, sauf pour l'id.

Pour les couleurs et l'utilisation, c'est comme pour les dégradés linéaires :

<defs>
<radialGradient id="vertrosebleu" r="50%" cx="20%" cy="20%" fy="50%" fx="50%">
<stop offset="0%" style="stop-color:#26CD22;
stop-opacity:1"/>
<stop offset="50%" style="stop-color:#D80E7C;
stop-opacity:1"/>
<stop offset="100%" style="stop-color:#1F56D2;
stop-opacity:1"/>
</radialGradient>
</defs>
<rect x="00" y="00" width="800" height="400"
style=" fill:url(#vertrosebleu); " />

Quelques exemples :

Image utilisateur

(r="50%" fx="50%" fy="50%" cx="50%" cy="50%")

Image utilisateur

(r="20%" fx="50%" fy="50%" cy="50%" cx="50%")

Image utilisateur

(r="50%" fx="60%" fy="80%" cx="80%" cy="60%")
Exercez-vous avec ces attributs, ça m'a pris à moi aussi un certain temps avant de les assimiler complètement.

Les motifs

Les motifs sont utilisés pour remplir une forme ou son trait avec une image se répétant. On introduit un motif dans la section <defs>, avec la balise <pattern>. Visuellement, un motif est en fait la répétition d'un rectangle à l'infini. <pattern> définit ce rectangle, donc ses enfants sont les éléments à inclure dans le rectangle.

Cette fois, 5 attributs :

  • x et y, les coordonnées du rectangle à répéter, que vous pouvez laisser à 0,0 ;

  • height, la hauteur du rectangle à répéter ;

  • width, la largeur de ce rectangle ;

  • patternUnits, (remarquez la casse) qui indique la façon de calculer les coordonnées pour les quatre attributs précédents. Vous devez indiquer userSpaceOnUse (attention à la casse encore une fois).

Par exemple, si je veux qu'un rectangle soit rempli avec un motif d'ellipse, je peux faire comme suit :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="800" height="800" version="1.1" xml:space="preserve"
xmlns="http://www.w3.org/2000/svg">
<title>Test sur un motif</title>
<defs>
<pattern id="motifdellipse" patternUnits="userSpaceOnUse"
x="0" y="0" width="50" height="50">
<ellipse style=" fill:red; stroke:black; "
cx="25" cy="20" rx="20" ry="15" />
</pattern>
</defs>
<rect x="15" y="15" width="400" height="100"
style="fill:url(#motifdellipse);
stroke:#acdc66; fill-opacity:1;
stroke-opacity:01" />
</svg>

Ce qui donnerait ceci :

Image utilisateur

Ici, je l'ai utilisé avec la propriété fill, mais comme pour les dégradés, je peux aussi l'utiliser avec stroke.

Les bitmaps

Une utilisation intéressante des motifs est d'y inclure des images bitmap qui seraient trop longues, voir impossibles à coder en SVG, comme celle-là :

Image utilisateur

Dans ce cas, on doit inclure le fichier avec une balise <image />, qui a cinq attributs :

  • x, position de l'image sur l'axe des x ;

  • y, position de l'image sur l'axe des y ;

  • height, hauteur de l'image ;

  • width, largeur de l'image ;

  • [préfixe]:href, la source de l'image.

La seule particularité est [préfixe]:href. En effet, le SVG seul ne permet pas totalement de lier des fichiers. Pour cela, il faut utiliser XLink, un langage qui sert justement à faire des liens entre des fichiers XML. Il faut par conséquent rajouter un namespace à la balise <svg> externe, comme ceci (troisième ligne) :

<svg width="800" height="800" version="1.1" xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Test sur un motif, avec une image</title>
<defs>
<pattern id="motifdefractale" patternUnits="userSpaceOnUse"
x="0" y="0" width="50" height="37.5" >
<image x="0" y="0" width="50px" height="37.5px" xlink:href="fractale.jpg" />
</pattern>
</defs>
<rect x="15" y="15" width="400" height="100"
style="fill:url(#motifdefractale);
stroke:#acdc66; fill-opacity:1;
stroke-opacity:1;" />
</svg>

Vous n'êtes pas obligés d'écrire "xlink" comme préfixe, pourvu que vous fassiez attention à l'appeler correctement pour l'attribut href de <image />. Personnellement, je trouve que c'est plus sensé.

L'exemple précédent donnerait ce résultat dans Internet Explorer :

Image utilisateur

Et voilà ! Vous pouvez maintenant dessiner de belles formes pleines de couleurs ! :D

Exemple de certificat de réussite
Exemple de certificat de réussite