Painting the Web

Revisiting the Viewport and the viewBox

For the most part, you won't need to make any modifications to the default coordinate system other than specifying the initial width and height of the canvas area supported:

<svg width="500" height="500">

In the end of the last section covering patterns, I also demonstrated one of the repercussions associated with the canvas size, particularly when using percentages. In that example, the pattern that was set to use the user coordinate system altered as the browser page sized, because the canvas was set to 100% of the browser page by default. When the page resized, so did the pattern.

The same holds with objects: if the objects are sized using explicit dimensions that exceed the canvas, they're truncated; otherwise, if they're sized using percentages, they'll resize with the canvas. The following tiny SVG application creates such an object, and if you load the page in a browser and resize it vertically and horizontally, the box will change size and shape:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>Resizing box</title>
  <rect x="20%" y="20%" width="20%" height="50%" fill="red" stroke="black" />
</svg>

If sizes are given in real units rather than in percentages, the resizing client space issue doesn't occur, but other issues could arise—including the aforementioned truncated image. There are multiple ...