Re: What does viewBox really do?

On Sun, 23 Jun 2002, Bruce Wallace wrote:

> 
> I have been going in circles with the author of SVG Essentials
> (OReilly) regarding its description on page 19 of what viewBox
> does.  According to the book, (but heavily back-pedaled by the
> author quoting SVG Std excepts) is the simple assertion that one
> defines the equivalence of user coords to specific units (e.g. cm,
> inches, etc) via the viewBox in an outer SVG tag.
> HOWEVER, neither Batik-1.1.1 nor Adobe 3.0 plugin viewers agree.
> 
> So, What DOES viewBox really do if not defining the meaning of
> user coords?
> 
> In the trivial example below, a 100-user-coord line does not draw
> the same length as a 1-inch line by either Batik or Adobe (but
> they disagree on which is longer!).  Since 100 user coords to the
> inch was specified in the viewBox, why aren't they the same length?
> If that is not what viewBox does, WHAT DOES IT DO?
> 
> <?xml version="1.0" ?>
> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
>      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
> 
> <svg xmlns="http://www.w3.org/2000/svg"
>       viewBox="0 0 850 1100" height="11in" width="8.5in">
> <line stroke-width="10" stroke="yellow" x1="0" y1="20" x2="1in"    y2="20"/>
> <line stroke-width="10" stroke="orange" x1="0" y1="30" x2="100"    y2="30"/>
> <line stroke-width="10" stroke="green"  x1="0" y1="40" x2="100px" y2="40"/>
> </svg>
> 
> thanks,
> Bruce Wallace
> 

OK. Here's what's going on. Let's look at the following code:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="4cm" height="5cm" viewBox="0 0 64 80">

    <!-- stay inside clipping area for rectangle -->
	<rect x="0" y="0" width="63" height="79"
		style="fill:none; stroke:black;"/>

	<line x1="0cm" x2="1cm" y1="10" y2="10"
		style="stroke:red;"/>
	<line x1="0" x2="37.8" y1="12" y2="12"
		style="stroke: green;"/>
</svg>

The outermost <svg> element says that the entire canvas should be 4 cm
wide and 5 cm tall. The viewer program translates cm to device units. On
my 96dpi screen, which is 37.8 dots per centimeter, that allocates a
canvas of 151 pixels by 188 pixels. The viewBox attribute says that the
4cm by 5 cm (on my screen, 151px x 188px) should be mapped onto a space of
64 user units wide and 80 user units tall.

If your screen is in adjustment, you can measure the rectangle drawn by
the <rect> element; it will indeed be 4 by 5 cm. This is what Example 2-4
was designed to show, and it does work correctly. A user coordinate of 80
does map to 5cm on the screen.

Now let's look at the first line. Since the viewport width is 4 cm, you
would figure that the line would go only one fourth the way across the
rectangle, but it doesn't.

That's because the viewport has already been established, and, according
to the spec, the "1cm" is going to be translated to user units. One
centimeter, given my screen resolution, is 37.8 user units. !!But these
user units are now presumed to be in terms of the viewBox!!, and 37.8 out
of 80 units is about halfway across, which is exactly what you see.  This
is confirmed by the second line, which draws to the user coordinates of 
37.8.  If your screen is set to 72dpi or some other value, of course, you 
will see something different.

-- 
J. David Eisenberg  http://catcode.com/

Received on Sunday, 23 June 2002 13:36:27 UTC