CSS Master

Figure 8.11. An SVG logo with media queries when the object container is 20em (top) wide and 40em wide

Sincethistechniqueusesthetheonloadeventattribute/SVGLoadevent,it'sagood
ideatoembedourCSSintheSVGfile.WhenCSSisexternal,theSVGloadevent
mayfirebeforeitsassociatedCSSfinishesloading.AswediscussedinChapter 7 ,
InternetExplorer 9 iswithoutsupportformatchMedia.YoucanstilluseCSSmedia
queriestoshoworhideportionsofanSVGimage,butyoumayneedtoserveaddi-
tionalCSStoIE9forconsistentrendering.

Using Media Queries with background-size

SVGdocumentsandmediaqueriesarenotlimitedtoforegroundimages.Wecan
alsoresizetheSVGviewportusingtheCSSbackground-sizeproperty.Thelatest
majorbrowserssupportthistechnique,butolderbrowserversionsdonot.Becareful
whenusingthistechniqueinproduction.^16

We'llstartwiththisSVGdocument:

(^16) InternetExplorer<= 10 lackssupportforthistechnique,asdosomeolderversionsofFirefox.
Using CSS with SVG 325