Chapter 8 Using CSS with SVG
8. Using CSS with SVG
Sofarwe'vetalkedaboutusingCSSwithHTML,butwecanalsouseCSSwithSVG,
orScalableVectorGraphics.WithCSS,wecanchangetheappearanceofSVGbased
onuserinteraction.WecanusethesameSVGdocumentinmultipleplaces,showing
orhidingportionsofitbasedonthewidthoftheviewport.
Beforewegoanyfurther,however,let'stalkaboutwhatSVGisandwhyyoushould
useit.
Vector Images versus Raster Images
MostoftheimagescurrentlyusedontheWebarerasterimages,alsoknownas
bitmapimages.Rasterimagesaremadeupofpixelsonafixedgrid,withaset
numberofpixelsperinch.JPEG,WebP,GIF,andPNGareallexamplesofraster
imageformats.
Rasterimagesareresolutiondependent.Forexample,a96dpiPNGimagewilllook
greatonadevicewitha96dpidisplayresolution.Whenviewedona144dpidisplay,
however,a96dpiimagewillappearfuzzyorpixelated.Similarly,rasterimages