SVG with Style Using CSS

SVG with Style Using CSS

From Listing 12.3, you can see that different vector graphics elements within the SVG document share the same style attributes. This includes, for example, line elements for the plot grid, text elements to label the plot axes, and circle elements for the plot data points. Although it is valid to produce an SVG document as in Listing 12.3, in practice it can lead to increased costs and errors due to the fact that if someone needs to make a change to a style, multiple elements need to be edited. For example, if someone wanted to change the style of the circle elements used for the data points in the plot, he would have to edit each circle element in the SVG document. This problem is compounded by the fact that content repositories, such as Web sites, often have a consistent style applied across them. This means that if someone wanted to make a change to the style of SVG diagrams embedded in the content, he would not only have to visit multiple elements within each document, as outlined earlier, but also multiple documents across the reposi-tory. Fortunately, CSS provides a way to centralize this style information so that it can be shared both across elements within an SVG document as well as across different SVG documents. Using CSS, it is possible to make global style changes across documents in a repository by simply editing one attribute value in a central CSS document. This central CSS document is referenced by each SVG document and is used by the SVG viewer at runtime to render the SVG document with the styles in the CSS document. Listing 12.4 shows the sample SVG loan document from Listing 12.3, only this time with CSS applied.

LISTING 12.4  3MonthLoan_WithCss.svg—Sample Loan SVG with CSS

<?xml version=”1.0” standalone=”no”?> <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

➥ ”http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd”> <?xml-stylesheet href=”Loan.css” type=”text/css”?>

<svg  width=”485”  height=”290”>

<rect  x=”0”  y=”0”  width=”485”  height=”290”  class=”border”/>

<rect  x=”68.5”  y=”11.7”  width=”384”  height=”224”  class=”plotbox”/>

<line x1=”67” y1=”58.8” x2=”451” y2=”58.8” class=”axisvalue”/> <line x1=”67” y1=”103.6” x2=”451” y2=”103.6” class=”axisvalue”/> <line x1=”67” y1=”148.4” x2=”451” y2=”148.4” class=”axisvalue”/> <line x1=”67” y1=”193.2” x2=”451” y2=”193.2” class=”axisvalue”/> <line x1=”143.8” y1=”14” x2=”143.8” y2=”238” class=”axisvalue”/> <line x1=”220.6” y1=”14” x2=”220.6” y2=”238” class=”axisvalue”/> <line x1=”297.4” y1=”14” x2=”297.4” y2=”238” class=”axisvalue”/> <line x1=”374.2” y1=”14” x2=”374.2” y2=”238” class=”axisvalue”/>

<text x=”10px” y=”155px” transform=”rotate(-90) translate(-220,-115)” ➥ class=”axis”>Principal Dollars</text>

<text x=”227.08px” y=”283.289px” class=”axis”>Month</text> <text x=”67px” y=”258.072px” class=”axisvalue”>0</text>

<text x=”55px” y=”238px” class=”axisvalue” text-anchor=”end”>0.00</text> <text x=”451px” y=”258.072px” class=”axisvalue”>3</text>

<text  x=”55px”  y=”14px”  class=”axisvalue”  text-anchor=”end”>10000.00</text>

<polyline class=”data” points=”68.5,11.7 196.5,85.87 324.5,160.53 ➥ 452.5,235.7”/>

<circle cx=”68.5” cy=”11.7” r=”4” class=”datapoint”/> <circle cx=”196.5” cy=”85.87” r=”4” class=”datapoint”/> <circle cx=”324.5” cy=”160.53” r=”4” class=”datapoint”/> <circle cx=”452.5” cy=”235.7” r=”4” class=”datapoint”/>

</svg>

The following line in the SVG document in Listing 12.4 references the CSS style sheet on which it depends:

<?xml-stylesheet  href=”Loan.css”  type=”text/css”?>

Listing 12.5 shows the CSS document to which the SVG document in Listing 12.4 refers. This CSS document contains style information used to render the SVG docu-ment in Listing 12.4. At the top of the SVG document in Listing 12.4, the following line appears:

<?xml-stylesheet  href=”Loan.css”  type=”text/css”?>

This line references the CSS document in Listing 12.5 and is used by the SVG viewer at runtime to locate the CSS document with the required style information.

Various elements throughout the SVG document in Listing 12.4 make use of the style information in the CSS style sheet in Listing 12.5 using the class attribute, for example, as shown for the first SVG rect element:

<rect  x=”0”  y=”0”  width=”485”  height=”290”  class=”border”/>

LISTING 12.5  Loan.css—Sample Loan CSS

rect.border

{

stroke:rgb(0,0,0); stroke-width:1; fill:none;

}

rect.plotbox

{

stroke:rgb(0,0,0); stroke-width:3; fill:none;

}

line.axisvalue

{

fill:none;

stroke:rgb(0,0,0); stroke-width:1; stroke-opacity:0.25;

}

text.axis

{

font-size:24; font-family:Arial; fill:rgb(0,0,0);

}

text.axisvalue

{

font-size:12; font-family:Arial; fill:rgb(0,0,0);

}

circle.datapoint

{

fill:rgb(255,0,0);

stroke:rgb(0,0,0); stroke-width:1;

}

circle.analysisDatapoint

{

fill:rgb(255,255,0);

stroke:rgb(0,0,0); stroke-width:1;

}

polyline.data

{

fill:none;

stroke:rgb(255,0,0); stroke-width:2;

}

polyline.analysisData

{

fill:none;

stroke:rgb(255,255,0); stroke-width:2;

}

Elements in the SVG document in Listing 12.4 refer to style information in Listing 12.5. For example, circle elements for plot data points in Listing 12.4 have class attributes with values that are used to determine the specific style of information to use from the CSS document in Listing 12.5. In the case of the circle elements, the class attribute has the value datapoint. This value is used together with the type of the element (in this case, circle) to create the key circle.datapoint, which is then used to locate the required style information in the CSS document in Listing 12.5, as shown here:

circle.datapoint

{

fill:rgb(255,0,0);

stroke:rgb(0,0,0); stroke-width:1;

}

Notice the similarity of this information to the style information embedded in each of the circle elements in the SVG document in Listing 12.3, as shown for the following cir-cle elements in bold:

<circle cx=”68.5” cy=”11.7” r=”4” fill=”rgb(255,0,0)” stroke=”rgb(0,0,0)” ➥ stroke-width=”1”/>

For more information on CSS in general, see Chapter 11 “Formatting XML for the Web.”