SVG - (Straight) Line

About

You can draw a straight line in SVG with the following two elements:

line
path

If you want to add a arrow head or polymarkers, see SVG - Marker (arrowheads or polymarkers)

Articles Related

Element

Line

The line element defines a line segment that starts at one point and ends at another.

<svg>
<line 
     x1="0" 
     y1="0" 
     x2="600" 
     y2="0" 
     stroke="black"
     stroke-width="6"
     />
<line 
     x1="0" 
     y1="0" 
     x2="0" 
     y2="600" 
     stroke="black"
     stroke-width="3"
     />
</svg>

Rendered by WebCode

Path

See Path - Draw a straight line

Example:

<svg width="310" height="30" xmlns="http://www.w3.org/2000/svg">

  <path d="M 10 10 L 300 10" stroke="#000"/>

</svg>

Rendered by WebCode