SVG Essentials/Introduction to Stylesheets

From WikiContent

Revision as of 22:38, 6 March 2008 (edit) Docbook2Wiki (Talk) (Initial conversion from Docbook) ← Previous diff		Current revision (13:40, 7 March 2008) (edit) (undo) Docbook2Wiki (Talk) (Initial conversion from Docbook)
(4 intermediate revisions not shown.)

---

Current revision

SVG Essentials

Preface Chapter 1: Getting Started Chapter 2: Coordinates Chapter 3: Basic Shapes Chapter 4: Document Structure Chapter 5: Transforming the Coordinate System Chapter 6: Paths Chapter 7: Patterns and Gradients Chapter 8: Text Chapter 9: Clipping and Masking Chapter 10: Filters Chapter 11: Animating and Scripting SVG Chapter 12: Generating SVG Chapter 13: Serving SVG Files Appendix A: The XML You Need for SVG Appendix B: Introduction to Stylesheets Appendix C: Programming Concepts Appendix D: Matrix Algebra Appendix E: Creating Fonts Appendix F: Using SVG with Other XML Applications Colophon

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.

Contents 1 Anatomy of a Style 2 Style Selectors 3 Internal Stylesheets 4 Style Selector Classes 5 Using CSS with SVG 6 Notes

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 a style attribute. So, if you want the preceding specification to apply to a particular <circle> in your document, you write:

<circle cx="50" cy="40" r="12"
    style="stroke: red; stroke-width: 3px; fill: #ccccff;"/>

Internal Stylesheets

If you want the style specification to apply to all <circle> elements in a single document, add an internal stylesheet. A style sheet consists of selectors (the names of the elements you want to affect) and the style specifications for those selectors. The style specification is enclosed in curly braces. The following applies styles to <circle> and <rect> elements:

<style type="text/css"><![CDATA[
      circle {
        stroke: red; stroke-width: 3px;
        fill: #ccccff;
      }
      rect { fill: gray; stroke: black; }
     ]]></style>

When you put a <style> element into an SVG document, you should enclose its contents within <![[CDATA[ and ]]>. This notation tells XML parsers that the contents are pure character data and should not, under any circumstances, be treated as information for XML to parse.

Because this stylesheet is within a document, it applies to that document alone. If you have many documents, all of whose circles and rectangles appear as specified in the preceding example, take the specifiers, without any of the tags, and put them into a separate myStyle.css file. In each SVG document, insert the following processing instruction:

<?xml-stylesheet href="myStyle.css" type="text/css"?>

Then, at a later point, if you decide that all rectangles should be filled with a light green and outlined in dark green, you can simply change the specification in myStyle.css to read:

    rect {fill: #ccffcc; stroke: #006600; }

and all your documents, once redisplayed, will have green rectangles instead of gray rectangles.

Style Selector Classes

The preceding stylesheet affects all <rect> and <circle> elements. Let's say, though, that you want only some circles in your documents to be styled. Write your stylesheet with a class specifier as follows, where the dot after circle indicates that the following identifier is a class name:

      circle.special {
        stroke: red; stroke-width: 3px;
        fill: #ccccff;
      }

If, in your SVG document, you had the following elements, the first circle would show up as the default (black fill, no stroke), and the second would take on the style attributes as its class name matches the class identifier in the stylesheet.

<circle cx="40" cy="40" r="20"/>
<circle cx="60" cy="20" r="10" class="special"/>

It is possible to specify a generic class that can apply to any element. Presume that several different graphic objects serve as warning symbols. You would like them to have a yellow fill and a red border. You could write this selector, which consists only of a class name and its style specifier:

    .warning { fill: yellow; stroke: red; }

This generic class may now be applied to any SVG element. In the following example, both the rectangle and triangle will have yellow interiors and red outlines.

<rect class="warning" x="5" y="10" width="20" height="30"/>
<polygon class="warning" points="40 40, 40 60, 60 50"/>

The class attribute may contain the names of several classes; their combined properties will be applied to the element in question. We will add a generic class named seeThrough for translucency to the previous example, and then apply both classes to the polygon.

<svg width="100" height="100" viewBox="0 0 100 100">
    <style type="text/css"><![CDATA[
        .warning { fill: yellow; stroke: red; }
        .seeThrough { fill-opacity: 0.25; stroke-opacity: 0.5; }
    ]]></style>
    <rect class="warning" x="5" y="10" width="20" height="30"/>
    <polygon class="warning seeThrough" points="40 40, 40 60, 60 50"/>
</svg>

Using CSS with SVG

The question then becomes: which attributes in SVG elements can also be specified in a stylesheet? Table B-1 is a list of the properties you may use in a stylesheet, the valid values (with default value shown in boldface where appropriate), and the elements to which they may be applied. It is a modified version of the property index from the SVG specification at http://www.w3.org/TR/SVG/.^[1]

Notes

1. ↑ Copyright (C) 2001 World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University) All Rights Reserved. http://www.w3.org/Consortium/Legal/.