Skip to Content

SVG Lines in HTML

Here's a quick tutorial that will teach you how to create a line with HTML's svg and line tags.

SVG line

<svg xmlns=""
viewBox="0 0 1000 200">

<line x1="100" x2="900"
y1="150" y2="50"
opacity="1.0" />
Ad - Web Hosting from SiteGround - Crafted for easy site management. Click to learn more.
Advertising Disclosure: I am compensated for purchases made through affiliate links. Click here for details.

The Attributes

Here are the attributes used to define our line:

  • x1 & y1: The x and y position of the first point of the line, relative to the size and position of the viewbox.
  • x2 & y2: The x and y position of the second point of the line, relative to the size and position of the viewbox.
  • stroke: The color of the line. This value can be defined either by specifying a hexadecimal color code as we did above or by using a valid color name.
  • stroke-width: The width of the line output to the screen, relative to the size of the viewbox.
  • opacity: Determines if the line will have any transparency. Valid decimal values can be between 0.0 (invisible) and 1.0 (fully visible). A value of 0.5 would give the line 50% transparency.

Other SVG Paths & Shapes


Posted by: Josh Rowe
Created: April 08, 2022


There are no comments yet. Start the conversation!

Add A Comment

Comment Etiquette: Wrap code in a <code> and </code>. Please keep comments on-topic, do not post spam, keep the conversation constructive, and be nice to each other.