Sams Teach Yourself SVG in 24 Hours

Applying a Fill

Fills can be applied to an object using a style declaration. The structure of the declaration is fill:color-value (where color-value is replaced by a color keyword or a hexadecimal value).

You can also specify that an object have no fill to avoid having the object painted with its default black fill. As you saw in Hour 5, an unstyled object is assumed to be filled with black. To counter this automatic fill, you will need to give the desired object a style of fill:none.

To demonstrate the use of hexadecimal values and the fill command, follow Listing 7.1 to begin to create your first weather graphic scene for the news center example first introduced in Hour 1: the sunny sky. First, use the rectangle you created in Listing 5.2