]]>
</style>
<circle cx="101.3" cy="96.8" r="79.6" />
</svg>Noticeherethatwe'vewrappedourCSSin<![CDATA[and]]>tags(CDATAisshort
forcharacterdata).ThistellstheSVGparserthatthisisnotSVGcontentand
shouldn'tbetreatedassuch.SVGisaformofXML,andXMLhasstricterparsing
requirementsforescapingcharacters.Usingthesetagsensuresthatweavoidintro-
ducingcharacterescapingerrorsintoourSVG.
EmbeddingCSSinanSVGdocumentletsusreusethosestylesformultipleelements
withinthesamedocument,butitpreventsthatCSSfrombeingsharedacrossmul-
tipledocuments.That'sprobablyacceptableforlogosandicons;however,ifyou're
creatingalibraryofchartstyles,consideranexternalCSSfileinstead.
Linking from SVG to an External CSS File
AswithHTML,linkingtoanexternalCSSfilemakesitpossibletosharestyles
acrossseveralSVGdocuments.TolinkanexternalCSSfile,add<? xml-stylesheet
?>tothebeginningofyourSVGfile:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0
➥ 200 200" enable-background="new 0 0 200 200">
<circle cx="101.3" cy="96.8" r="79.6" />
</svg>OryoucanusetheXHTMLlinkelement.Justaddthenamespaceattributexmlns=ht-
tp://www.w3.org/1999/xhtmltoyourtag:
<defs>
<link href="style.css" type="text/css" rel="stylesheet"
➥ xmlns="http://www.w3.org/1999/xhtml"/>
</defs>ThelinkelementisnotanSVGelement.ItbelongstoHTMLandXHTML.Under
therulesofXML,though,wecanborrowelementsandtheirbehaviorfromother
Using CSS with SVG 309