SVG

Wait... What's a ViewBox?

I’m reading Sarah Drasner’s SVG Animations book and thought that blogging a summary of each chapter will help cement what I learn… but then went down a viewbox rabbit hole trying to understand the anatomy of an SVG. An Example The book starts off with an <svg> element which has x where to start the svg canvass x coordinate y where to start the svg canvass y coordinate width where to end the svg canvass x coordinate height where to end the svg canvass y coordinate viewBox given the same attibutes as x, y, 450, 100 <svg x="0px" y="0px" width="450px" height="100px" viewBox="0 0 450 100"> <rect x="10" y="5" fill="white" stroke="black" width="90" height="90"/> <circle fill="white" stroke="black" cx="170" cy="50" r="45"/> <polygon fill="white" stroke="black" points="279,5 294,35 328,40 303,62 309,94 279,79 248,94 254,62 230,39 263,35"/> <line fill="none" stroke="black" x1="410" y1="95" x2="440" y2="6"/> <line fill="none" stroke="black" x1="360" y1="6" x2="360" y2="95"/> </svg> We see that the elements take up the height and width of our viewBox: