On the previous page we looked at a variety of shapes and how to apply basic styling to them. Our styling, however, was confined to applying flat colour to the borders or the interiors. The only variation we could make to the interior colouring was to alter the opacity by using the rgba() function.
We have more interesting ways of styling the interiors of our shapes: linear gradients, radial gradients and patterns. Gradients invlve one colour changing into another as it progresses across the shape, or from the centre of the page to the periphery. Patterns are limited only by our own imagination.
Here we shall look at types of styling using gradients.
We are introducing two new elements here: the defs and the linearGradient. The defs element is where we store our various linearGradient definitions.
Although defined inside the body of the svg element, they are separated from the code that uses them. This allows them to be called from multiple other elements such as rectangles, polygons and circles.
Now let us eamine our first example of a linear gradient in listing 1 below..
The first element we meet inside our svg element is the defs element, which spans lines 2 - 7. It has only one linearGradient element defined inside it. Let us look at the attributes of this element, starting at line 3.
The first attribute is the id. This is used to identify this particular linear gradient element from all other linear gradients and pattern elements that may be defined inside that defs element.
The attributes x2 and y2 have values of 0% and 100% respectively. This indicates that the gradients will run vertically from top to bottom. Reversing those values would cause the gradient to run horizontally from left to right.
Inside the linearGradient element we meet two stop elements. These elements control the different colours in the gradient and how they blend into each other. We use two attributes of this element: offset and stop-color. The offset element works with percentages and specifies where a colour starts. Obviously the stop_color attribute specifies the colour we wish to use. Thus at line 4 we will be using the colour blue and the 0% indicates that we will be starting at the top of the element we are styling. Similarly line 5 states that we will be using the colour yellow and the 100% indicates that it will start at the bottom of our element
The result of the above offsets is that the image will start with fully saturated blue at the top and fully saturated yellow at the bottom and that the two colours will blend into each other to give a gradient that moves from blue at the top to yellow at the bottom
By now we have a full definition of a gradient. Our next task is to build another element that we can style with that gradient. That element is the rect element at line 8.
The only attribute we need to look at here is the fill attribute. In this case it has a value of "url(#blue-yellow)". This means that the rect element is to be styled according to the instructions in the linearGradient element, whose id is 'blue-yellow'.
The only difference between and Listing is in line 3 of both listings. Notice that the values of x2 and y2 are swapped around. The result of this swapping is that the top-to-bottom of the gradient in Fig 1 changes to the left-to-right gradient shown in Fig 2 below.
Fig 2
Gradients of many Colours
For gradients we have so far used only two colours. We can, however, have as many colours as we want in a gradient - in theory anyway. Listing 3 below shows us the code for producing such a gradient.
Listing 3 above has four stop elements instead of the two that we had in the previous examples. This allows us to add two more colours to our spectrum: red and magenta.
Fig 3 below shows us each of the four colours merging into its neighbour.
Fig 3
Non-merging Gradients
Supposing we did not want our colours to merge into each other, that we wanted solid blocks of colour instead? Could we do that considering that the very essence of gradients is merging. The answer is that we can, by making use of the offset attribute of stop.
As radial gradients are similar to linear gradients we shall not take up as much text in explaining them. We will, instead concentrate and the aspects of radial gradients that are different to their linear equivalents.
In Listing 5 above lines 4 and 5 define the radial gradient. It is done differently from its linear equivalent. The 0% indicates the starting point of the gradient which is in the center of the object. The 100% indicates the edge of the object.
You get some interesting results if you play around with the values of the offsetattributes, especially if you keed both values greater than 70%. Also there is no point going above 100% as any value above that is adjusted back to 100% by the system.
Also try changing the colours as different colours behave differently together
Fig 5
Definition of defs
The word defs is simpmly an abbreviation of 'definitions'. So far we have used it to contain definitions of linear gradients and radial gradients. Also we have had only one definition inside each defs block.
defs are not that restrictive. You can have as many definitions as you want inside them. Also the definitions are not restricted to gradients; you can have patters definitions and other stylings included as well. You can think of a defs element as a repository of various definition types.
Our svg element below contains two radialGradient definition inside its defs block.
More radial Gradients
Here we are creating two rectangles with radial grdients. In the first rectangle the colours will blend into each other while in the second rectangle the colours will be in solid circular blocks. We have produced two similar rectangles for radialGradients above.
Due to the size of the code we have split it into two parts.
Our first radialGradient spans lines 3 - 11. It allows 7 different colours to blend into each other. Magenta is at the centre since the offse is set to 0%. Orange at the outermostblock since the offset at line 10 is set to 100%. the other five colours are arranged accordingly in between,
As with Listing 6-1 the offset attributes are at 0%, 20%, 40%, 50%, 60%, 80% and 100%. The magenta colour starts at 0% and ends at 20%. It does not go beyond this since the second 20% offset starts with cyan, which carries on to 40%.The red, yellow and blue colours are rendered as solid blocks of colour in the same manner
The id of the first gradient is "multi" (see line 3 of Listing 6-1) and therefore the rectangle created at line 30 will be styled according to the specifications of that radialGradient. For the same reason the rectangle created at line 31 will be styled by the radialGradient whose id is "sharpmulti"
Explain the purpose of gradients in SVG and describe the two main types of gradients discussed in the text. How do they differ in terms of color transitions? Provide examples of how each type of gradient can be used to enhance visual elements in SVG.
What is the role of the defs element in SVG? How does it contribute to organizing and reusing graphical elements like gradients? Explain the relationship between the defs element and the elements it contains, such as linearGradient and radialGradient.
Describe the structure of a gradient definition in SVG. What are the key elements and attributes involved? Explain how the stop element is used to control color transitions within a gradient. How do the offset and stop-color attributes affect the appearance of the gradient?
How can you create a gradient that transitions smoothly between multiple colors? Provide an example of an SVG code snippet that defines a gradient with at least three color transitions. Explain how the offset values determine the position of each color within the gradient.
How can you create solid blocks of color within a gradient? Explain the technique described in the text and provide an example of how it can be implemented using the stop element's attributes. What is the visual effect achieved by using this technique?
Compare and contrast linear gradients and radial gradients in terms of their structure, attributes, and visual effects. Provide examples of how each type of gradient can be customized to achieve different appearances. Discuss the advantages and disadvantages of using each type of gradient for specific design scenarios.
Explain the concept of the offset attribute in both linear and radial gradients. How does its interpretation differ between the two types of gradients? What happens when the offset value exceeds 100%? Provide examples of how manipulating the offset attribute can affect the appearance of a gradient.
Discuss the limitations and best practices associated with using gradients in SVG. How many colors can be realistically included in a gradient? What are some potential issues with using gradients extensively in an SVG graphic? Provide tips for optimizing gradient usage to ensure efficient rendering and visual appeal.
Explain the concept of 'abbreviation' in the context of SVG. How does it relate to the defs element? Provide examples of other SVG elements or attributes that might be considered abbreviations. Discuss the benefits and drawbacks of using abbreviations in SVG code.
Summarize the key takeaways from the text regarding gradients in SVG. What are the most important concepts and techniques that a senior high school student should understand after reading the text? How can this knowledge be applied to create visually appealing and effective SVG graphics?
