As you saw in Chapter 1, Introducing Scalable Vector Graphics, SVG elements use a coordinate plane positioning system. Elements in an SVG document are located using x and y coordinates. This should be familiar to you from your geometry class or, more specifically to the web, if you're used to working with CSS, absolutely positioned elements. The following code shows two variations on the positioning scheme that you've already seen with both a circle element, which uses (cx, center x), and (cy, center y), attributes to place the circle element based on the center of the circle and the rect element, which will use the x and y attributes to place the upper left-hand corner of the square on the coordinate plane:

     <svg xmlns="http://www.w3.org/2000/svg" width="350" height="150"
       viewBox="0 0...