CSS Master

Figure 8.9. A logo and word mark for the fictitious Hexagon Web Design & Development

Withoutmediaqueries,thisSVGlogowouldsimplystretchorshrinktofitthe
viewportoritscontainer.Butwithmediaqueries,wecandomoreclevertasks.

Let'sdistinguishbetweentheHTMLdocumentviewportandtheSVGdocument
viewport.WhenSVGisinline,theHTMLviewportandtheSVGviewportareone
andthesame.TheSVGdocumentbehavesmoreorlesslikeanotherHTMLelement;
however,whenanSVGdocumentislinked—aswiththeobjectorimgele-
ments—we'redealingwiththeSVGdocumentviewport.Mediaqueriesworkin
bothcases,butwhentheSVGdocumentislinked,itsviewportisindependentof
itsHTMLdocument.Inthatcase,thesizeofthebrowserwindowdoesnotdetermine
thesizeoftheSVGviewport.Instead,theviewportisdeterminedbythedimensions
oftheobjectorimgelement.Takethe(abridged)SVGdocumentthatfollowsas
anexample:^13

images/svgmq.svg (excerpt)

<svg version="1.1" id="HexagonLogo" xmlns="http://www.w3.org/2000/

➥svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

➥ viewBox="0 0 555 174" xml:space="preserve">

<defs>

<style type="text/css">

/* CSS goes here */

</style>

</defs>

<g id="hex">

(^13) Afulldemonstrationofthistechnique,includingthecompletesourceofthisSVGdocument,is
availableinthecodearchive.
Using CSS with SVG 321