CSS Master

stroke-dasharray: 10, 15;

stroke-linecap: round;

}

TogetherthisgivesustheresultinFigure8.4.

Figure 8.4. Using CSS to style SVG elements

MostSVGattributesareunavailabletoCSS;however,text,font,stroke,clipping,
filter,gradient,color,andpaintingpropertiesareavailable.Inotherwords,it'snot
possibletochangethexoryattributesofanelementusingCSS(you'dneedtouse
JavaScript),butyoucanmodifyappearance-relatedproperties.^5

Creating SVG Sprites

ImagespritingisatechniqueforreducingthenumberofHTTPrequestsbycombin-
ingseveralsmallerimages—typicallybitmapicons—intoasinglefile,asshownin
Figure8.5.Reducingthenumberofnetworkrequeststypicallyboostswebsiteper-
formance.Ratherthanrequestingmultipleimagefiles,thebrowseronlyneedsto
requestone.Displayingaspecificiconbecomesamatterofshiftingthebackground
positionofthisbitmapfile.^6

(^5) JustareminderthatthecompletelistisavailableintheStyling
[http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties]sectionoftheSVGspecification.
(^6) Ifyou'reunfamiliarwithCSSsprites,CSS-Trickshasanexcellentprimer,"CSSSprites:WhatThey
Are,WhyThey’reCool,andHowToUseThem."[https://css-tricks.com/css-sprites/]
Using CSS with SVG 313