Chapter 13. Designing SVG for Use with CSS

CONTENTS

In this chapter:

•  Cascading Style Sheets
•  Planning Your Text and Graphics
•  Sample Design: SVG and CSS

Cascading Style Sheets

As you have created examples in earlier chapters, you simply created SVG elements as you went along. If you wanted to define the style of a particular element, you simply inserted a style attribute that contained a list of CSS properties that described how that element was to be rendered onscreen. Sometimes, not just when you used animations as visual components, you copied and pasted lengthy chunks of SVG syntax, and the copied text often had lengthy style elements.

NOTE

A Cascading Style Sheet (CSS) contains one or more rules that associate the name of an element, or specific subclasses of an element, with a particular visual styling. Cascading Style Sheet information might be applied inline with styling properties or exist as a separate external style sheet.

That approach is a quick, easy, and accurate technique when you are creating simple SVG graphics; when it comes to the maintenance of large SVG graphics or Web pages, however, you face a potential cost in terms of time spent to carry out site maintenance.

Maintenance of a site is one of the biggest costs, in terms of both time and money, relating to any but the smallest Web sites. So, it makes good business sense for the owners of significantly sized sites and who might be users of SVG text and graphics to seek to achieve efficiency savings by planning ahead to achieve easier maintenance of their sites.

Maintenance of a traditional Web site can often involve changes to the color scheme of a Web site (often carried out by HTML coders) or to its traditional bitmap graphics (typically carried out by graphics designers). A frequent scenario is that a client wants some sort of color-based makeover. With sites that use bitmap graphics, the availability of Cascading Style Sheets (CSS), technology benefits, the efficiency of the HTML coders who can change the appearance of text by adjusting a single Style sheet (assuming that the necessary planning was done). However, traditional Web graphics designers cannot easily edit their images in the same way, so any maintenance that involves images can be a time-consuming and expensive process.

SVG opens up new possibilities for efficient, timely, and less expensive redesigns of Web sites, even if the redesign involves some or all of the graphics on the site. These advantages are potentially available whether the Web site makes use of traditional HTML or XHTML Web pages or the more innovative or experimental SVG Web pages (see Chapter 12, "Creating a Simple SVG Web Site").

Of course, if you design a Web site to take advantage of the SVG redesign speed, at least as far as styling is concerned, you can gain significant benefits during earlier phases of a Web design project when you are interacting with some clients. If you are in a client meeting and you are told that the shade of green you are using in the text and graphics is just a little too dark or light or whatever, you can simply adjust the Cascading Style Sheet immediately and get a decision from your clients after they have seen the options side by side.

In this chapter, I can only describe for you the fundamentals of a substantial topic. CSS properties are defined in either the CSS2 specification or the SVG specification itself. To have a full appreciation of the range of CSS properties and where you can find their definitive description, consult Chapter 6.1 of the SVG specification at http://www.w3.org/TR/SVG/ and the CSS2 Recommendation at http://www.w3.org/TR/REC-CSS2.

So how do you gain the benefits that using CSS and SVG together can bring to site maintenance? To make use of the advantages of CSS, you as is often the case with anything to do with the creation of Web sites need to plan ahead.

Planning Your Text and Graphics

One key issue you need to decide at some stage in a project is which aspects of your images and text on a Web page share colors or other CSS2 properties. Depending on how you plan a site, you can do this at an early stage, while the site is being created, or you can do it after the design is final and you know which colors are shared between text and graphics. It all depends on how you work.

Using styling basics

SVG uses styling properties in three basic ways. The first is to define color or other obviously visual properties. The second is to define parameters, like font-family and font-size. The third is to define aspects of SVG filters and clipping paths, for example, that affect how an SVG element is rendered.

Style can be applied to SVG elements in ways similar to those by which style can be applied to HTML or XHTML elements. SVG has two ways to apply style inline, which you have seen in earlier chapters, plus a <style> element and the option to use external Style sheets. I describe those separately.

Inline style

In the examples in earlier chapters, I have typically shown you inline style where the style attribute of an SVG graphics object or text contains a list of CSS properties that describe the onscreen presentation of the graphics shape.

For example, this code

<text x="50" y="50" style="fill:red; stroke:red;  font-style:italic; font-size:48;"> 

tells you that the fill and stroke properties of the text are red and that the font-style property is italic. The amalgam of these individual CSS properties is applied to create the final appearance of the text. You could have produced the same visual appearance by splitting the CSS properties from the style attribute and defining them using individual SVG attributes, like this:

<text x="50" y="50" fill="red" stroke="red"  font-style="italic" font-size="48"> 

In practice, if you are using external style sheets, as I describe shortly, you can overrule the effect of an external style sheet or SVG <style> element by using either of the two inline syntaxes shown here. However, unless you have compelling reasons for doing so in a particular situation, such as preserving the look and feel of a corporate logo, I suggest that you avoid mixing the two techniques because you lose at least part of the benefit of external style sheets for maintenance.

Neither of the inline syntaxes helps you in your quest for easier page or site maintenance, so they aren't considered further here.

The SVG <style> element

The <style> element allows a style sheet to be embedded directly within an SVG image or document, in a way that is similar to their use with HTML or XHTML (with which you might already be familiar).

Now create a simple style sheet within a <style> element to apply a specified fill and stroke to two rectangles in an SVG image. Here is the code:

Listing 13.1 (StyleElement02.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg>  <style type="text/css">  rect {    stroke: red;     fill: #CCCCFF;     stroke-width:2;     }  </style>  <rect x="20" y="20" width="300" height="150"/>  <rect x="120" y="95" width="100" height="50"/>  </svg> 

The output, as shown in Figure 13.01, shows that the same style has been applied to each of the two rectangles, although no style attribute, or list of presentation attributes, is on either rectangle. So, your style sheet, contained in the <style> element, is working.

Figure 13.01. The same style applied to two rectangles using the SVG <style> element.

The type attribute of the <style> element is essential. If you delete it from the preceding code, you see simply a single black rectangle because the SVG rendering engine requires the type attribute to be present. (In fact, two black rectangles are there, one in front of the other, but you can't see that.) In its absence, the SVG rendering engine cannot interpret the styling information within the <style> element, so the default fill and stroke, both black, are applied to each <rect> element.

Just in case you are not already familiar with CSS syntax, take a closer look at the working part of the CSS syntax contained inside the <style> element:

rect {    stroke: red;     fill: #CCCCFF;     stroke-width:2;     } 

A typical Style sheet is made up of a succession of rules, although in this simple example you used only one CSS rule. The preceding quoted code, taken in its entirety, is a CSS rule. The word rect is a CSS selector and defines to which elements the style rule will be applied. In this example, the word rect indicates that it is applied to <rect> elements. Because nothing indicates otherwise, the style is applied to all <rect> elements in the document (or at least to all <rect> elements for which no more specific CSS rule exists).

Then follows the opening curly bracket, followed by a succession of CSS declarations. Each CSS declaration consists of the name of a CSS property followed by a colon and then the value of the CSS property. When more than one CSS declaration is within the CSS rule, as in the example, each declaration is separated by a semicolon from the declaration that follows it.

The SVG specification indicates that you require a more complex syntax for a style sheet embedded in a <style> element the use of an XML CDATA section, as shown in the following code:

Listing 13.2 (StyleElement03.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg>  <style type="text/css">  <![CDATA[ rect {    stroke: red;     fill: #CCCCFF;     stroke-width:2;     }  ]]>  </style>  <rect x="20" y="20" width="300" height="150"/>  <rect x="120" y="95" width="100" height="50"/>  </svg> 

The only difference is that the first thing nested within the start tag of the <style> element is

<![CDATA[

and the last thing before the end tag, </style>, is

]]> 

In some settings where you want to use an internal Style sheet, you might find that you need to make use of a CDATA section. Certain CSS rules make use of the > character, which would confuse the SVG rendering engine (which would treat it as the closing character of a start or end tag, which didn't exist). So, if you are using the SVG <style> element with CSS rules that use these types of characters, you would be wise to use the CDATA section syntax.

However, when you consider external Style sheets, such CDATA sections are not required.

External Style sheets

To achieve the full potential maintenance benefits, you need to make use of external Style sheets. To create the same visual appearance as in the <style> element example, you need to remove the CSS rule from the <style> element and place it into an external Style sheet. In addition, you need to inform the SVG viewer that an external Style sheet will be applied to the SVG image and indicate where the Style sheet is located and what type of content it has.

First, you move the Style sheet to an external Style sheet, ExternalCSS01.css, which contains this code:

Listing 13.3 (ExternalCSS01.css)

rect {    stroke: red;     fill: #CCCCFF;     stroke-width:2;     } 

Then, you modify the SVG document, now named ExternalCSS01.svg, so that it looks like this:

Listing 13.4 (ExternalCSS01.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <?xml-stylesheet type="text/css" href="ExternalCSS01.css" ?>  <svg>  <rect x="20" y="20" width="300" height="150"/>  <rect x="120" y="95" width="100" height="50"/>  </svg> 

You can see that the <style> element has been removed so that no styling information whatsoever is contained within the SVG file. However, you see this XML processing instruction:

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

which indicates that an external style sheet should be applied. The type attribute tells you that the type is text/css, meaning a Style sheet. The href attribute tells you that it is in the same directory, in a file named ExternalCSS01.css. If you try to view ExternalCSS01.svg, you see the same visual appearance as you saw in Figure 13.02, demonstrating that you have correctly linked to the external style sheet.

Figure 13.02. The SVG document linked to the external Cascading Style Sheet produces the same visual appearance as shown in Figure 13.01. Note the different filenames in the two figures.

Using class attributes

So far, you have seen only how to use CSS selectors to define the application of a particular style on all elements of the same name. However, you might well want to style some <rect> elements in one way and other <rect> elements in another way.

One technique to do that is to use class selectors. You do that in two parts. First, a class attribute is added to one or more elements in the SVG, like this:

<rect class="Back" x="20" y="20" width="300" height="150"/> 

and then you use a new syntax for the selector:

rect.Back 

to apply any CSS declarations selectively to the appropriate elements. The syntax of the class selector is that the element name comes first, followed by a full stop, followed by the value of the class attribute on the SVG elements to which the selector applies.

If you create another Style sheet, therefore, ExternalCSS02.css:

Listing 13.5 (ExternalCSS02.css)

rect.Back     {    stroke: red;     fill: #CCCCFF;     stroke-width:4;     }  rect.Front     {    stroke: #000099;     fill:white;     stroke-width:2;     } 

you can also modify the SVG to add a class attribute to each <rect> element:

Listing 13.6 (ExternalCSS02.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <?xml-stylesheet type="text/css" href="ExternalCSS02.css" ?>  <svg>  <rect class="Back" x="20" y="20" width="300" height="150"/>  <rect class="Front" x="120" y="75" width="100" height="50"/>  </svg> 

When you display the resulting SVG with the styling information supplied from the external Style sheet, you see the result shown in Figure 13.03.

Figure 13.03. The "Front" and "Back" CSS2 class selectors cause the front and back rectangles to be styled differently.

Class selectors can also be used to apply style to SVG elements that share a common value of a class attribute but are on different element types. For example, if you want a rectangle and text to share a common style, you can add the same class attribute to each one, like this:

<rect class="Back" x="20" y="20" width="300" height="150"/>  <text class="Back" x="30" y="40">  This is "Back" text  </text> 

Then, if one or more selectors were defined that matched the "Back" class, the corresponding CSS style declarations would be applied. You can produce a modified style sheet, ExternalCSS03.css:

Listing 13.7 (ExternalCSS03.css)

.Back     {    stroke: red;     fill: #CCCCFF;     stroke-width:1;     }  .Front     {    stroke: #000099;     fill:white;     stroke-width:1;     }  text.Back     {    font-size: 18;     }  text.Front     {    font-size: 14;     } 

and a modified SVG document:

Listing 13.8 (ExternalCSS03.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <?xml-stylesheet type="text/css" href="ExternalCSS03.css" ?>  <svg>  <rect class="Back" x="20" y="20" width="300" height="150"/>  <text class="Back" x="30" y="40">  This is "Back" text  </text>  <rect class="Front" x="120" y="75" width="100" height="50"/>  <text class="Front" x="130" y="100">  "Front" text  </text>  </svg> 

Remember, of course, to modify the <?xml-stylesheet ?> processing instruction so that the correct style sheet is linked.

The first <rect> element is matched by the .Back selector (which matches any element of the Back class) and so has a red stroke and pale blue fill. The first <text> element also matches the .Back selector and has the same stroke and fill, but also matches the text.Back selector and therefore is of font size 18. The <rect> element does not, of course, match the text.Back selector. Similarly the .Front and text.Front selectors apply to the second <rect> and second <text> elements, respectively.

The result of applying the Style sheet shown in Listing 13.7 to the SVG image shown in Listing 13.8 is illustrated in Figure 13.04.

Figure 13.04. Applying the CSS selectors to both text and rectangle elements.

Using id attributes

You might want to apply a unique style to only one element in an SVG document. CSS provides a way of doing that, by using an id attribute on the chosen SVG element. In any valid XML document and, therefore, in all SVG documents the id attribute on any element must be unique. You can therefore apply a style selectively to any SVG element identified by an id attribute.

You can apply an id attribute to a <rect> element like this:

<rect id="1234" class="Front" x="120" y="75" width="100"  height="50"/> 

and refer to it in the accompanying Style sheet like this:

#1234      {     opacity: 0.2;      } 

If you refer to the CSS2 specification, you notice that it refers to the ID selectors (uppercase), although SVG elements have an id attribute (lowercase). If you attempt to create an ID (uppercase) attribute on an SVG element and use it to access an external style sheet, expect to find that any rules you define that supposedly refer to the ID (uppercase) attribute are ignored (in the Adobe viewer) or might generate an error message.

When you put all this together and apply the ID selector to the element with the id attribute, the onscreen appearance looks like the one shown in Figure 13.05. Note that the stroke of the smaller rectangle is less obvious because it is semitransparent and that more of the fill of the background rectangle shows through the semitransparent fill of the smaller rectangle.

Figure 13.05. The ID selector causes the fill and stroke of the rectangle to be semitransparent.

The final style sheet looks like this:

Listing 13.9 (ExternalCSS04.css)

.Back     {    stroke: red;     fill: #CCCCFF;     stroke-width:1;     }  .Front     {    stroke: #000099;     fill:white;     stroke-width:1;     }  text.Back     {    font-size: 18;     }  text.Front     {    font-size: 14;     }  #1234     {    opacity: 0.2;     } 

The SVG document, including the id attribute, looks like this:

Listing 13.10 (ExternalCSS04.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <?xml-stylesheet type="text/css" href="ExternalCSS04.css" ?>  <svg>  <rect class="Back" x="20" y="20" width="300" height="150"/>  <text class="Back" x="30" y="40">  This is "Back" text  </text>  <rect id="1234" class="Front" x="120" y="75" width="100"  height="50"/>  <text class="Front" x="130" y="100">  "Front" text  </text>  </svg> 

In this section, I have described some of the CSS syntax as it applies to SVG; if you want to fully understand CSS, however, the definitive references are the W3C CSS specifications. The CSS Level 1 specification is at http://www.w3.org/TR/1999/REC-CSS1-19990111, and the CSS Level 2 Recommendation, on which the SVG implementation of CSS is based, is at http://www.w3.org/TR/1998/REC-CSS2-19980512. Chapter 6 of the SVG specification is the major source of further SVG-specific styling information.

Understanding the scope of Cascading Style Sheets

In Chapter 10, "Embedding SVG in HTML or XHTML Pages," I explained how to embed SVG images in HTML or XHTML. In Chapter 12, I mentioned how to use stand-alone SVG Web pages. I have also briefly mentioned the use of SVG with other XML namespaces. You should consider each of these situations separately when you are using Style sheets.

SVG in HTML and XHTML

In this situation are two totally separate parse trees one for the containing HTML or XHTML document and the second for the SVG. Visually, the HTML or XHTML and the SVG are presented in a unified way; behind the scenes, however, they remain separate. The CSS styling for the HTML or XHTML document is derived from inline style properties and any internal or external style sheets. The fact that those style properties are applied in the containing HTML or XHTML document has no implication that the SVG document is affected by them. Similarly, any styling information in the SVG image or document is confined to it and has no direct effect on styling within the containing document.

However, if both the HTML or XHTML document and the SVG document reference the same external Style sheet and the HTML and SVG documents are appropriately structured, the same styles are applied on the HTML or XHTML part of the Web page and in the SVG images.

You can achieve this synchronization in various ways. One possibility is to use a selector within the style sheet that applies to all text, in both the HTML page and the SVG document. For example, the following CSS rule ensures that all paragraph text in the HTML or XHTML document and in the SVG document would be similarly styled:

p, text      {     font-size:12;      font-family:Arial, sans-serif;      stroke: red;      fill: red;      } 

Another approach is to use class attributes on selected HTML and SVG elements, use the CommonToBoth class, and use a rule something like this:

.CommonToBoth       {      font-size:12;       font-family:Arial, sans-serif;       stroke: red;       fill: red;       } 

Stand-alone SVG documents

In this scenario, the situation is simple: Any style information defined within the SVG document applies across the whole document.

Mixed SVG and XML

When SVG and content from other XML namespaces are mixed in one document, such as in some of the examples on http://www.xsmiles.org/, one parse tree has elements from different namespaces contained within it. The SVG specification does not define how the presence of more than one source of style sheet information will interact.

To maintain control of the styling of SVG within this type of multi- namespace document, you can use the style attribute on SVG elements (as in most of the examples in this book) or use class or id attributes to apply styling information from a style sheet in a focused way.

Nested SVG

Specific issues arise in the case of nested SVG.

In some earlier chapters, I encouraged you to use nested <svg> elements to create reusable SVG visual components. What happens if you reuse SVG visual components that already possess <style> elements and nest them in SVG documents that also have <style> elements? Here is an example, which demonstrates that situation:

Listing 13.11 (NestedSVGCSS.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg width="500" height="400">  <style type="text/css">  <![CDATA[ text {      font-size:18;       font-family:Arial, sans-serif;       stroke:red;       fill:red       }  ]]>  </style>  <text x="20" y="20">  This is text in the outer <svg> element  </text>  <svg x="100" y="100" width="300" height="200">  <style type="text/css">  text {      font-size:10;       font-family: Arial, sans-serif;       stroke:blue;       fill:blue;       }  </style>  <rect x="1" y="1" width="298" height="198" style="stroke:red;  stroke-width:2;  fill:none;"/>  <rect x="50" y="50" width="200" height="100"  style="fill:#EEEEEE;  stroke:blue;"/>  <text x="20" y="20">  This is text in the nested <svg> element  </text>  <text x="40" y="170" style="font-size:14; stroke:green;  fill:green">  <tspan>  This is individually styled text in  </tspan>  <tspan dx="-14em" dy="1em" >the nested <svg> element  </tspan>  </text>  </svg>  </svg> 

In Figure 13.06, you can see that all text, with the exception of the individually styled <text> element late in the code, have the same visual appearance. The <style> element in the outer <svg> element that worked correctly before the nested <style> element was added has been overridden by the <style> element that occurs later in the document. It appears, therefore, that if you are using nested <svg> elements and have multiple <style> elements, you can make use of the style information in only the final <style> element in the document.

Figure 13.06. The result of running Listing 13.11.

One work-around solution is to add a class rule in each style sheet and place corresponding class attributes on each <text> element.

But what happens if the imported or nested SVG image accesses style information in an external Style sheet? Processing instructions, other than those before the outer <svg> element, are ignored. This situation raises issues about how to apply differential styling to a containing and imported SVG document. You must use class or id attributes to achieve any selective styling.

In addition, you should be aware of the difference in the treatment of an imported <svg> element. An imported SVG image is treated as a wholly separate parse tree. If it has a processing instruction referring to an external Style sheet, that instruction is processed normally.

Sample Design: SVG and CSS

This section looks at a simplified but quasirealistic scenario using CSS. Take a look at Figure 13.07. It is also available on the Web at http://www.xmml.com/XMML01.svg as well as in the download for this book. The code for the simplified page is shown in Listing 13.7. Suppose that your task is to alter the orange (#FF6600) in the original and that your client isn't quite sure what color he wants as a replacement. Perhaps a quiet green?

Figure 13.07. The simplified XMML.com Web page before the required makeover.

Using external Style sheets seems an ideal solution, particularly if the client changes his mind again about the dominant color.

Your first task is to identify which parts of the page contain the color the client wants to change. Take a look at the figure and the code and see whether you can spot the necessary changes.

Listing 13.12 (XMML01.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg>  <defs>  <linearGradient id="PenGradient"    x1="50" y1="50" x2="110" y2="90"  gradientUnits="userSpaceOnUse">  <stop offset="10%" style="stop-color:#999999"/>  <stop offset="50%" style="stop-color:white"/>  <stop offset="100%" style="stop-color:#FF6600"/>  </linearGradient>  <linearGradient id="MyFirstGradient">  <stop offset="5%" style="stop-color:#FF6600"/>  <stop offset="75%" style="stop-color:#FFFFCC"/>  </linearGradient>  <linearGradient id="MySecondGradient">  <stop offset="10%" style="stop-color:#FF6600"/>  <stop offset="50%" style="stop-color:#FFFFCC"/>  </linearGradient>  <filter id="CombinedDropShadow" width="140%" y="-20%"  height="200%">  <feGaussianBlur in="SourceAlpha" stdDeviation="2"  result="ShadowOut"/>  <feOffset in="ShadowOut" dx="3" dy="3" result="ShadowOnly"/>  <feMerge>   <feMergeNode in="ShadowOnly"/>   <feMergeNode in="SourceGraphic"/>  </feMerge>  </filter>  </defs>  <rect width="100%" height="100" fill="url(#MyFirstGradient)"/>  <rect y="100" width="100%" height="3" fill="#999999"/>  <rect y="103" width="100%" height="500"  fill="url(#MySecondGradient)"/>  <text x="20" y="50" style="font-family:Ventana, Arial,  sans-serif;  font-size:36;  fill:url(#PenGradient); stroke:none;  filter:url(#CombinedDropShadow)">  XMML.com  </text>  <svg x="200" y="150" width="500" height="400">  <text x="0" y="20">  <tspan x="0" dy="0"   style="font-family:Arial, sans-serif; font-size:18;   stroke:none; fill:#666666;">  Welcome to XMML.com.  </tspan>  <tspan x="0" dy="2em"   style="font-family:Arial, sans-serif; font-size:14;   stroke:none; fill:#666666;">  XMML.com provides consultancy services relating to the  eXtensible Markup  </tspan>  <tspan x="0" dy="1em"  style="font-family:Arial, sans-serif; font-size:14;  stroke:none; fill:#666666;">  Meta Language, sometimes called XML.  </tspan>  </text>  </svg>  <a xlink:href="http://www.edititwrite.com/default.svg"  target="new">  <svg x="247" y="20" width="468" height="60">  <defs>  <linearGradient id="MyBlueGradient"  gradientUnits="userSpaceOnUse" x1="90"  y1="50" x2="400" y2="500" >  <stop offset="10%" style="stop-color:#FF6600"/>  <stop offset="40%" style="stop-color:#FFFF00"/>  <stop offset="75%" style="stop-color:#9999FF"/>  </linearGradient>   <filter id="Turbulence1" in="SourceImage"  filterUnits="userSpaceOnUse" >    <feTurbulence in="BackgroundImage" type="turbulence"  baseFrequency="0.01"        numOctaves="1" seed="0" >    </feTurbulence>  </filter>  </defs>  <rect x="0" y="0" width="468" height="60"  style="fill:url(#MyBlueGradient);  opacity:0.5;"/>  <rect x="0" y="0" width="468" height="35" style="fill:black;  stroke:none;"/>  <rect x="0" y="35" width="468" height="25" style="fill:#000099;  filter:url(#Turbulence1); stroke:none;"/>  <svg x="0" y="0" width="468" height="35">  <text>  <tspan x="5" y="50" style="font-size:14; font-family:courier,  monospace;  stroke:#FF6600; fill:#FF6600">  <animate attributeName="y" begin="0s" dur="16s" values="50; 15;  15; -55; -55;  -130; -130 "  repeatCount="indefinite"/>  EditITWrite.com  </tspan>  <tspan x="5" dy="1em" style="font-size:12; font-family:Arial,  sans-serif;  fill:white; stroke:white;">  EIW can provide many of your technical writing needs.  </tspan>  <tspan x="5" dy="2em" style="font-size:12; font-family:Arial,  sans-serif;">  blank  </tspan>  <tspan x="5" dy="2em" style="font-size:12; font-family:Arial,  sans-serif; ">  blank  </tspan>  <tspan x="5" dy="1em" style="font-size:12; font-family:Arial,  sans-serif;  fill:white; stroke:white;">  We have expertise in XML, SVG, Java, XHTML, JavaScript,  </tspan>  <tspan x="5" dy="1em" style="font-size:12; font-family:Arial,  sans-serif;  fill:white; stroke:white;">  Lotus Domino and other Web technologies.  </tspan>  <tspan x="5" dy="2em" style="font-size:12; font-family:Arial,  sans-serif;">  blank  </tspan>  <tspan x="5" dy="2em" style="font-size:12; font-family:Arial,  sans-serif; ">  blank  </tspan>  <tspan x="5" dy="1em" style="font-size:12; font-family:Arial,  sans-serif;  fill:white; stroke:white;">  We can translate from German, French, Spanish,  </tspan>  <tspan x="5" dy="1em" style="font-size:12; font-family:Arial,  sans-serif;  fill:white; stroke:white;">  Japanese and other languages into English.  </tspan>  </text>  </svg>  <text x="5" y="55" style="font-family:'Times New Roman', serif;  font-size:20;  stroke:white; fill:white;">  EditITWrite.com  </text>  <text style="font-size:24; font-family:Arial, sans-serif;  stroke:red;  stroke-width:0; fill:#FF6600;" x="395" y="140"  transform="skewY(-15)" >  EIW  </text>  </svg>  </a>  </svg> 

A careful look at the image and code shows six places where the orange color occurs. In case you didn't spot them, orange is used separately in the gradients in the top and main parts of the SVG page, in the gradient for the XMML.com logo, and in three places in the banner ad (the gradient to which the filter is applied, the first line of the scrolling text, and the EIW logo to the right of the ad).

Assume that all occurrences of the orange need to be changed to the quiet green that your client wants.

When doing this type of task, I usually split it into two steps. The first is to go through the files and remove the style attributes that I want to put into the external Style sheet. Then I add to each of those elements a class attribute to correspond to the style properties I have removed.

For example, the style attribute on the final <stop> element of the first linear gradient:

<linearGradient id="PenGradient"    x1="50" y1="50" x2="110" y2="90"  gradientUnits="userSpaceOnUse">  <stop offset="10%" style="stop-color:#999999"/>  <stop offset="50%" style="stop-color:white"/>  <stop offset="100%" style="stop-color:#FF6600"/>  </linearGradient> 

is replaced by a class attribute of value Class1:

<linearGradient id="PenGradient"    x1="50" y1="50" x2="110" y2="90"  gradientUnits="userSpaceOnUse">  <stop offset="10%" style="stop-color:#999999"/>  <stop offset="50%" style="stop-color:white"/>  <stop class="Class1" offset="100%" />  </linearGradient> 

The same process is carried out for the other five occurrences of the color.

Then I create an external style sheet that, hopefully, maintains the original appearance:

Listing 13.13 (XMML02.css)

.Class1        {       stop-color:#FF6600;        fill:#FF6600;        stroke:#FF6600;        } 

Remember that a color might have been applied to different CSS properties. In the example, the orange color was used in the stop-color property of four separate <stop> elements in separate linear gradients and the fill or stroke properties of text. To ensure that all are appropriately accounted for, make sure that the rule has a class selector the initial full stop indicates that it applies to all elements, whatever the element name, that have a class attribute of value Class1.

The files available for download, XMML02.svg and XMML02.css, show the process at that stage.

The final step is to modify the color (as in this case) or another CSS property you want to change in the site makeover.

Figure 13.08 shows the result of using a quiet green to replace the orange.

Figure 13.08. The test page after restructuring to allow the use of an external style sheet and having made a color change to a quiet green.

The final external Style sheet looks as shown in Listing 13.14.

Listing 13.14 (XMML03.css)

.Class1        {       stop-color:#669966;        fill:#669966;        stroke:#669966;        } 

The revised SVG code that accesses the Style sheet is available for download as XMML03.svg.

Styling SVG using external Style sheets can save you lots of time and make your use of SVG more enjoyable and efficient. To gain the benefits takes just a little planning. Now you need to move on to the situation where you make a mistake and time seems to disappear. Efficient debugging of SVG is something anyone who does any serious SVG development needs to master.

CONTENTS