SVG Line

Last Updated:

How to Draw an Line?

The <line> SVG element that draws lines with two connecting points.

In this example, we will draw a line from (0, 0) to (100, 100) by using <line> SVG element.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> svg line{ stroke:red; stroke-width:2; } </style> </head> <body> <svg height="150" width="150"> <line x1="0" y1="0" x2="100" y2="100" /> </svg> </body> </html>

Attributes Value

AttributeExplanation
x1 Specifies the x-axis coordinate of the line starting point.
x2 Specifies the x-axis coordinate of the line ending point.
y1 Specifies the y-axis coordinate of the line starting point.
y2 Specifies the y-axis coordinate of the line ending point.

Share this Page

Meet the Author