Skip to Main Content
Painting the Web
book

Painting the Web

by Shelley Powers
May 2008
Beginner content levelBeginner
656 pages
17h 41m
English
O'Reilly Media, Inc.
Content preview from 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 ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Reinventing the Organization for GenAI and LLMs

Reinventing the Organization for GenAI and LLMs

Ethan Mollick
Mastering PHP 7

Mastering PHP 7

Branko Ajzele

Publisher Resources

ISBN: 9780596515096Supplemental ContentErrata Page