As mentioned in Chapter
4, some attributes of SVG elements control the element’s geometry.
An example of one such attribute would be the
cx (center x) attribute of a
<circle>. Other attributes, such as
fill, control the element’s
presentation. Stylesheets provide a way for you to separate the
presentation from the geometric structure; this lets you control the
visual display of many different SVG elements (and even documents) by
changing one stylesheet referenced by all the documents.
A style is a specification of a visual property for an element and
the value that you would like that property to have. The property name
and the value are separated by a colon. For example, to say that you
want the stroke color for some element to be blue, the appropriate style
specifier would be
To specify multiple properties in a style, you separate the specifiers with semicolons. The following style specifier sets the stroke color to red, the stroke width to three pixels, and the fill color to a light blue. The last property-value pair is followed by a semicolon. This is not necessary, but is done to give the style a more consistent look.
stroke: red; stroke-width: 3px; fill: #ccccff;
Once you have determined the visual properties you’d like, you must select the element or elements to which they apply. The simplest way to apply a style specification to a single element is to make that specification the value of ...