W3docs
en
Log in

SVG Line

Learn the SVG <line> element: draw a straight line with x1/y1/x2/y2, style it with stroke, add dashes and arrowheads, and compare it to <path>.

Description of the <line> element

The SVG <line> element draws a single straight line between two points: a start point (x1, y1) and an end point (x2, y2). Reach for it whenever you need a basic rule, axis, connector, or divider inside an <svg> — it is the simplest and most readable way to express "a line from A to B".

All four coordinate attributes default to 0 and accept either lengths (user units, like 30 or 30px) or percentages relative to the viewport (like 50%). So a <line> with no attributes is a zero-length line at the origin, which renders nothing.

Because a <line> is geometrically one-dimensional, it has no interior area. SVG fills the inside of a shape with the fill paint and paints its outline with the stroke paint — and a line has no inside. For that reason the fill attribute is ignored, and a line is invisible until you give it a stroke.

Example of the SVG <line> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="310" width="400">
      <line x1="50" y1="30" x2="300" y2="300" style="stroke:rgb(8, 112, 177);stroke-width:3" />
    </svg>
  </body>
</html>
Try it Yourself »

Let’s explain the code above:

  • The x1 attribute specifies the starting x-coordinate.
  • The y1 attribute specifies the starting y-coordinate.
  • The x2 attribute specifies the ending x-coordinate.
  • The y2 attribute specifies the ending y-coordinate.

By default, lines are drawn with a black stroke and a stroke width of 1 pixel. You can customize these using the stroke and stroke-width attributes, as shown in the example.

Styling lines: dashes, caps, and arrowheads

A line's appearance is controlled entirely by stroke-related properties. The example below draws three lines with different treatments:

  • stroke-dasharray turns a solid line into a dashed or dotted one. The value is a list of dash and gap lengths (8 4 means an 8-unit dash followed by a 4-unit gap, repeated).
  • stroke-linecap shapes the line's ends — butt (the default, flat), round, or square.
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="160" width="320">
      <!-- Solid line -->
      <line x1="20" y1="30" x2="300" y2="30"
            stroke="rgb(8, 112, 177)" stroke-width="4" />
      <!-- Dashed line -->
      <line x1="20" y1="80" x2="300" y2="80"
            stroke="rgb(8, 112, 177)" stroke-width="4"
            stroke-dasharray="12 6" />
      <!-- Rounded dotted line -->
      <line x1="20" y1="130" x2="300" y2="130"
            stroke="rgb(8, 112, 177)" stroke-width="8"
            stroke-linecap="round" stroke-dasharray="0.1 20" />
    </svg>
  </body>
</html>

Two more properties are useful with lines:

  • marker-end attaches a reusable <marker> (defined in <defs>) to the end of the line — the standard way to add an arrowhead.
  • vector-effect="non-scaling-stroke" keeps the stroke width constant even when the SVG is scaled, so a hairline stays a hairline regardless of zoom.

SVG <line> vs SVG <path>

The SVG <line> and <path> elements both draw lines, but they serve different purposes. The <line> element is specifically designed for simple, straight lines and is more semantic and efficient for this task. The <path> element is used to define complex shapes or multiple connected lines and curves. While <path> can draw straight lines, it is generally better to use <line> for basic straight segments and reserve <path> for more complex drawings.

The same straight line can be expressed either way. The <line> from the first example is equivalent to a <path> that moves to the start point (M50,30) and draws a line to the end point (L300,300):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="310" width="400">
      <!-- These two draw the same line -->
      <line x1="50" y1="30" x2="300" y2="300"
            stroke="rgb(8, 112, 177)" stroke-width="3" />
      <path d="M50,30 L300,300"
            stroke="rgb(255, 159, 0)" stroke-width="3" />
    </svg>
  </body>
</html>

The <path> version is more verbose for a single segment, which is exactly why <line> exists. If you need several straight segments joined end to end, use <polyline> instead of stacking many <line> elements.

The SVG <line> element also supports the Global Attributes and Event Attributes.

Practice

Practice
Which set of attributes defines the two endpoints of an SVG line?
Which set of attributes defines the two endpoints of an SVG line?
Was this page helpful?