Code Example

SVG Image

<?xml version="1.0" standalone="no"?>

Right-click on the image to open the SVG viewer pop-up menu. Click 'view SVG' to display the image in a new, full window to zoom & pan the image.  (SVG Viewer Tips)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="200" height="500">

<!-- A horizontal line -->
<line x1="40" y1="20" x2="80" y2="20" style="stroke: blue; ; stroke-width: 2"/>

<!-- A vertical line -->
<line x1="0.7cm" y1="1cm" x2="0.7cm" y2="2.0cm" style="stroke: red; ; stroke-width: 4"/>

<!-- A diagonal line -->
<line x1="30" y1="30" x2="85" y2="85" style="stroke: green; ; stroke-width: 6"/>

<!-- A polyline -->
<polyline points="5 190, 20 190, 25 180, 35 200, 45 180, 55 200, 65
180, 75 200, 80 190, 95 190" style="stroke: purple; stroke-width: 2; fill: none;"/>

<!-- Lines with stroke-linecap attributes -->
<line x1="30" y1="275" x2="70" y2="275"
style="stroke-linecap: butt; stroke: brown; stroke-width: 10"/>

<line x1="30" y1="295" x2="70" y2="295"
style="stroke-linecap: round; stroke: brown; stroke-width: 10;"/>

<line x1="30" y1="315" x2="70" y2="315"
style="stroke-linecap: square; stroke: brown; stroke-width: 10;"/>

<!-- Polylines with stroke-linejoin attributes -->
<polyline
style="stroke-linejoin: miter; stroke: blueviolet; stroke-width: 14;
fill: none;" points="10 455, 25 440, 40 455"/>

<polyline
style="stroke-linejoin: round; stroke: blueviolet; stroke-width: 14;
fill: none;" points="60 455, 75 440, 90 455"/>

<polyline
style="stroke-linejoin: bevel; stroke: blueviolet; stroke-width: 14;
fill: none;" points="110 455, 125 440, 140 455"/>

</svg>

The <line> element draws a straight line segment at the coordinates supplied in the x1 and y1 attributes, and ends the line at the coordinates supplied in the x2 and y2 attributes. Lines can be drawn from different direction and with different thickness by using the stroke-width property.

In the <polyline> example, the numbers in the points attribute refer to xy coordinates. The first number (5,190) is the starting point, and straight line segments are drawn to each successive point. The <polyline> ends with the point defined by the last pair of xy coordinate numbers (95,190).

You may specify the shape of the endpoints of the lines by setting the stroke-linecap property to one of the values "butt", "round", or "square". The third diagram shows these three values, with gray guide lines showing the actual endpoints of the lines. You can see that "round" and "square" extend beyond the end coordinates; "butt", the default, ends exactly at the specified endpoint.

You may also specify the way lines connect at the corners of a shape with the stroke-linejoin property, which may have the values "miter" (pointed), "round" , or "bevel" (flat) like the ones in the last example.