Tuto SVG 09 - Gradients et patterns

Public visé: dev lambda.

Objectif

• Utiliser des dégradés et des motifs de remplissage.

Références W3C

• SVG 2 - Paint Servers: https://www.w3.org/TR/SVG2/pservers.html

Exemple

<svg xmlns="http://www.w3.org/2000/svg" width="220" height="120" viewBox="0 0 220 120">
  <defs>
    <linearGradient id="grad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#3a6ea5"/>
      <stop offset="100%" stop-color="#f2c94c"/>
    </linearGradient>
    <pattern id="grid" width="8" height="8" patternUnits="userSpaceOnUse">
      <path d="M8 0 H0 V8" fill="none" stroke="#ccc" stroke-width="1"/>
    </pattern>
  </defs>
  <rect x="10" y="10" width="90" height="60" fill="url(#grad)"/>
  <rect x="120" y="10" width="90" height="60" fill="url(#grid)"/>
</svg>

tutos-svg-09-gradients-patterns.svg

À retenir

• Les paint servers vivent dans defs et s'utilisent via url(#id).
• patternUnits="userSpaceOnUse" fixe le motif dans le repère global.
• Les gradients peuvent être linéaires ou radiaux.

Exercice

• Change linearGradient en radialGradient.