Couleurs

Couleurs simples

Le SVG utilise le même système de couleur que les feuilles de style css à savoir les couleurs nommées (black, white, red, ...) les couleurs hexadécimale, les couleur rgb et hsl

Dégradé linéaire

Le gradient est défini à l'intérieur d'une zone d'1px de longueur. Une mise à l'échelle est opérée pour remplir ensuite la zone de remplissage.

Trés souvent les coordonnées s'expriment en pourcentage

<defs>
<linearGradient id="degrade">
  <stop  offset="0" stop-color="red"/>
  <stop  offset="0.1357" stop-color="orange"/>
  <stop  offset="0.2959" stop-color="yellow"/>
  <stop  offset="0.4686" stop-color="green"/>
  <stop  offset="0.6501" stop-color="blue"/>
  <stop  offset="0.8364" stop-color="indigo"/>
  <stop  offset="1" stop-color="violet"/>
</linearGradient>
</defs>
<rect ... fill="url(#degrade)" />

Les propriétés x1 y1 ; x2 y2 définissent un vecteur de direction pour le dégradé

<linearGradient id="degrade" x1="0" x2="1" y1="0" y2="1">

Dégradé radial

Le dégradé se propage depuis le centre d'un cercle vers l'extérieur.

<defs>
<radialGradient id="degrade2">
  <stop offset="0" stop-color="red"/>
  <stop offset="0.5" stop-color="orange"/>
  <stop offset="1" stop-color="yellow"/>
</radialGradient>
</defs>
<rect ... fill="url(#degrade2)" />
</svg>

gradientUnits

userSpaceOnUse le dégradé s'étend sur toute la surface de l'illustration. La couleur à l'intérieur des objets dépend de leur position

objectBoundingBox le dégradé s'etend dans les limites de l'objet

Motifs

Pour le remplissage en plus de la couleur il est possible d'utliser un motif qui servira à remplir la forme

<defs>
  <pattern id="star" viewBox="271 443 12240 12005" width="0.2" height="0.2" x="0.13" y="0">
  <path d="M6760 ..." /> 
</pattern>