Tutorial SVG 6: lineair gradients

svg elementen

SVG linear gradients

gradients are gradual color transitions that evoke special graphic effects, such as gloss, depth and lightings. SVG supports the linear and the radial gradient. SVG also support transparency (opacity) which we use in combination with the gradient effects

Source code example: Applying linear gradients to a path

<svg>
    <defs>
        <path id="path1" d="M300,252c0,26.51-21.49,48-48,48H48
        c-26.51,0-48-21.49-48-48V48C0,21.49,21.49,0,48,0h204c26.51,0,48,21.49,48,48V252z"/>
     
        <linearGradient id="myLineairGradient">
        <stop offset="0" stop-color="white"/>
        <stop offset="1" stop-color="black"/>
        </linearGradient>
    </defs> 
    <g>
      <use xlink:href="#path1" fill="url(#myLineairGradient)"  />
    <g>
</svg>

Source code example: Applying Gradients to a Shape

<svg>
    <defs>
        <linearGradient id="myLineairGradient">
        <stop offset="0" stop-color="white"/>
        <stop offset="1" stop-color="black"/>
        </linearGradient>
    </defs> 
    <rect fill="url(#myLineairGradient)" x="10" y="10" width="100" height="100"/>
</svg>

Let's start with a simple example. In the next examples we apply the linear gradient to the fill of a path.

Applying Gradients to a Path

<linearGradient id="a">
  <stop offset="0" stop-color="white"/>
  <stop offset="1" stop-color="black"/>
</linearGradient>
<g>
  <use xlink:href="#path1" fill="url(#a)" />
</g>
<linearGradient id="c" 
gradientTransform="rotate(90,.5,.5)"> 
  <stop offset="0" stop-color="white"/>
  <stop offset="1" stop-color="black"/>
  </linearGradient>
<g>
  <use xlink:href="#path1" fill="url(#c)"/>
</g>
<linearGradient id="g" gradient
Transform="rotate(90,.5,.5)">
  <stop offset="0" stop-color="white"/>
  <stop offset=".25" stop-color="black"/>
  <stop offset=".75" stop-color="white"/>
  <stop offset="1" stop-color="black"/>
  </linearGradient>
<g>
  <use xlink:href="#path1" fill="url(#g)" />
</g>
<linearGradient id="e">
  <stop offset="0" stop-color="white"/>
  <stop offset=".25" stop-color="black"/>
  <stop offset=".75" stop-color="white"/>
  <stop offset="1" stop-color="black"/>
  </linearGradient>

<g>
  <use xlink:href="#path1" fill="url(#e)" />
</g>

More Linear gradients with opacity

In the next examples we will use opacity in our gradients using the stop-opacity attribute. Stop-opacity takes values between 0 (transparent) and 1.0 (fully opaque). You can thus make gradients act like masks, allowing, for example, an image or color underneath to gradually fade into view.

<stop offset=".3" stop-color="red" stop-opacity="0.7"/>

<linearGradient id="a">
  <stop offset="0" stop-color="red"/>
  <stop offset=".2" stop-color="orange"/>
  <stop offset=".4" stop-color="yellow"/>
  <stop offset=".6" stop-color="green"/>
  <stop offset=".8" stop-color="blue"/>
  <stop offset=".9" stop-color="indigo"/>
  <stop offset="1" stop-color="violet"/>
  </linearGradient>

<g>
  <use xlink:href="#path1" fill="url(#a)" />
</g>
<linearGradient id="b2" gradient
Transform="rotate(90,.5,.5)">
  <stop offset="0" stop-color="red"/>
  <stop offset=".1" stop-color="white"/>
  <stop offset=".2" stop-color="red"/>
  <stop offset=".3" stop-color="white"/>
  <stop offset=".4" stop-color="red"/>
  <stop offset=".5" stop-color="white"/>
  <stop offset=".6" stop-color="red"/>
  <stop offset=".7" stop-color="white"/>
  <stop offset=".8" stop-color="red"/>
  <stop offset=".9" stop-color="white"/>
  <stop offset="1" stop-color="red"/>
  </linearGradient>
<g>
  <use xlink:href="#path1" fill="url(#b2)"  />
</g>
<linearGradient id="c2" gradient
Transform="rotate(45,.5,.5)">
  <stop offset="0" stop-color="Silver " />
  <stop offset=".45" stop-color="SkyBlue " 
  stop-opacity="0"/>
  <stop offset=".55" stop-color="SlateBlue " 
  stop-opacity="0"/>
  <stop offset="1" stop-color="SlateGray " />
  </linearGradient>
<g>
  <use xlink:href="#path1" fill="url(#c2)"  />
</g>

Next tutorial

Leave a comment