CSS Master

<object data="hexlogo.svg" type="image/svg+xml"

➥ style="width: 20em;"></object>

Figure 8.10. Showing/hiding elements based on the SVG viewport size

AsyoumayhavenoticedfromlookingatFigure8.10,ourSVGimageretainsits
intrinsicdimensionseventhoughpartofithasbeenhidden.This,unfortunately,
isalimitationofSVG.Tofixit,weneedtochangetheviewBoxattributeoftheSVG
document,butonlywhentheviewportisbelowacertainsize.Thisisagreatuse-
caseformatchMedia.^14

TheviewBoxattribute,asitsnamesuggests,determinestheviewableareaofanSVG
element.Byadjustingit,wecandeterminewhichpartofanSVGimagefillsthe
viewport.

WhatfollowsisanexampleusingmatchMediaandamediaquerytoupdatethe
viewBoxattribute.BecausethisJavaScriptisembeddedwithinSVG,wemustwrap
itbetween<![CDATA[and]]>escapetags:

<defs>

<script type="text/javascript">

<![CDATA[

(^14) WediscussedmatchMediainChapter 7
Using CSS with SVG 323