|
|
|
|
| |
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:
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:
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.
|
|
kukofka@scale-a-vector.de
