What about position? Where do these primitives draw inside the SVG element? What if you wanted to put a circle in the top-left and another one bottom-right? Where do you start?

SVG is positioned by a grid system, similar to the Cartesian coordinate system. However, in SVG (0,0) is the top-left corner. The x axis proceeds horizontally from left to right starting at 0. The y axis also starts at 0 and extends downward. See the following illustration:

What about drawing shapes on top of each other? How do you control the z index? In SVG, there is no z coordinate. Depth is determined by the order in which the shape is drawn. If you were to draw a circle with coordinates (10,10) and then another one with coordinates (10,10), you would see the second circle drawn on top of the first.

The following sections will cover the basic SVG primitives for drawing shapes...

The SVG line is one of the simplest in the library. It draws a straight line from
one point to another. The syntax is very straightforward and can be experimented with at: http://localhost:8080/chapter-2/line.html, assuming the HTTP server is running:

<line x1="10" y1="10" x2="100" y2="100" stroke-width="1" 
 stroke="red"/>

This will give you the following output:

A description of the element's attributes is as follows:

• x1 and y1: The starting x and y coordinates
• x2 and y2: The ending x and y coordinates
• stroke: This gives the line a red color
• stroke-width: This denotes the width of the line to be drawn in pixels

The line tag also has the ability to change the style of the end of the line. For example, adding the following would change the image so it has round ends:

stroke-linecap: round; 

As stated...

The basic HTML code to create a rectangle is as follows:

<rect width="100" height="20" x="10" y="10"></rect> 

Let's apply the following style:

      rect { 
        stroke-width: 1; 
        stroke:steelblue; 
        fill:#888; 
        fill-opacity: .5; 
      } 

We will create a rectangle that starts at the coordinates (10,10), and is 100 pixels wide and 20 pixels high. Based on the styling, it will have a blue outline, a gray interior, and will appear slightly opaque. See the following output and example
http://localhost:8080/chapter-2/rectangle.html:

There are two more attributes that are useful when creating rounded borders
(rx and ry):

<rect with="100" height="20" x="10" y="10" rx="5" ry="5"></rect> 

These attributes indicate that...

A circle is positioned with the cx and cy attributes. These indicate the x and y coordinates of the center of the circle. The radius is determined by the r attribute. The following is an example you can experiment with ( http://localhost:8080/chapter-2/circle.html):

<circle cx="62" cy="62" r="50"></circle> 

Now type in the following code:

   circle { 
        stroke-width: 5; 
        stroke:steelblue; 
        fill:#888; 
        fill-opacity: .5; 
   } 

This will create a circle with the familiar blue outline, a gray interior, and half-way opaque.

To create a polygon, use the polygon tag. The best way to think about an SVG polygon is to compare it to a child's dot-to-dot game. You can imagine a series of dots and a pen connecting each (x, y) coordinate with a straight line. The series of dots is identified in the points attribute. Take the following as an example (http://localhost:8080/chapter-2/polygon.html):

<polygon points="60,5 10,120 115,120"/> 

First, we start at 60,5 and we move to 10,120. Then, we proceed to 115,120 and, finally, return to 60,5.

When creating maps with D3, the path SVG tag is used most often. Using the definition from W3C, you can think of the path tag as a series of commands that explain how to draw any shape by moving a pen on a piece of paper. The path commands start with the location to place the pen and then a series of follow-up commands that tell the pen how to connect additional points with lines. The path shapes can also be filled or have their outline styled.

Let's look at a very simple example to replicate the triangle we created as a polygon.

Open your browser, go to http://localhost:8080/chapter-2/path.html, and you will see the following output on your screen:

Right-click anywhere in the triangle and select Inspect element.

The path command for this shape is as follows:

<path d="M 120 120 L 220 220, 420 120 Z" stroke="steelblue" 
 fill="lightyellow&quot...

The transform allows you to change your visualization dynamically and is one of the advantages of using SVG and commands to draw shapes. Transform is an additional attribute you can add to any of the elements we have discussed so far. Two important types of transform when dealing with our D3 maps are:

• Translate: Move the element
• Scale: Adjust the coordinates for all attributes in the element

You will likely use this transformation in all of your cartography work and will see it in most D3 examples online. As a technique, it's often used with a margin object to shift the entire visualization. The following syntax can be applied to any element:

transform="translate(x,y)" 

Here, x and y are...

The group tag <g> is used often in SVG, especially in maps. It is used to group elements and then apply a set of attributes to that set. It provides the following benefits:

• It allows you to treat a set of shapes as a single shape for the purpose of scaling and translating.
• It prevents code duplication by allowing you to set attributes at a higher level and have them inherit all the elements included.
• Groups are essential for applying transformations to large sets of SVG nodes in a performant manner. Grouping offsets the parent group rather than modifying each of the attributes in every item of the group.

Let's take the set of shapes used to explain Bézier curves and add all of them to a single group, combining everything we have learned so far, in the following code:

    <svg height="500" width="800"> 
      <g transform...

The text element, as its name describes, is used to display text in SVG. The basic HTML code to create a text node is as follows:

<text x="250" y="150">Hello world!</text> 

It has an x and a y coordinate to tell it where to begin writing in the SVG coordinate system. Styling can be achieved with a CSS class in order to have a clear separation of concerns within our code base. For example, check out the following code:

<text x="250" y="150" class="myText">Hello world!</text> 
 
.myText{ 
  font-size:22px; 
  font-family:Helvetica; 
  stroke-width:2; 
} 

Text also supports rotation in order to provide flexibility when positioning it on the visualization:

<svg width="600" height="600"> 
        <text x="250" y="150" class="myText" 
         transform...

This chapter has given us a wealth of information regarding SVG. We explained paths, lines, circles, rectangles, text, and some of their attributes. We also covered transformation by scaling and translating shapes. Since this chapter has given us a solid baseline, we can now create complicated shapes. The next chapter will introduce us to D3 and how it is used to manage SVG programmatically. On we go!