SVG Gradient

SVG gradients can be defined as a smooth transition from one color to another. In SVG, there are two types of gradients, namely: linear gradients and radial gradients

SVG gradients are a method of filling shapes with colors in an uneven way. Thus, the fill or stroke of a shape can change from one color to another. For certain types of graphics, this looks quite nice.

Gradient example

This is the appearance of applying gradients to shape fill and stroke:

The first rectangle always has the same stroke color, but the gradient fill color (from light to dark green).
　 　The second rectangle has applied gradients to both the stroke and fill colors.
　 　The third rectangle has a gradient applied to the strokes but no fill.
　 　The fourth rectangle has applied a gradient to the fill but no stroke.

There are two types of gradients:

1. Linear gradients

2. Radial gradient

The following sections will introduce these two aspects.

Linear gradients

Linear gradients change from one color to another uniformly in a linear way. At the beginning of this article, you have already seen some simple linear gradient examples.

Colors can change vertically, horizontally, or along the vector you define. You can also use gradients to fill only part of a shape, not the entire shape. Before proceeding, here are some visual examples:

The first rectangle uses a vertical gradient. The second rectangle uses a horizontal gradient. The third rectangle uses a diagonal gradient (darkening towards the lower right corner). The fourth rectangle is filled with the gradient only on the right half of the rectangle. All of these are possible with SVG linear gradients.

linear gradients are created using<linearGradient>element-defined. Here is an example:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<defs>
　　　　<linearGradient id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　x1="0%" y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="0%" y2="100%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　　　<stop offset="0%"      stop-color="#00cc00" stop-opacity="1"/>
　　　　　　<stop offset="100%" stop-color="#006600" stop-opacity="1"/>
　　　　</linearGradient>
　　</defs>
　　<rect x="10" y="10" width="75" height="100" rx="10" ry="10"
　　　　　style="fill:url(#myLinearGradient"1);
　　　　　　　　　　　　stroke: #005000;
　　　　　　　　　　　　stroke-width:　3;"　/></svg>

As you can see,<linearGradient>-element nested within<defs>-element within. The gradient definition must always be nested within<defs>-element within, so they can be referenced later in the SVG image. In this example, the linear gradient is defined by the CSS property ((fill:url(#myLinearGradient1))） <rect>itsstyleproperties within-element reference.

This<linearGradient>-elements.<stop>-elements have two nested<linearGradient>-elements). ThespreadMethodelements control what the gradient affects before and after it is applied (the direction of occurrence and<stop>-properties). The

This is<linearGradient>-elements control the colors used in the gradient, how far the shape colors start and stop, as well as the opacity of the gradient.

This is<stop>You can transform it before applying the gradient (for example, rotate). For more details, see

It's not easy to remember all these property descriptions. This created an image to illustrate the meaning of these properties:

This is the definition of a linear gradient that matches the image:

　　　　<svg xmlns="http://www.w3.org/2000/svg"
　　　　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<defs>
　　　　　　<linearGradient id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　　　x1="0%" y1="0%"
　　　　　　　　　　　　　　　　　　　　　　x2="100%"　y2="0%"
　　　　　　　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　　　　　<stop offset="10%"　stop-color="#00cc00" stop-opacity="1"/>
　　　　　　　　<stop offset="30%" stop-color="#006600" stop-opacity="1"/>
　　　　　　　　<stop offset="70%" stop-color="#cc0000"　stop-opacity="1"/>
　　　　　　　　<stop offset="90%" stop-color="#000099"　stop-opacity="1"/>
　　　　　　</linearGradient>
　　　　</defs>
　　　　<rect x="10" y="10" width="500"　height="50" rx="10" ry="10"
　　　　　　　style="fill:url(#myLinearGradient"1);　stroke:　#005000;
　　　　　　　　　　　　　　stroke-width:　3;"　/>
　　　　</svg>

the first stop color is #00cc00, starting from10% start entering the rectangle. SincespreadMethodis set to 'pad', the first color is also filled into the rectanglebeforefirst stop color (0-10%).

from the first stop color10% color becomes the second stop color #006600, reaching the rectangle's30％.

from the second stop color30％ becomes the third stop color #cc0000 (red), reaching the rectangle's70％.

from the third stop color70％ becomes the fourth and last stop color #000099（blue），to90％ from90％ to the rest of the rectangle, the last color stop (#000099）is filled into the rectangle becausespreadMethod 　 　The<linearGradient>element properties are set to 'pad'.

Radial gradient

Radial gradients are where the color changes in a circular rather than linear manner. Here is an example image:

As you can see, the color now changes in a circular manner. The last three (green) rectangles only change at the center of the lightest green radiation. The first green rectangle has colors spreading from the center of the rectangle. The second rectangle uses the top middle of the rectangle. The third rectangle is centered at the top left corner.

Radial gradients are created using<radialGradient>element-defined. Here is an example:

<svg　width="512" height="120">
<defs>
<radialgradient　id="myRadialGradient4"　fx="5%"　fy="5%"　r="65%"　spreadmethod="pad"><stop　offset="0%"　stop-color="#00ee00"　stop-opacity="1></stop>
<stop offset="100%" stop-color="#006600" stop-opacity="1></stop></radialgradient></defs>
<rect x="340"　y="10" width="100"　height="100" rx="10" ry="10"　style="fill:url(#myRadialGradient4);　stroke:　#005000;　stroke-width:　3;"></rect>
　　　</svg>

The actual SVG code defines the fourth rectangle shown in the above example. Note how<stop>Use elements to define colors like linear gradients (for details, see linear gradients).

This is<radialGradient> 　 　List of properties of the element:

The center of the radial gradient is the center of the circular color diffusion. If you describe the radial gradient as a circle, then cx and cy mark the center of the circle.

The focus of the radial gradient is the 'angle' of the colored radiation. If you think of the radial gradient as a light, the focus will determine the angle at which the light from the light hits the shape.50％,50％means directly from above.5％,5％means from the top left corner down. The gradient looks a bit like light shining on your shape.

Before correctly setting the gradient, you are likely to first need to try the gradient's center and focus. I know I do this to create these simple examples.

transformations to transform the gradient

You can use standardSVG transformationsfunction to transform the gradient. This is done usinggradientTransformattributes, whether in<linearGradient>and 　 　 <radialGradient>。This is an example：

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<defs>
　　　　<linearGradient id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　x1="0%" y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="0%" y2="100%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad" gradientTransform="rotate(45)"
　　　　>
　　　　　　<stop offset="0%"      stop-color="#00cc00" stop-opacity="1"/>
　　　　　　<stop offset="100%" stop-color="#006600" stop-opacity="1"/>
　　　　</linearGradient>
　　</defs>
　　<rect x="10" y="10" width="75" height="100" rx="10" ry="10"
　　　　　style="fill:url(#myLinearGradient"1);
　　　　　　　　　　　　stroke: #005000;
　　　　　　　　　　　　stroke-width:　3;"　/></svg>

This example defines a gradient withgradientTransform() 　The linear gradient of the property, which rotates the gradient45Gradient. Usually, the gradient will grade the color from top to bottom, but now through rotation, it goes from the top right corner to the bottom left corner.

The image effect after running: