SVG Essentials, 2nd Edition

Chapter 4. Basic Shapes

Once a coordinate system is established in the <svg> tag, you are ready to begin drawing. This chapter describes the basic shapes you can use to create the major elements of most drawings: lines, rectangles, polygons, circles, and ellipses.

Lines

SVG lets you draw a straight line with the <line> element. Just specify the x- and y-coordinates of the line’s endpoints. Coordinates may be specified without units, in which case they are considered to be user coordinates, or with units such as em, in, etc. (as described in Chapter 3, in The Viewport).

<line x1="start-x" y1="start-y"
  x2="end-x" y2="end-y" />

The SVG in Example 4-1 draws several lines; the reference grid in Figure 4-1 is not part of the SVG you see in the example.

Example 4-1. Basic lines

http://oreillymedia.github.io/svg-essentials-examples/ch04/basic-lines.html

<svg width="200px" height="200px" viewBox="0 0 200 200"
  xmlns="http://www.w3.org/2000/svg">
  <!-- horizontal line -->
  <line x1="40" y1="20" x2="80" y2="20" style="stroke: black;"/>
  <!-- vertical line -->
  <line x1="0.7cm" y1="1cm" x2="0.7cm" y2="2.0cm"
    style="stroke: black;"/>
   <!-- diagonal line -->
   <line x1="30" y1="30" x2="85" y2="85" style="stroke: black;"/>
</svg>

Figure 4-1. Basic lines

Stroke Characteristics

Lines are considered to be strokes of a pen that draws on the canvas. The size, color, and style of the pen stroke are part of the line’s presentation. ...