Scaling SVG Elements

Scaling <svg>s can be a daunting task, since they act very differently than normal images. Instead of thinking of <svg>s as images, let's change our mindset:

The <svg> element is a telescope into another world.

Much like everything inside of an <iframe> on another webpage, everything inside of an <svg> element is in another world.

Our telescope defaults to a normal zoom level: one "unit" is the same as one pixel. But once we set the external width and height, we can zoom our telescope in or out. To set the zoom on our telescope, we'll use the viewBox property.

The viewBox attribute is our way to change the settings on our telescope.

viewBox should be set to a string, containing four numbers separated by spaces:

• x and y set the position of the top, left corner of our view box.
  Changing these values will pan our view.
• width and height set the number of "units" that are visible inside of our view box.
  Changing these values will zoom our view.

Let's explore different telescope settings for a simple svg with a 10x10 pixel white grid: