Line

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 in pixels the width of the line to be drawn

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 endings:

stroke-linecap: round;

As stated earlier, all SVG tags can also be styled with CSS elements. An alternative way of producing the same graphic would be to first create a CSS style, as shown in the following code:

      line ...