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:

<!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:

<!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:

<!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:

<!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 Your Knowledge

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

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?