CSS Master

Figure 8.6. Using an SVG document fragment as a background image

Again,usingfragmentsinbackgroundimagesonlyworksinFirefoxandInternet

Explorer.InWebKitandBlink-basedbrowsers,we'relimitedtousingforeground

images:^8

<object type="image/svg+xml" data="../images/svg-icons.svg#triangle"

➥></object>

ThisisnottheonlySVGicontechnique.Itis,however,theonethattakesthemost

advantageofCSS,whichiswhywe'rediscussingithere.Forothericonandspriting

methodsthatrelymoreonthenativefeaturesofSVG,read“SVGsymbolaGood

ChoiceforIcons”^9 fromCSS-TricksandPeterGasston's“BetterSVGSpriteswith

FragmentIdentifiers”^10.

(^8) We'reusingobjecthereforthebroadestbrowsercompatibility.CurrentversionsofSafaridisplay
buggybehaviorwhenusingfragmentswiththeimgelement.
(^9) https://css-tricks.com/svg-symbol-good-choice-icons/
(^10) http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/
316 CSS Master