Resizing SVGs in HTML with correct scaling

When I was trying to resize some SVG images to better fit onto a PDF, I thought it would be as simple as resizing a <img> tag: simply to change the width and height of element and it would adaptively respond. SVGs work differently than that. Since they use vectors to render their images, it's not as easy as stretching a few pixels uniformly like it is with GIFs or JPEGs.

Take for example this image:

The SVG tag specifies width="680" height="520". Here's what it looks like if you set width="340" height="260":

You only get a small part of what the actual image is.

As it turns out, there is an optional element called a viewBox on the root of SVG tag. If you resize your image and want it to contain the rest of the element, you need to set it to capture the original size e.g. viewBox="0 0 680 520".