SVG Line vs. Path

#1

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>
#2

The line element is for a simple, single point to point straight line.
The path element is used for more complex shapes such as polygons made up of multiple lines and curved paths

2 Likes