SVG Stroking

Description of the stroke properties

SVG offers different stroke properties that can be applied to any kind of text, lines and outlines of elements. They allow controlling various aspects of a stroke. Here are some stroke properties:

stroke for specifying the color of a line, outline or text of an element,
stroke-linecap for specifying how the endings of an SVG line are rendered,
stroke-width for specifying the thickness of a line, outline, or text of an element,
stroke-dasharray for specifying dashed lines.

Example of the stroke property:

Example of the stroke property

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="100" >
      <g fill="none">
        <path stroke="purple" d="M5 30 l215 0" />
        <path stroke="lightgreen" d="M5 60 l215 0" />
        <path stroke="pink" d="M5 90 l215 0" />
      </g>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Example of the stroke-linecap property:

Example of the stroke-linecap property

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="100">
      <g fill="none" stroke="lightblue" stroke-width="10">
        <path stroke-linecap="butt" d="M5 30 l215 0" />
        <path stroke-linecap="round" d="M5 60 l215 0" />
        <path stroke-linecap="square" d="M5 90 l215 0" />
      </g>
    </svg>
  </body>
</html>

Example of the stroke-width property:

Example of the stroke-width property

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="100">
      <g fill="none" stroke="lightgreen">
        <path stroke-width="3" d="M5 30 l215 0" />
        <path stroke-width="5" d="M5 60 l215 0" />
        <path stroke-width="7" d="M5 90 l215 0" />
      </g>
    </svg>
  </body>
</html>

Example of the stroke-dasharray property:

Example of the stroke-dasharray property

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="100">
      <g fill="none" stroke="orange" stroke-width="5">
        <path stroke-dasharray="3,5" d="M5 30 l215 0" />
        <path stroke-dasharray="12,12" d="M5 60 l215 0" />
        <path stroke-dasharray="30,15,10,10,10,15" d="M5 90 l215 0" />
      </g>
    </svg>
  </body>
</html>

Practice

Which of the following statements is/are true about SVG stroking in HTML?

The stroke property is used to set the color of an SVG shape.The stroke-width property is used to set the width of the stroke on an SVG shape.The stroke-dasharray property is used to set or remove dash lines on an SVG shape.The stroke-linecap property is used to specify the color of the corners on an SVG shape.The stroke-linejoin property is used to specify the shape to be used at the corners of paths when they are stroked.The stroke-opacity property is used to increase the width of the stroke on an SVG shape.

SVG Stroking ​

Description of the stroke properties ​

Example of the stroke property: ​

Example of the stroke-linecap property: ​

Example of the stroke-width property: ​

Example of the stroke-dasharray property: ​

Practice ​

SVG Stroking

Description of the stroke properties

Example of the stroke property:

Example of the stroke-linecap property:

Example of the stroke-width property:

Example of the stroke-dasharray property:

Practice