Skip to main content
Logo image

PreFigure Author’s Guide

David Austin

Section 2.2 The <coordinates> element

Once the dimensions of the diagram are established in the opening <diagram> element, there is a default coordinate system provided. For instance, if we begin with <diagram dimensions="(300, 200)" margins="10">, we obtain a coordinate system as shown in Figure 2.2.1.
Figure 2.2.1. The default coordinate system
Some authors may know that SVG’s internal coordinate system places the origin in the upper-left corner of the image and the positive \(y\)-axis points down. PreFigure, however, encourages authors to think mathematically so that all graphical components are described in terms of a mathematical coordinate system, such as that shown in Figure 2.2.1. PreFigure will handle the necessary coordinate transforms between mathematical coordinates and SVG’s internal coordinate system.
It is possible to describe diagrams using the default coordinate system seen in Figure 2.2.1. More likely, however, an author intends us to view a specific region in the Cartesian plane. The <coordinates> element allows us to set a mathematical bounding box that lies over the drawing surface. For instance, <coordinates bbox="(-3,-2,9,6)"> results in the coordinate system shown in Figure 2.2.2. Any elements placed under this <coordinates> element will be drawn in this coordinate system.
Figure 2.2.2. A mathematical coordinate system defined using a <coordinates> element
This use of <coordinates> is possibly all you will ever use. However, a <coordinates> element can be given a @destination attribute that describes a region inside the current bounding box where the new bounding box should reside. For example, the PreFigure source in Listing 2.2.3 produces two rectangles placed side by side as seen in Figure 2.2.4 
<diagram dimensions="(410, 200)"
	 margins="5">
  <coordinates bbox="(0,0,1,1)" destination="(0,0,200,200)">
    <rectangle lower-left="(0,0)" dimensions="(1,1)" fill="blue"/>
  </coordinates>
  <coordinates bbox="(0,0,1,1)" destination="(210,0,410,200)">
    <rectangle lower-left="(0,0)" dimensions="(1,1)" fill="red"/>
  </coordinates>
</diagram>
Listing 2.2.3. The PreFigure source for Figure 2.2.4
Figure 2.2.4. The use of two coordinate systems
There are some appropriate applications of this construction, such as diagrams that describe functions from the plane to the plane as you might see in linear algebra or complex analysis. However, this use of <coordinates> is generally discouraged. If you intend to place two, possibly related diagrams side by side in a PreTeXt document, you should create two separate diagrams and place them next to each other using a <sidebyside>. This is particularly important for the production of braille documents from PreTeXt source.
A second, possibly more legitimate, use of <coordinates> elements is to nest one inside another. For instance, we may wish to zoom in on a region in the diagram, as shown in Figure 2.2.5
Figure 2.2.5. Using coordinate systems to zoom
The PreFigure source is given in Listing 2.2.6. The background coordinate system is established by the <coordinate> element in Line 5. Then we include a few graphical components, such as the graph, tangent line, and point, drawn in that coordinate system. Then a second, nested <coordinate> element appears in Line 12 and we draw the graph, tangent line, and point again in the new coordinate system.
<diagram dimensions="(300,300)" margins="5">
  <definition>f(x)=3-x^2/2</definition>
  <definition>a=1</definition>
  <definition>side=0.5</definition>
  <coordinates bbox="(0,0,4,4)">
    <grid-axes decorations="no"/>
    <graph function="f"/>
    <tangent-line function="f" point="a"/>
    <point p="(a,f(a))"/>
    <rectangle center="(a,f(a))" dimensions="(side, side)"
	       stroke="gray"/>
    <coordinates bbox="(a-side/2,f(a)-side/2,a+side/2,f(a)+side/2)"
		 destination="(2.25,2.25,3.75,3.75)">
      <rectangle center="(a,f(a))" dimensions="(side, side)"
		 stroke="gray" fill="white"/>
      <graph function="f"/>
      <tangent-line function="f" point="a"/>
      <point p="(a,f(a))"/>
    </coordinates>
  </coordinates>
</diagram>
Listing 2.2.6. The PreFigure source for Figure 2.2.5
The <coordinates> tag enables authors to specify the diagram’s aspect ratio using the @aspect-ratio attribute. For example, if the aspect ratio is not 1, then a <circle> will appear as an ellipse and a right angle will not appear to be \(90^\circ\text{.}\) Figure 2.2.7 demonstrates the use of @aspect-ratio.
Figure 2.2.7. Use of the @aspect-ratio attribute
<diagram dimensions="(300,270)" margins="5">
  <coordinates bbox="(0,0,10,10)" aspect-ratio="1">
    <grid-axes decorations="no"/>
    <circle center="(2,2)" radius="1.5" stroke="blue"/>
    <definition>vertices=((4,4), (8,1),(7,8))</definition>
    <triangle vertices="vertices" labels="D,E,F"
	      angle-markers="yes"/>
  </coordinates>
</diagram>
Listing 2.2.8. The PreFigure source for Figure 2.2.7
Notice that the height of the diagram is 90% of the width though the <cooordinates> tag sets a mathematical bounding box having the same width and height. By specifying that @aspect-ratio="1", we request that the scales in horizontal and vertical directions be equal.
More generally, the aspect ratio sets the ratio of the horizontal to the vertical scale. For instance, setting @aspect-ratio="2" means that moving one SVG coordinate to the right moves us twice as far mathematically compared to moving one SVG coordinate up.
By default, the horizontal extent of the mathematical bounding box is preserved and the vertical extent is adjusted according to the aspect ratio. The result is that the vertical extent of resulting bounding box in Figure 2.2.7 is \([0,9]\text{.}\) Use @preserve-y-range="yes" to preserve the vertical extent of the given bounding box instead.
PrevTopNext