Tutorial SVG 7: radial gradients

svg elementen

SVG radial 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 radial 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"/>
              
        <radialGradient id="myRadialGradient">
        <stop offset="0" stop-color="white"/>
        <stop offset="1" stop-color="black"/>
        </radialGradient>

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

Source code example: Applying Gradients to a Shape

<svg>
    <defs>
        <radialGradient id="myRadialGradient">
        <stop offset="0" stop-color="white"/>
        <stop offset="1" stop-color="black"/>
        </radialGradient>
    </defs> 
	<circle cx="150" cy="150" r="100" fill="url(#myRadialGradient)"/>
</svg>

Let's start with a simple example. In the next examples we apply the radial gradient to the fill of a path. In example 2 and 3 we will show a number of specific cases.

Applying radial gradients to a path

<radialGradient id="a3" gradient>
  <stop offset="0" stop-color="white"/>
  <stop offset="1" stop-color="black"/>
</radialGradient>

<g>
  <use xlink:href="#path1" fill="url(#a3)" />
</g>
<radialGradient id="b3" 
gradientTransform="rotate(45,0.7,0)" >
  <stop offset="0" stop-color="white"/>
  <stop offset="1" stop-color="black"/>
</radialGradient>

<g>
  <use xlink:href="#path1" fill="url(#b3)"/>
</g>
<radialGradient id="c3" >
  <stop offset="0" stop-color="white"/>
  <stop offset=".25" stop-color="black"/>
  <stop offset=".75" stop-color="white"/>
  <stop offset="1" stop-color="black"/>
  </radialGradient>
<g>
  <use xlink:href="#path1" fill="url(#c3)" />
</g>
<radialGradient id="d3" gradientTransform="rotate(45,0.7,0)" >
  <stop offset="0" stop-color="white"/>
  <stop offset=".25" stop-color="black"/>
  <stop offset=".75" stop-color="white"/>
  <stop offset="1" stop-color="black"/>
</radialGradient>


<g>
  <use xlink:href="#path1" fill="url(#d3)" />
</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"/>
<radialGradient id="e3">
  <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=".7" stop-color="blue"/>
  <stop offset=".8" stop-color="indigo"/>
  <stop offset=".9" stop-color="violet"/>
  <stop offset="1" stop-color="white"/>
</radialGradient>
<g>
  <use xlink:href="#path1" fill="url(#e3)" />
</g>
<radialGradient id="f3">
  <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"/>
  </radialGradient>
<g>
  <use xlink:href="#path1" fill="url(#f3)"  />
</g>
<radialGradient id="g3" >
  <stop offset="0" stop-color="Orange " />
  <stop offset=".45" stop-color="Orange " s
   top-opacity="0"/>
  <stop offset=".55" stop-color="Black " 
   stop-opacity="0"/>
  <stop offset="1" stop-color="Black " />
</radialGradient>
<g>
  <use xlink:href="#path1" fill="url(#g3)"  />
</g>
<radialGradient id="h3" 
gradientTransform="rotate(90,.2,.8)" >
  <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="violet"/>
  <stop offset="1" stop-color="RoyalBlue "/>
</radialGradient>
<g>
  <use xlink:href="#path1" fill="url(#h3)"  />
</g>

Next tutorial

Leave a comment