<line>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The <line> SVG element is an SVG basic shape used to create a line connecting two points.

Example

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />

  <!-- If you do not specify the stroke
       color the line will not be visible -->
</svg>

Attributes

x1: Defines the x-axis coordinate of the line starting point. Value type: <length>|<percentage>|<number> ; Default value: 0; Animatable: yes
x2: Defines the x-axis coordinate of the line ending point. Value type: <length>|<percentage>|<number> ; Default value: 0; Animatable: yes
y1: Defines the y-axis coordinate of the line starting point. Value type: <length>|<percentage>|<number> ; Default value: 0; Animatable: yes
y2: Defines the y-axis coordinate of the line ending point. Value type: <length>|<percentage>|<number> ; Default value: 0; Animatable: yes
pathLength: Defines the total path length in user units. Value type: <number> ; Default value: none; Animatable: yes

Usage context

Categories	Basic shape element, Graphics element, Shape element
Permitted content	Any number of the following elements, in any order: Animation elements Descriptive elements

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # LineElement

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
line
systemLanguage
x1
x2
y1
y2