XMLdialectssuchasXHTML.Todothis,however,wehavetoaddthexmlns
namespaceattributetothelinktag.Unfortunately,linkingtoexternalCSSwillfailtoworkifyouusetheimgelement.
SameifyouinlineyourSVGdocumentinHTML.Inthosecases,you'llneedto
either:1.utilizethestyleelementwithinyourSVGdocument2.linkyourCSSfromtheHTMLdocument;forexample:<head>
M
<link href="svg.css" type="text/css" rel="stylesheet" />
</head>3.usetheobjectelementtoembedyourSVGfile.Usingobjectofferstheadditional
advantageofmakingtheSVG'sdocumenttreeavailabletoyourHTMLdocument's
DOM(forexample,document.querySelector('object').contentDocument).^1WhenusinginlineSVGwithinanHTMLdocument,thoseSVGelementsbecome
partoftheHTMLdocumenttree.WhileitisstillpossibletoembedCSSwithinthat
inlinedocument,youmaywishtogrouptheCSSforthatSVGdocumentwiththe
CSSofitsparentdocument.It'salsopossibletouseCSSwithSVGdocumentsthatweregeneratedbydrawing
softwaresuchasInkscapeorIllustrator.Thesecanbeeditedusingastandardtext
editor.Inmostcases,doingsowillnotaffectyourabilitytomodifytheimagewith
thatdrawingapplication;however,theapplicationmaychangeyourmarkupwhen
youresavethedocument.Differences between SVG and HTML
WhileSVGandHTMLarebothmarkuplanguages,therearetwosignificantdiffer-
encesbetweenthemthataffecthowtheyworkwithCSS:SVGdoesnotadhereto
theCSSboxmodel,andSVGelementscannotbepositioned.(^1) CraigBuckler'spiece“HowtoAddScalableVectorGraphicstoYourWebPage”
[http://www.sitepoint.com/add-svg-to-web-page/]discussesthesemethodsindetail.
310 CSS Master