havefixeddimensionsandlookbestattheiroriginalsize.Scalinga 150 x 150 pixel
imageupto 300 x 300 pixels,forexample,willdistortit.Vectorimages,ontheotherhand,useprimitiveshapesandmathematicalexpres-
sions.Ratherthanpixelsonagrid,vectorimageformatsdescribetheshapesthat
makeupanimageandtheirplacementrelativetothedocument'scoordinatesystem.
Asaresult,vectorimagesareresolutionindependent,andretaintheirqualityre-
gardlessofdisplayresolutionordisplaydimensions.ResolutionindependenceisthebiggestadvantageofSVG.AswellasSVGimages
scalingupordownwithnolossofquality,thesameimagewilllookgreatonboth
highandlowDPI(dots-per-inch)devices.Thatsaid,SVGispoorlysuitedtothe
amountofcolordatarequiredforphotographs.It'sbestfordrawingsandshapes.
UseitinplaceofPNGorGIFimagesforlogos,charts,oricons,orasanalternative
tocustomiconfonts.AnotheradvantageofSVGisthatitwasdesignedtobeusedwithotherweblan-
guages.Wecancreate,modify,andmanipulatethemwithJavaScript.Or,aswe'll
seeinthischapter,wecanstyleandanimatethemusingCSS.Associating CSS with SVG Documents
UsingCSSwithSVGisalotlikeusingitwithHTML.WecanapplyCSSusingthe
styleattributeofanSVGelement;groupCSSwithinadocumentusingthestyle
element;orlinktoanexternalstylesheet.Theprosandconsofeachmethodare
thesameaswhenusingCSSwithHTML.Using the style Attribute
HereisasimpleSVGdocumentwherethecodecreatesablackcircle,asshownin
Figure8.1s:306 CSS Master