O'Reilly logo

SVG Essentials by J. David Eisenberg

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Appendix B. Introduction to Stylesheets

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.

Anatomy of a Style

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 stroke: blue.

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;

Style Selectors

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required