scale-a-vector.de - zur homepage
 
search



Scalable Vector Graphics  




















Tutorials
 
 Gradients
 SVG + PHP
 Sound

Gradients 



Latest update: 10.11.2002 
   
There will be more tutorials, if I have time.
 
 Colour gradients
   
I assume that you already know about the basic structure of an SVG-file. In case you don't, simply check the sourcecode of one of the here embedded example-files. The sourcecode which you can see here on this page only refers to the necessary elements for gradients.
 
Let's start with a simple example:
 
two colours
horizontal gradient

First you define the gradient <linearGradient> in the definition-tag <defs>:
 
<defs>
 <linearGradient id="verl-hor" x1="0%" y1="0%" x2="100%" y2="0%"
  spreadMethod="pad">
   <stop offset="0%" style="stop-color:lightyellow" />
   <stop offset="100%" style="stop-color:#b6cde3" />
 </linearGradient>
</defs>
 
Since the gradient is horizontal, you have to look at the X-coordinate of the gradient: x1 is on 0% and x2 is on 100%. The Y-values are both on 0%.
If the gradient went from top to bottom, you would have to give the second Y-coordinate the value 100%.
 
The colours in this rectangle could however also run diagonal, like this:
 
Here the first two X- and Y-coordinates are on 0% and the second X- and Y-coordinates are on 100%:
x1="0%" y1="0%" x2="100%" y2="100%

 
stop-color
 
In this example two colours are involved: lightyellow and lightblue (#b6cde3). In the first example in the very top the gradient goes through the whole rectangle, from 0 to 100%. Thus the offset for the yellow is on 0% and for the blue on 100%:
 
<stop offset="0%" style="stop-color:lightyellow" />
<stop offset="100%" style="stop-color:#b6cde3" />

 
You can change this, however:
 
Here the offset for the colour blue is already on 40%,
which means the gradient from yellow to blue ends after 40% of the route.


<stop offset="0%" style="stop-color:lightyellow" />
<stop offset="40%" style="stop-color:#b6cde3" />

 
 
By the way, you can also assign opacity to single colours of a gradient:
 
Here the blue (#b6cde3) is transparent,
therefore the word 'Hallo' is showing through.


<stop offset="40%" style="stop-color:#b6cde3;stop-opacity:0.6" />
 
 
Filling
 
Now you want to use and insert your defined gradient somewhere.
In this case I filled a rectangle with it:
 
<rect x="0" y="0" width="100" height="50" style="fill:url(#verl-hor);stroke:black;stroke-width:1" />
 
You can see, instead of filling the shape with a colour (fill:blue) you fill it with a gradient: fill:url(#verl-hor).
After the hash # there comes the ID, which has before been assigned to the defined gradient.
 
You could also make a page full of different shapes and fill them all with this once defined gradient.
 
Also, text can be filled with a gradient. In this example I use the same gradient from the very first rectangle above:
 
Text is filled the same way as e.g. rectangles:
<text x="5" y="44" fill="url(#verl-hor)"...>

 
Nice buttons
 
Now we look at a slightly more beautiful example, a button in MacOS 10 aqua-style:
 
These buttons are really nice, aren't they? Sure, this is also due to the additionally assigned shadow-filter, but the latter is not the task right now.
As opposed to the simple examples above, here there are three colours resp. stop-colors involved.

Let's take a look at the code for the gradient of button no. 3:
 
<defs>
<linearGradient id="verlaufblau2" x1="0%" y1="0%" x2="0%" y2="100%"
 spreadMethod="pad">
  <stop offset="0%" style="stop-color:#edf1ff" />
  <stop offset="50%" style="stop-color:#203aac" />
  <stop offset="100%" style="stop-color:#4993ea" />
</linearGradient>
</defs>

 
I used three different colours: A dark blue for the center, a brighter blue for the area below and an even brighter blue for the area above.
 
For the gradient in button no. 4 I only chose two different colours, a bright grey for the center and white for the areas above and below it:
 
<defs>
<linearGradient id="verlaufweiss" x1="0%" y1="0%" x2="0%" y2="100%"
 spreadMethod="pad">
  <stop offset="0%" style="stop-color:white" />
  <stop offset="50%" style="stop-color:#cccccc" />
  <stop offset="100%" style="stop-color:white" />
</linearGradient>
</defs>
 
 
spreadMethod
 
Until now I used the spreadMethod="pad" in all examples. This is the default value. You can, however, also use spreadMethod="reflect", which causes the gradient to repeat itself, while leaving the smooth transitions:
 
This way you can e.g. make a theatre-curtain.

Sure, I also had to play a little with those two X-coordinates:
 
<linearGradient id="IDvorhang" x1="50%" y1="0%" x2="60%" y2="0%"
 spreadMethod="reflect">
 <stop offset="0%" style="stop-color:red" />
 <stop offset="100%" style="stop-color:#444444" />
</linearGradient>

 
There also is a third possibility, spreadMethod="repeat":
 
Same expample as above, the only difference is spreadMethod="repeat".
If you let the whole thing run vertically, you could e.g. create slats of a venetian blind.

 
Radial gradients
 
The first example shows a gradient, which starts right in the very center of a circle:
<defs>
<radialGradient id="grad-circ">
 <stop offset="2%" stop-color="white" />
 <stop offset="90%" stop-color="#ff8080" />
</radialGradient>
</defs>

 
In the second example I moved the center/the beginning of the gradient by using fx="40%" and fy="20%". If I had given both attributes the value of 50%, it would result in the same central gradient from the first example. So you can - as seen above - leave out the attributes fx and fy, if you want a centered gradient.
 
<defs>
<radialGradient id="grad-circ2" fx="40%" fy="20%">
 <stop offset="2%" stop-color="white" />
 <stop offset="40%" stop-color="#ffb0b0" />
 <stop offset="90%" stop-color="#ff8080" />
</radialGradient>
</defs>


A further difference from the first circle makes the use of a third colour in the middle of the gradient. By using such an intermediate colour between the brightest and the darkest colour, the in this case wanted spotlight-effect is coming out more clearly.
 
A circle is then filled with the defined gradient:
 
<circle cx="42" cy="40" r="35" fill="url(#grad-circ2)" />
 
And, yes, you can also play around with spreadMethod in a circle.
 
There are loads of possibilities to play around and be creative. This file was just meant to teach you the basics.

 



© 2001-2004 Petra Kukofka E-Mail symbol  kukofka@scale-a-vector.de back to topback to top