SVG Line vs. Path

What’s the difference, and when should one be used instead of the other?
https://jsfiddle.net/1pbgahLu/1/

or, are there certain circumstances where you would use one over the other?

Path

<svg width="260" height="245" viewBox="0 0 260 245"> 
<path d="M148,145,200,234" stroke-width="6" stroke="green"/> </svg>

Line

<svg width="260" height="245" viewBox="0 0 260 245"> 
 <line x1="148" y1="145" x2="200" y2="234" stroke-width="6" stroke="green"/> </svg>

<line> draws a single straight line: it’s not often very useful because, of all the things that can be drawn, one single straight line is not a thing that people commonly need. It’s occasionally useful.

<path> draws the path of a shape or a line; any shape or line. So it’s the most common SVG element, can use it for anything.

1 Like