The SVG line syntax may look slightly intimidating at first, but it’s simply being very precise: a line can only consist of two points, and each point is specified by two separate coordinates for
Unlike the shapes I’ve explored so far, lines are entirely invisible by default, and will remain so until at least a
stroke color is added; once colored, they will remain a hairline until
stroke-width specifies a thickness.
<svg width="300" height="300" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="0" x2="300" y2="200" stroke-width="20" stroke="black" /> </svg>
Polylines are just continued, joined SVG lines with multiple points:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 414.3 231.4"> <polyline stroke="#000" stroke-width="6" fill="none" points="15.7,127.9 112.1,15 294.3,205 75,167.9 364.3,36.4 392.1,212.9 "/> </svg>
Note that unlike a graphical drawing tool, placing the last point of a polyline at the same location as the opening point will not result in a “closed” shape. But you can still apply
fill to a shape:
I’ll have more to say about
fill in a future article; for now, it’s enough to note that while we can apply a
fill to a polyline, and it will usually work as expected, it will provide the appearance of a closed polygon, but it is not the same thing.
Caps & Corners
SVG lines that change direction don’t have to be rendered with hard corners; there are two other options, enabled through the
bevel, which do exactly what they imply. (Note that you may need to thicken the stroke in order to see any change). A third option,
miter, the sharp cornered kind, is the default.
Similarly, the ends of lines can be terminated with three different kinds of cap, using the
round (half circles),
square (lines are capped with a square, like aglets (the cap at the end of shoelaces), or
butt (the default)."
Being appearance properties, both
stroke-linecap can be applied as either attributes or CSS properties.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.