Dorokhov.codes

Paint servers

The gradients and patterns are defined as separate elements within the SVG code, but they are never drawn directly. Instead, the gradient or pattern is drawn within the area of the shape that references it.

In a way, this is similar to a web domain serving up an image for a browser to draw within a specified region of an HTML file. For this reason, the gradient or pattern is known as a paint server.

Radial gradients

<defs>
    <radialGradient id="red-light-off" fx="0.45" fy="0.4">
        <stop stop-color="maroon" offset="0" />
        <stop stop-color="#220000" offset="0.7" />
        <stop stop-color="black" offset="1" />
    </radialGradient>
</defs>

The radial gradients also have fx and fy attributes, which create the off-center effect.

Linear gradients

<defs>
    <linearGradient id="metal" spreadMethod="repeat" gradientTransform="scale(0.7) rotate(75)">
        <stop stop-color="#808080" offset="0"/>
        <stop stop-color="#404040" offset="0.25"/>
        <stop stop-color="#C0C0C0" offset="0.35"/>
        <stop stop-color="#808080" offset="0.5"/>
        <stop stop-color="#E0E0E0" offset="0.7"/>
        <stop stop-color="#606060" offset="0.75"/>
        <stop stop-color="#A0A0A0" offset="0.9"/>
        <stop stop-color="#808080" offset="1"/>
    </linearGradient>
</defs>

The linear gradient contains spreadMethod and gradientTransform attributes to control the angle, scale, and repetition of the gradient.

Each gradient contains <stop> elements that define the color transition.

How to use

<rect fill="url(#metal)" />