Files used

Right-click, save ...

• fill.shtml
• fill.svg
• fill.png

Technical Details

Uniform, opaque colours

Colors, both fills and strokes, are assigned as we explained in the styles section, with CSS. But note that all CSS statements can also be assigned as attributes. Those three syntaxes have the same result on the screen, the difference comes with project management (easier with CSS) and interactivity (easier with attributes).

The syntax for a red filled circle is like the following,:
<circle ... fill="#ff0000"/>

For the definition of the colour-values alternative notations exist (e.g. fill="red") beside the hexadecimal-system. One can use predefined colour values (see before) or fill="rgb(255,0,0)" the RGB system, probably well-known. You may also use following syntaxes, all with the same result on screen as the one above:
<circle ... fill="#ff0000"/>
<circle ... fill="red"/>
<circle ... fill="rgb(255,0,0)"/>

Transparency

For alpha-blending, the shine through of the objects below, the syntax is similar. The values are between zero and one, one is default.

<circle ... opacity=".3"/>
Here transparency is set to 30 percent.

Gradients

Gradients definitions demand several parameters, they are predefined and used for the concerned objects within the file's header.

<defs>
  <linearGradient id="MyGradient" gradientTransform="rotate(45)">
    <stop offset="0%" stop-color="white"/>
    <stop offset="30%" stop-color="red"/>
    <stop offset="100%" stop-color="black"/>
  </linearGradient>
</defs>

Within the definitions section <defs> we define a gradient with the name MyGradient. The gradient leeds from white, over red to black, while the section for red is not exactly in the middle, but at 30 percent. The gradient is rotated with 45 degrees. Additional parameters are the gradient type (linear or radial), the definition of an abstract coordinate-system for describing the gradient, as well as the behaviour in case the gradient ends before the end of the object. (mirroring, repeating, running out)

The actual assignment is again done by using styles.
<rect fill="url(#MyGradient)" ... />

See also www.w3.org/TR/SVG/pservers.html#Gradients