Cascading Style Sheets (CSS) are used in Web page design as efficient and effective methods of defining and organizing styles for text and graphics displays on a Web page or entire site. SVG supports CSS2 definition style sheets and so can be authored using inline, embedded, and external style sheets. Everything from text attributes to layout (as in line spacing) and graphic attributes (fill and stroke properties) can be defined as styles.

Cascading Style Sheets are defined in two parts: the selector and the style. In the following example, "st0" is the selector, and "fill:red" is the style:

.st0 {fill:red;}

Styles allow creators to "cascade" changes throughout a document or site by editing the definition once.

In the sample image above, without style sheets, every rounded rectangular path would be defined as below:

<g id="round_corners">
	<g style="stroke:#990000;stroke-width:2;>
		<path d="M37.693,104.875c0,..."/>

With an embedded style sheet, however, the inline style attribute would be replaced by a "class" attribute that would refer to a style defined once at the top of the document. Now, if you want to implement a change to the "round_corner" elements, you can simply alter the style definition, and see the change cascade through the document (in this case all 30 elements).

.st2{fill:none;stroke:#990000;stroke-width:2;}

modified to:

.st2{fill:#0000FF;fill-opacity:.5;stroke:none;}

Adobe Illustrator 9.0 generates styles as inline entities in the exported SVG. The advantage to inline styles is improved display performance — images load faster. The example above of a "cascading" edit to a style is still applicable to Illustrator-exported SVG. The entity definitions are still at the top of the document, and editing these definitions produces the same result as editing a selector's style. It should also be noted that using either entities or embedded style sheets also cuts down in word count, and consequently file size.

The example above demonstrates the convenience and power of embedded style sheets. However, SVG files can also refer to styles in external style sheets, which can be shared by the parent HTML document. Fonts can be platform-specific, and colors could be tied to a central definition ensuring consistency throughout a Web site -- you could just drop an SVG file into a Web site and it would take on the major attributes of the site's design automatically! Even develop entirely alternative presentations of your site based on language and accessibility specifications (see Internationalization).

download xss_demo.zip (41.1K)

Next lesson: Fills