SVG shapes have an attribute known as stroke. The attribute stroke specifies the color of a line that outlines an SVG shape. We saw the use of stroke with a line, but it can be used with most of the SVG elements.

Whenever we specify stroke, we usually also specify a stroke width using the stroke-width attribute. This informs SVG about the thickness (in pixels) of the outline that will be rendered.

To demonstrate stroke and stroke-width attributes, the following example recreates the path from the path example, and sets a stroke to be 10 pixels thick, using red as its color. Additionally, we set the fill of the path to blue. We set all the attributes using the style property of stroke:

<path d="M 10 10 L 210 10 L 110 120 z"
      style="fill:blue;stroke:red;stroke-width:5" />

The preceding example results in the following rendering:

As we saw earlier, we can set stroke on a line. It can also have its stroke-width set. Let...