[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Graphisme > Divers > Le SVG > Les graphiques vectoriels > Colorier vos formes > Lecture du tutoriel

Colorier vos formes

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

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

Sommaire du chapitre :

Ajouter du CSS
La couleur
Les dégradés
Les motifs
Q.C.M.

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 :
Code : XML

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

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

Code : XML

<?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 :

Code : CSS

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.

Ne mettez pas de commentaire dans vos fichiers CSS, car cela peut générer des erreurs.

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 :

Code : XML

<?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 :

Code : XML

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

Code : XML

<?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 :

Code : XML

1 2	<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.

Code : XML

1 2	<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.

Pour changer la couleur d'une ligne (<line />), vous devez utiliser stroke, et non fill. fill ne produira rien du tout.

Pour les lignes brisées (<polyline />), vous devez encore utiliser stroke, mais l'utilisation de fill remplira le fond de la ligne, comme ceci :

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.

Code : XML

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

Faites bien attention à mettre un point (.), et non une virgule, pour les nombres décimaux. Sinon, le navigateur ne comprendra pas et n'affichera aucun remplissage, ou aucun trait.

Si vous essayez le code précédent, vous pouvez difficilement voir l'effet que produit stroke-opacity, car le trait a une valeur par défaut de 1 pixel. Comme je vous l'ai dit, nous corrigerons ceci dans un prochain chapitre. Par contre, si vous êtes sous IE, vous pouvez zoomer. Voici le rectangle une fois zoomé :

On dirait que la forme a deux traits, de différentes couleurs. En fait, c'est parce que le milieu du trait se place à la limite de la forme, ce qui fait qu'une moitié du trait se retrouve d'un côté du bord de la forme, et l'autre moitié, de l'autre côté du bord de la forme. C'est cette moitié intérieure qui produit cet effet de double bordure, car si on réduit l'opacité du trait, cela laisse voir la forme derrière.

opacity

Si vous voulez mettre des valeurs égales à fill-opacity et à stroke-opacity, vous pouvez utiliser la propriété générale opacity, qui représente la totalité de la forme (autant son remplissage que son trait) :
Code : XML

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

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 :

et les dégradés radiaux, comme ceci :

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 :

Code : XML

<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>uploads/fr/files/7001_8000/7424.jpg </image>

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 :

Code : XML

<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

Code : XML

<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 :

Code : XML

<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>uploads/fr/files/7001_8000/7425.jpg </image>
(r="50%" fx="50%" fy="50%" cx="50%" cy="50%")

<image>uploads/fr/files/7001_8000/7426.jpg </image>
(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.

Vous pouvez aussi ajouter un autre attribut, autant à <linearGradient> qu'à <radialGradient> : spreadMethod, qui indique la façon de répéter le dégradé. Les valeurs possibles sont :

pad (par défaut) : aucune répétition :

<image>uploads/fr/files/7001_8000/7426.jpg </image>

reflect : à la fin du dégradé, celui-ci recommence, mais inversement :

<image>uploads/fr/files/7001_8000/7428.jpg </image>

repeat : le dégradé se répète sans s'inverser (ce qui donne rarement un beau résultat) :

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.

Si vous n'incluez rien dans <pattern>, le rectangle sera transparent, le navigateur affichera donc du blanc.

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 :

Code : XML

<?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 :

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

Malheureusement, Firefox 1.5 ne gère pas les motifs.

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à :

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) :

Code : XML

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

Vos images ne peuvent pas être en n'importe quel format : Firefox et IE gèrent PNG, JPEG, GIF et SVG, mais FF peut aussi afficher des bitmap (.bmp), bien que ce ne soit pas du tout recommandé car des .bmp n'ont aucune compression, ce qui les rend très lourds.

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

Bien entendu, l'usage de <image /> ne se réduit pas aux motifs : vous pouvez les utiliser partout dans vos documents

:
Code : XML

<svg width="800" height="800" version="1.1" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink"    
xmlns="http://www.w3.org/2000/svg">
<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" xk: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;" />

<image x="100" y="200" width="200px" height="150px" xlink:href="fractale.jpg" />

</svg>

Firefox gère les images seules (ouf !).

Q.C.M.

Quand utiliser <![CDATA[ et ]]> ?

Pour le CSS interne.
Pour le CSS externe.
Dans les attributs

Quelle propriété gère la transparence des formes ?

transparency
opacity
alpha

Quelle balise permet l'insertion d'une couleur dans un dégradé ?

<color-stop />
<color />
<stop />

De quelle façon peut-on rattacher un dégradé ou un motif à une forme ?

Avec l'attribut pattern ou gradient de la forme.
En incluant le dégradé ou le motif comme enfant de la forme.
Avec les propriétés fill ou stroke de celle-ci.

Statistiques de réponses au QCM

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

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité