Docbook2Wiki: Initial conversion from Docbook

2008-03-07T13:40:50Z

Initial conversion from Docbook

←Older revision

Revision as of 13:40, 7 March 2008

Docbook2Wiki: Initial conversion from Docbook

2008-03-07T12:51:41Z

Initial conversion from Docbook

←Older revision

Revision as of 12:51, 7 March 2008

Evanlenz: 1 revision(s)

2008-03-06T23:40:31Z

1 revision(s)

←Older revision

Revision as of 23:40, 6 March 2008

Docbook2Wiki: Initial conversion from Docbook

2008-03-06T23:33:32Z

Initial conversion from Docbook

←Older revision

Revision as of 23:33, 6 March 2008

Evanlenz: 1 revision(s)

2008-03-06T22:52:39Z

1 revision(s)

←Older revision

Revision as of 22:52, 6 March 2008

Docbook2Wiki: Initial conversion from Docbook

2008-03-06T22:38:57Z

Initial conversion from Docbook

←Older revision

Revision as of 22:38, 6 March 2008

Evanlenz: 1 revision(s)

2008-03-06T22:21:59Z

1 revision(s)

←Older revision

Revision as of 22:21, 6 March 2008

Docbook2Wiki: Initial conversion from Docbook

2008-03-06T22:21:01Z

Initial conversion from Docbook

←Older revision		Revision as of 22:21, 6 March 2008
Line 52:		Line 52:
	'''Figure 2-1. Rectangle using default coordinates'''		'''Figure 2-1. Rectangle using default coordinates'''

-	[[Image:SVG ~~Essentials/I_2_tt22~~.png\|Rectangle using default coordinates]]	+	[[Image:SVG Essentials_I_2_tt22.png\|Rectangle using default coordinates]]
	</div>		</div>

Line 80:		Line 80:
	'''Figure 2-2. Rectangle using explicit units'''		'''Figure 2-2. Rectangle using explicit units'''

-	[[Image:SVG ~~Essentials/I_2_tt23~~.png\|Rectangle using explicit units]]	+	[[Image:SVG Essentials_I_2_tt23.png\|Rectangle using explicit units]]
	</div>		</div>

Line 86:		Line 86:
	'''Figure 2-3. Viewport with units; rectangle without units'''		'''Figure 2-3. Viewport with units; rectangle without units'''

-	[[Image:SVG ~~Essentials/I_2_tt24~~.png\|Viewport with units; rectangle without units]]	+	[[Image:SVG Essentials_I_2_tt24.png\|Viewport with units; rectangle without units]]
	</div>		</div>

Line 121:		Line 121:
	'''Figure 2-4. New user coordinates'''		'''Figure 2-4. New user coordinates'''

-	[[Image:SVG ~~Essentials/I_2_tt26~~.png\|New user coordinates]]	+	[[Image:SVG Essentials_I_2_tt26.png\|New user coordinates]]
	</div>		</div>

Line 230:		Line 230:
	'''Figure 2-5. meet -- viewBox fits in viewport'''		'''Figure 2-5. meet -- viewBox fits in viewport'''

-	[[Image:SVG ~~Essentials/I_2_tt29~~.png\|meet -- viewBox fits in viewport]]	+	[[Image:SVG Essentials_I_2_tt29.png\|meet -- viewBox fits in viewport]]
	</div>		</div>

Line 264:		Line 264:
	'''Figure 2-6. slice -- graphic fills viewport'''		'''Figure 2-6. slice -- graphic fills viewport'''

-	[[Image:SVG ~~Essentials/I_2_tt30~~.png\|slice -- graphic fills viewport]]	+	[[Image:SVG Essentials_I_2_tt30.png\|slice -- graphic fills viewport]]
	</div>		</div>

Line 286:		Line 286:
	'''Figure 2-7. Aspect ratio not preserved'''		'''Figure 2-7. Aspect ratio not preserved'''

-	[[Image:SVG ~~Essentials/I_2_tt31~~.png\|Aspect ratio not preserved]]	+	[[Image:SVG Essentials_I_2_tt31.png\|Aspect ratio not preserved]]
	</div>		</div>

Line 302:		Line 302:
	'''Figure 2-8. Nested viewport example'''		'''Figure 2-8. Nested viewport example'''

-	[[Image:SVG ~~Essentials/I_2_tt32~~.png\|Nested viewport example]]	+	[[Image:SVG Essentials_I_2_tt32.png\|Nested viewport example]]
	</div>		</div>

Line 316:		Line 316:
	'''Figure 2-9. Circle in main viewport'''		'''Figure 2-9. Circle in main viewport'''

-	[[Image:SVG ~~Essentials/I_2_tt34~~.png\|Circle in main viewport]]	+	[[Image:SVG Essentials_I_2_tt34.png\|Circle in main viewport]]
	</div>		</div>

Line 332:		Line 332:
	'''Figure 2-10. Circle and boundary box in main viewport'''		'''Figure 2-10. Circle and boundary box in main viewport'''

-	[[Image:SVG ~~Essentials/I_2_tt36~~.png\|Circle and boundary box in main viewport]]	+	[[Image:SVG Essentials_I_2_tt36.png\|Circle and boundary box in main viewport]]
	</div>		</div>

Docbook2Wiki: Initial conversion from Docbook

2008-03-04T22:37:00Z

Initial conversion from Docbook

New page

{{SVG Essentials/TOC}}
The world of SVG is an infinite canvas. In this chapter, we'll discuss how you tell a viewer program which part of this canvas you're interested in, what its dimensions are, and how you locate points within that area.

== The Viewport ==

The area of the canvas that your document intends to use is called the viewport. You establish the size of this viewport with the <tt>width</tt> and <tt>height</tt> attributes on the <tt><svg></tt> element. The values of these attributes can be simply a number, which is presumed to be in pixels; this is said to be specified in user coordinates. You may also specify <tt>width</tt> and <tt>height</tt> as a number followed by a unit identifier, which can be one of the following:

;<tt>em</tt>
: The font size of the default font, usually equivalent to the height of a character
;<tt>ex</tt>
: The height of the letter ''x''
;<tt>px</tt>
: Pixels
;<tt>pt</tt>
: Points (<sup>1</sup>/<sub>72</sub> of an inch)
;<tt>pc</tt>
: Picas (<sup>1</sup>/<sub>6</sub> of an inch)
;<tt>cm</tt>
: Centimeters
;<tt>mm</tt>
: Millimeters
;<tt>in</tt>
: Inches

Examples:

;<tt><svg width="200" height="150"></tt>, <tt><svg width="200px" height="200px"></tt>
: Both of these specify an area 200 pixels wide and 150 pixels tall.
;<tt><svg width="2cm" height="3cm"></tt>
: Specifies an area two centimeters wide and three centimeters high.
;<tt><svg width="2cm" height="36pt"></tt>
: It is possible, though unusual, to mix units; this element specifies an area two centimeters wide and thirty-six points high.

If you have one <tt><svg></tt> element nested within another <tt><svg></tt> element, the nested tag may also specify its <tt>width</tt> and <tt>height</tt> as a percentage, measured in terms of the enclosing element. We will see nested <tt><svg></tt> elements in [[SVG Essentials/Coordinates#Nested Systems of Coordinates|Section 2.5]].

== Using Default User Coordinates ==

When you do not use unit specifiers on your <tt><svg></tt> element, the viewer sets up a coordinate system where the horizontal, or ''x''-coordinate, increases as you go to the right, and the vertical, or ''y''-coordinate, increases as you move vertically downward. The upper left corner of the viewport is defined to have an ''x''- and ''y''-coordinate of zero.<ref>In this book, we will specify a pair of ''x''- and ''y''-coordinates in parentheses, with the ''x''-coordinate first. Thus, (10, 30) represents an ''x''-coordinate of 10 and a ''y''-coordinate of 30.</ref> This point, written as (0, 0) is also called the origin. The coordinate system is a pure geometric system; points have neither width nor height, and the grid lines are considered infinitely thin. We'll return to this subject in [[SVG Essentials/Basic Shapes|Chapter 3]].

[[SVG Essentials/Coordinates#svgess-CHP-2-EX-1|Example 2-1]] establishes a viewport two hundred pixels wide and two hundred pixels high, then draws a rectangle whose upper left corner is at coordinate (10, 10) with a width of 50 pixels and a height of 30 pixels.<ref>To save space, we are leaving out the <tt><?xml ...?></tt> and <tt><!DOCTYPE ...></tt> lines. These are set in stone, so you can take them for granite.</ref> [[SVG Essentials/Coordinates#svgess-CHP-2-FIG-1|Figure 2-1]] shows the result, with rulers and a grid to show the coordinate system.

<div id="svgess-CHP-2-EX-1">
'''Example 2-1. Using default coordinates'''

<svg width="200" height="200">
<rect x="10" y="10" width="50" height="30"
style="stroke: black; fill: none;"/>
</svg>
</div>

<div id="svgess-CHP-2-FIG-1">
'''Figure 2-1. Rectangle using default coordinates'''

[[Image:SVG Essentials/I_2_tt22.png|Rectangle using default coordinates]]
</div>

Even if you don't specify units in the viewport, you may still use them in some SVG shape elements, as we do in [[SVG Essentials/Coordinates#svgess-CHP-2-EX-2|Example 2-2]]. [[SVG Essentials/Coordinates#svgess-CHP-2-FIG-2|Figure 2-2]] shows the result, with rulers and a grid to show the coordinate system.

<div id="svgess-CHP-2-EX-2">
'''Example 2-2. Explicit use of units'''

<svg width="200" height="200">
<rect x="10mm" y="10mm" width="15mm" height="10mm"
style="stroke:black; fill:none;"/>
</svg>
</div>

Specifying units in the <tt><svg></tt> element does not affect coordinates given without units in other elements. [[SVG Essentials/Coordinates#svgess-CHP-2-EX-3|Example 2-3]] shows a viewport set up in millimeters, but the rectangle is still drawn at pixel (user) coordinates, as you see in [[SVG Essentials/Coordinates#svgess-CHP-2-FIG-3|Figure 2-3]].

<div id="svgess-CHP-2-EX-3">
'''Example 2-3. Units on the svg element'''

<svg width="70mm" height="70mm">
<rect x="10" y="10" width="50" height="30"
style="fill: none; stroke: black;"/>
</svg>
</div>

<div id="svgess-CHP-2-FIG-2">
'''Figure 2-2. Rectangle using explicit units'''

[[Image:SVG Essentials/I_2_tt23.png|Rectangle using explicit units]]
</div>

<div id="svgess-CHP-2-FIG-3">
'''Figure 2-3. Viewport with units; rectangle without units'''

[[Image:SVG Essentials/I_2_tt24.png|Viewport with units; rectangle without units]]
</div>

== Specifying User Coordinates for a Viewport ==

In the examples so far, numbers without units have been considered to be pixels. Sometimes this is not what you want. For example, you might want to set up a system where each user coordinate represents one-sixteenth of a centimeter. (We're using this coordinate system to prove a point, not to show a paragon of good design.) In this system, a square that is 40 units by 40 units will display as 2.5 centimeters on a side.

To accomplish this effect, you set the <tt>viewBox</tt> attribute on the <tt><svg></tt> element. The value of this attribute consists of four numbers that represent the minimum ''x''-coordinate, minimum ''y''-coordinate, width, and height of the user coordinate system that you want to superimpose on the viewport.

So, to set up the sixteen-units-per-centimeter coordinate system for a four centimeter by five centimeter drawing, you'd use this starting tag:

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

[[SVG Essentials/Coordinates#svgess-CHP-2-EX-4|Example 2-4]] lists the SVG for a picture of a house, displayed using the new coordinate system.

<div id="svgess-CHP-2-EX-4">
'''Example 2-4. Using a viewBox'''

<svg width="4cm" height="5cm" viewBox="0 0 64 80">
<rect x="10" y="35" width="40" height="40"
style="stroke: black; fill: none;"/>

<polyline points="10 35, 30 7.68, 50 35"
style="stroke:black; fill: none;"/>

<polyline points="30 75, 30 55, 40 55, 40 75"
style="stroke:black; fill: none;"/>
</svg>
</div>

[[SVG Essentials/Coordinates#svgess-CHP-2-FIG-4|Figure 2-4]] shows the result. The grid and darker numbers show the new user coordinate system; the lighter numbers are positioned at one-centimeter intervals.

<div id="svgess-CHP-2-FIG-4">
'''Figure 2-4. New user coordinates'''

[[Image:SVG Essentials/I_2_tt26.png|New user coordinates]]
</div>

The numbers you specify for the value of the <tt>viewBox</tt> attribute may be separated by commas or whitespace. If either the width or height is zero, none of your graphic will display. It is an error to specify a negative value for the <tt>viewBox</tt> width or height.

== Preserving Aspect Ratio ==

In the previous example, the aspect ratio, or ratio of width to height, of the viewport and the <tt>viewBox</tt> were identical (4/5 = 64/80). What happens, though, if the aspect ratio of the viewport and the viewBox are not the same, as in this example, where <tt>viewBox</tt> has an aspect ratio of one to one, but the viewport has an aspect ratio of one to three?

<svg width="45px" height="135px" viewBox="0 0 90 90">

There are three things that SVG can do in this situation:

* Scale the graphic uniformly according to the smaller dimension so the graphic will fit entirely into the viewport. In the example, the picture would become half its original width and height. We'll show you examples of this in [[SVG Essentials/Coordinates#Using the meet Specifier|Section 2.4.2]].
* Scale the graphic uniformly according to the larger dimension and cut off the parts that lie outside the viewport. In the example, the picture would become one and a half times its original width and height. We'll show you examples in [[SVG Essentials/Coordinates#Using the slice Specifier|Section 2.4.3]].
* Stretch and squash the drawing so that it fits precisely into the new viewport. (That is, don't preserve the aspect ratio at all.) We will cover this in [[SVG Essentials/Coordinates#Using the none Specifier|Section 2.4.4]].

In the first case, since the image will be smaller than the viewport in one dimension, you must specify where to position it. In the example, the picture will be scaled uniformly to a width and height of 45 pixels. The width of the reduced graphic fits the width of the viewport perfectly, but you must now decide whether the image meets (is aligned with) the top, middle, or bottom of the 135-pixel viewport height.

In the second case, since the image will be larger than the viewport in one dimension, you must specify which area is to be sliced away. In the example, the picture will be scaled uniformly to a width and height of 135 pixels. Now the height of the graphic fits the viewport perfectly, but you must decide whether to slice off the right side, left side, or both edges of the picture to fit within the 45-pixel viewport width.

=== Specifying Alignment for preserveAspectRatio ===

The <tt>preserveAspectRatio</tt> attribute lets you specify the alignment of the scaled image with respect to the viewport, and whether you want it to meet the edges or be sliced off. The model for this attribute is:

preserveAspectRatio="''alignment'' [meet | slice]"

where <tt>''alignment''</tt> specifies the axis and location, and is one of <tt>xMinYMin</tt>, <tt>xMinYMid</tt>, <tt>xMinYMax</tt>, <tt>xMidYMin</tt>, <tt>xMidYMid</tt>, <tt>xMidYMax</tt>, <tt>xMaxYMin</tt>, <tt>xMaxYMid</tt>, or <tt>xMaxYMax</tt>. This alignment specifier is formed by concatenating an ''x''-alignment and a ''y''-alignment as shown in [[SVG Essentials/Coordinates#svgess-CHP-2-TABLE-1|Table 2-1]]. The default value for <tt>preserveAspectRatio</tt> is <tt>xMidYMid meet</tt>.

<div class="note">
'''Note'''

The ''y''-alignment begins with a capital letter, since the ''x''- and ''y''-alignments are concatenated into a single word.
</div>

<div id="svgess-CHP-2-TABLE-1">
'''Table 2-1. Values for alignment portion of preserveAspectRatio'''

{| border="1"
|-
! colspan="2" align="center" | X alignment
|-
| '''Value''' || '''Action'''
|-
| <tt>xMin</tt> || Align minimum ''x'' of viewBox with left corner of viewport.
|-
| <tt>xMid</tt> || Align midpoint ''x'' value of viewBox with midpoint ''x'' value of viewport.
|-
| <tt>xMax</tt> || Align maximum ''x'' value of viewBox with right corner of viewport.
|-
| colspan="2" align="center" | '''Y alignment'''
|-
| '''Value''' || '''Action'''
|-
| <tt>YMin</tt> || Align minimum ''y'' of viewBox with top edge of viewport.
|-
| <tt>YMid</tt> || Align midpoint ''y'' value of viewBox with midpoint ''y'' value of viewport.
|-
| <tt>YMax</tt> || Align maximum ''y'' value of viewBox with bottom edge of viewport.
|}
</div>

So, if you want to have the picture with a <tt>viewBox="0 0 90 90"</tt> fit entirely within a viewport that is 45 pixels wide and 135 pixels high, aligned at the top of the viewport, you would write:

<svg width="45px" height="135px" viewBox="0 0 90 90"
preserveAspectRatio="xMinYMin meet">

<div class="tip">
'''Tip'''

In this case, since the width fits precisely, the ''x''-alignment is irrelevant; you could equally well use <tt>xMidYmin</tt> or <tt>xMaxYMin</tt>. However, in the interests of consistency, it's usually best to make both specifiers the same when only one axis is affected.
</div>

This is all fairly abstract; here are some concrete examples that show you how the combinations of alignment and <tt>meet</tt> and <tt>slice</tt> interact with one another.

=== Using the meet Specifier ===

The starting <tt><svg></tt> tags in [[SVG Essentials/Coordinates#svgess-CHP-2-EX-5|Example 2-5]] all use the <tt>meet</tt> specifier.

<div id="svgess-CHP-2-EX-5">
'''Example 2-5. Use of meet specifier'''


<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 90 90"
width="45" height="135">

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 90 90"
width="45" height="135">

<svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 90 90"
width="45" height="135">


<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 90 90"
width="135" height="45">

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 90 90"
width="135" height="45">

<svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 90 90"
width="135" height="45">
</div>

[[SVG Essentials/Coordinates#svgess-CHP-2-FIG-5|Figure 2-5]] shows where the reduced image fits into the enclosing <tt>viewBox</tt>.

<div id="svgess-CHP-2-FIG-5">
'''Figure 2-5. meet -- viewBox fits in viewport'''

[[Image:SVG Essentials/I_2_tt29.png|meet -- viewBox fits in viewport]]
</div>

=== Using the slice Specifier ===

[[SVG Essentials/Coordinates#svgess-CHP-2-FIG-6|Figure 2-6]] shows the use of the <tt>slice</tt> specifier to eliminate parts of the picture that do not fit in the viewport. They were created with the <tt><svg></tt> tags in [[SVG Essentials/Coordinates#svgess-CHP-2-EX-6|Example 2-6]].

<div id="svgess-CHP-2-EX-6">
'''Example 2-6. Use of slice specifier'''


<svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 90 90"
width="45" height="135">

<svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 90 90"
width="45" height="135">

<svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 90 90"
width="45" height="135">


<svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 90 90"
width="135" height="45">

<svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 90 90"
width="135" height="45">

<svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 90 90"
width="135" height="45">
</div>

<div id="svgess-CHP-2-FIG-6">
'''Figure 2-6. slice -- graphic fills viewport'''

[[Image:SVG Essentials/I_2_tt30.png|slice -- graphic fills viewport]]
</div>

=== Using the none Specifier ===

Finally, there is the third option for scaling a graphic when the <tt>viewBox</tt> and <tt>viewPort</tt> don't have the same aspect ratio. If you specify <tt>preserve</tt>- <tt>AspectRatio="none"</tt>, then the graphic will be scaled non-uniformly so that its user coordinates fit the viewport. [[SVG Essentials/Coordinates#svgess-CHP-2-FIG-7|Figure 2-7]] shows such a "fun-house mirror" effect produced with the <tt><svg></tt> tags in [[SVG Essentials/Coordinates#svgess-CHP-2-EX-7|Example 2-7]].

<div id="svgess-CHP-2-EX-7">
'''Example 2-7. Aspect ratio not preserved'''


<svg preserveAspectRatio="none" viewBox="0 0 90 90"
width="45" height="135">


<svg preserveAspectRatio="none" viewBox="0 0 90 90"
width="135" height="45">
</div>

<div id="svgess-CHP-2-FIG-7">
'''Figure 2-7. Aspect ratio not preserved'''

[[Image:SVG Essentials/I_2_tt31.png|Aspect ratio not preserved]]
</div>

== Nested Systems of Coordinates ==

You can establish a new viewport and system of coordinates at any time by putting another <tt><svg></tt> element into your document. The effect is to create a "mini-canvas" upon which you can draw. We used this technique to create illustrations such as [[SVG Essentials/Coordinates#svgess-CHP-2-FIG-5|Figure 2-5]]. Rather than drawing the rectangles, then rescaling and positioning the cat inside each one (the brute force approach), we took these steps:

* Draw the blue rectangles on the main canvas
* For each rectangle, define a new <tt><svg></tt> element with the appropriate <tt>preserveAspectRatio</tt> attribute
* Draw the cat into that new canvas (with <tt><use></tt>), and let SVG do the heavy lifting

Here's a simplified example that shows a circle on the main canvas, then inside a new canvas that's outlined by a blue rectangle that's also on the main canvas. [[SVG Essentials/Coordinates#svgess-CHP-2-FIG-8|Figure 2-8]] is the result we wish to achieve.

<div id="svgess-CHP-2-FIG-8">
'''Figure 2-8. Nested viewport example'''

[[Image:SVG Essentials/I_2_tt32.png|Nested viewport example]]
</div>

First, generate the SVG for the main coordinate system and the circle. Note that we've established the user coordinates to coincide exactly with the viewport in this document.

<svg '''width="200px" height="200px" viewBox="0 0 200 200"'''>
<circle cx="25" cy="25" r="25" style="stroke: black; fill: none;"/>
</svg>

The result is in [[SVG Essentials/Coordinates#svgess-CHP-2-FIG-9|Figure 2-9]].

<div id="svgess-CHP-2-FIG-9">
'''Figure 2-9. Circle in main viewport'''

[[Image:SVG Essentials/I_2_tt34.png|Circle in main viewport]]
</div>

Now, draw the boundary of the box showing where we want the new viewport to be:

<svg width="200px" height="200px" viewBox="0 0 200 200">
<circle cx="25" cy="25" r="25" style="stroke: black; fill: none;"/>
'''<rect x="100" y="5" width="30" height="80"'''
''' style="stroke: blue; fill: none;"/>'''
</svg>

This produces [[SVG Essentials/Coordinates#svgess-CHP-2-FIG-10|Figure 2-10]].

<div id="svgess-CHP-2-FIG-10">
'''Figure 2-10. Circle and boundary box in main viewport'''

[[Image:SVG Essentials/I_2_tt36.png|Circle and boundary box in main viewport]]
</div>

Now, add another <tt><svg></tt> element for the new viewport. In addition to specifying the <tt>viewBox</tt>, <tt>width</tt>, <tt>height</tt>, and <tt>preserveAspectRatio</tt> specification, you may also specify the <tt>x</tt> and <tt>y</tt> attributes — in terms of the enclosing <tt><svg></tt> element — where the new viewport is to be established. (If you don't give values for <tt>x</tt> and <tt>y</tt>, they are presumed to be zero.)

<svgwidth="200px" height="200px" viewBox="0 0 200 200">
<circle cx="25" cy="25" r="25" style="stroke: black; fill: none;"/>
<rect x="100" y="5" width="30" height="80"
style="stroke: blue; fill: none;"/>

'''<svg x="100px" y="5px" width="30px" height="80px" viewBox="0 0 50 50"'''
''' preserveAspectRatio="xMaxYMax meet"> '''
''' </svg>'''
</svg>

Setting up the new coordinates with this nested <tt><svg></tt> element doesn't change the visual display, but it does permit you to add the circle in that new system, producing the result shown in [[SVG Essentials/Coordinates#svgess-CHP-2-FIG-8|Figure 2-8]].

<svg width="200px" height="200px" viewBox="0 0 200 200">
<circle cx="25" cy="25" r="25" style="stroke: black; fill: none;"/>
<rect x="100" y="5" width="30" height="80" style="stroke: blue;
fill: none;"/>

<svg x="100px" y="5px" width="30px" height="80px" viewBox="0 0 50 50"
preserveAspectRatio="xMaxYMax meet">
'''<circle cx="25" cy="25" r="25" style="stroke: black; '''
''' fill: none;"/>'''
</svg>
</svg>
== Notes ==

<references/>

SVG Essentials/Coordinates - Revision history

Docbook2Wiki: Initial conversion from Docbook

Docbook2Wiki: Initial conversion from Docbook

Evanlenz: 1 revision(s)

Docbook2Wiki: Initial conversion from Docbook

Evanlenz: 1 revision(s)

Docbook2Wiki: Initial conversion from Docbook

Evanlenz: 1 revision(s)

Docbook2Wiki: Initial conversion from Docbook

Docbook2Wiki: Initial conversion from Docbook