Value

Options

Description

Default Behavior

fill:

RGB/ hexadecimal values, or
color keywords

The color that "paints" the inside of a shape. It can be a solid color, a gradient or a pattern.

If no fill is defined for a shape, SVG will render the fill as black.

fill-opacity:

Number from 0 to 1, with 0 being totally transparent and 1 being totally opaque

Defines the opacity of the fill

If no fill-opacity is defined for a shape, SVG will render the fill as opaque.

fill-rule:

nonzero or evenodd

Defines how the inside of a shape will be determined; used for creating shapes that have "cut-out" effects

If no fill-rule is defined, the default is nonzero.

Code Example

SVG Image

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="500" height="500">

<!-- Fill & No Fill -->
<rect x="10" y="25" width="50" height="15" style="fill:purple" /> <rect x="70" y="25" width="50" height="15" style="fill:none" />

<!-- Opacity -->

<rect x="3" y="140" width="160" height="40" style="fill:yellow; opacity:0.4" />
<rect x="5" y="190" width="160" height="40" style="fill:red; opacity:1.0" />

<rect x="10" y="100" width="20" height="180" style="fill:blue;
fill-opacity:0.2" />
<rect x="40" y="100" width="20" height="180" style="fill:blue;
fill-opacity:0.4" />
<rect x="70" y="100" width="20" height="180" style="fill:blue;
fill-opacity:0.6" />
<rect x="100" y="100" width="20" height="180" style="fill:blue; fill-opacity:0.8" />
<rect x="130" y="100" width="20" height="180" style="fill:blue" />

<!-- Fill Rules -->

<polygon style="fill-rule: nonzero; fill: pink; stroke: black;"
points="48,346 16,426 96,378 0,378 80,426" />

<polygon style="fill-rule: evenodd; fill: #00ff00; stroke: black;"
points="147,346 115,426 195,378 99,378 179,426" />

</svg>

You can fill an object with any color you like. You can specify that an object have no fill (using fill:color-none) to avoid having the object painted with its default black fill.

Opacity: Graphics in SVG are not restricted to being opaque (not-see-through). It is possible for any area to be filled at an opacity that varies between 1.0 (opaque) and 0.0 (transparent). To attain varying levels of opacity, you simply define your value as a decimal point (0.4, for instance).

Fill Rule: SVG has two different rules for determining whether a point is inside a polygon or outside it. The fill-rule (which is part of presentation) has a value of either nonzero or evenodd. Depending on the rule you choose, you get a different effect.

The nonzero rule determines whether a point is inside or outside a polygon by drawing a line from the point in question to infinity. It counts how many times that line crosses the polygon's lines, adding one if the polygon line is going right to left, and subtracting one if the polygon line is going left to right. If the total comes out to zero, the point is outside the polygon. If the total is nonzero (hence the name) the point is inside the polygon.

The evenodd rule also draws a line from the point in question to infinity, but it simply counts how many times that line crosses your polygon's lines. If the total number of crossings is odd, then the point is inside; if even, then the point is outside.