The main fill properties that can be defined as either attributes or properties of SVG basic shapes, paths, text or groups are:

  • fill: the method of filling the area with a solid colour or gradient. The value none indicates that the area is not to be filled.
  • fill-opacity: how opaque the paint is that fills the area
  • fill-rule: for complex paths, the definition of the area to be filled

An example setting all three might be:

<path style="fill:red;fill-opacity:0.5;fill-rule:evenodd" d="M10,20h100v50h-80v-70h-20v20z" />

The fill property can either define a colour to be used to paint the area or it can define a colour gradient. We will discuss how colours are specified first and leave the specification of gradients until later.

Colour values are used for various operations in SVG including filling and stroking. Colour can be defined in the same set of ways that it can be defined in CSS:

  • A colour name such as red, blue, green etc.
  • A numerical RGB specification defining the red, green and blue components of the colour in one of three ways:
    • rgb(r,g,b) where r, g and b are values in the range 0 to 255
    • #rgb where r, g and b are hexadecimal values (for example #f00)
    • #rrggbb where rr, gg and bb define a value in the range 0 to 255 as two hexadecimal values

The four rectangles defined below will all be filled with approximately the same colour (the short hexadecimal form does not quite have the required accuracy).

<rect width="10" height="10" style="fill:coral" />
<rect width="10" height="10" style="fill:rgb(255,127,80)" />
<rect width="10" height="10" style="fill:#f75" />
<rect width="10" height="10" style="fill:#ff7f50" />

There are over 140 colour names defined in SVG and these are given in the appendix. Some of the main ones are:

aqua bisque blueviolet chartreuse cornflowerblue crimson darkblue darkcyan deeppink deepskyblue fuchsia gold green greenyellow indigo khaki lawngreen lightblue lightcoral lightgray lightseagreen maroon mediumblue mediumpurple midnightblue olive orange orangered palegreen palevioletred

Filling an area defined by a path, basic shape or text requires there to be a clear definition of what is inside the path and should be filled and what is outside. For simple paths that do not cross, the inside is fairly obvious. However, for a path that intersects itself or is made up of a number of subpaths (such as a donut shape), the definition of inside and outside is less clear. SVG provides two different methods of defining inside and the user may use either:

  • evenodd: the number of intersections that a line between a point and infinity makes with the path are counted. If the number is odd, the point is inside the area and should be filled.
  • nonzero: the number of times the path winds around a point is counted. If the number is non-zero, the point is inside.

The figure below shows the different results obtained for two paths. Note that it is necessary to know the order in which the two triangles are drawn in order to define the area. If the second triangle had been drawn in the order 5, 4, 6 the area inside for both the evenodd and nonzero methods would have been the same. For simple shapes, staying with the evenodd rule is a good bet.

path evenodd nonzero 1 2 3 4 5 6

Graphics in SVG are not restricted to being invisible or opaque. It is possible for any area to be filled at an opacity that varies between 1.0 (opaque) and 0.0 (transparent). Properties are available for specifying the opacity of filling and stroking separately (fill-opacity and stroke-opacity) but for simple examples it is sufficient to use the opacity attribute to control both stroke and fill opacity together. Rules exist for combining two semi-transparent objects that overlap each other. The diagram below shows various objects of different levels of transparency overlapping. In the case of the ducks, they are drawn top to bottom with decreasing opacity. The more opaque duck behind the more transparent one often looks as though it is in front rather than behind where they overlap due to this combination.

0.2 0.4 0.6 0.8 1.0 1.0 0.8 0.6 0.4

As mentioned earlier, the fill property can have more exotic values than a simple colour specification. One of these is to specify a colour gradient that defines a gradation of colour across the area to be filled and that gradient can change from one colour to another or range across a whole gamut of colours. It is possible also to specify whether the gradient is a linear transformation from one point to another or radiates from some origin.

The colour specification in the fill property points to a URL where the gradient is defined:

<rect x="20" y="20" width="290" height="120" style="fill:url(#MyGradient)"/>

Here the fill property is defined by pointing at the definition MyGradient. The gradient specification has the form:

<linearGradient  id="MyGradient" gradientUnits="userSpaceOnUse" x1="80" y1="44" x2="260" y2="116">
<stop offset="0"  style="stop-color:blue"/>
<stop offset="0.5"  style="stop-color:white"/>
<stop offset="1" style="stop-color:green"/>
</linearGradient>

This is the one used at the top right hand side of Figure 5.4. The element is either a linearGradient or a radialGradient. Note the use of Camel case with each word separating the previous one by capitalising the first character. This is used throughout SVG. The main element defines the major parameters of the gradient and the offset element defines the way the gradient is rendered in more detail.

In this particular example, the main attributes of the linear gradient are the id used to associate it with its use, the point (x1,y1) that defines the start of the gradation and the point (x2,y2) that defines where the gradation ends. Outside this range, the first and last values are retained. This allows the user to define a middle part of the fill as being graded while the remainder has the solid colours defined at the start and end. In the top left part of the Figure, the start, middle and end offset positions are identified by circles.

In the example above, positions are defined between (x1,y1) and (x2,y2) where certain colours will appear. In this example, the colour at (x1,y1) (offset=0.0, the starting position) will be blue and at (x2,y2) (offset=1.0, the finishing position) it will be green. Half way between, the colour will be white (offset=0.5). The number of offsets can be as many as you like as can be seen in the top right where the duck has a large number of offsets specified.

Defining radial gradients is slightly more complex:

<radialGradient   id="MyGradient2"  gradientUnits="userSpaceOnUse" 
      cx="130" cy="270" r="100" fx="70" fy="270">
<stop offset="0"  style="stop-color:blue"/>
<stop offset="0.5"  style="stop-color:white"/>
<stop offset="1" style="stop-color:green"/>
</radialGradient>
<rect x="20" y="160" width="290" height="220" style="fill:url(#MyGradient2)"/>

The radialGradient specifies a circumference where the offset=1.0 value is defined by defining its centre (cx,cy) and the radius r. The easy option would have been to define the centre (cx,cy) as the offset=0.0 position. instead, a separate offset=0.0 position is defined separately as (fx,fy). The offset=1.0 position is shown in the diagram by the yellow circle and the circle shows the position of the focus. Again, the offset elements define the colours at inbetween positions.

Once more, a simple example is shown on the lower left and a more complex radial gradient is shown on the lower right.