SVG Stroke Properties

SVG Stroke Properties

SVG provides a wide range of stroke properties. In this chapter, we will discuss the following content:

• stroke
• stroke-width
• stroke-linecap
• stroke-dasharray

All pen touch attributes can be used for any type of line, text, and element outline (such as circles).

SVG stroke attribute

stroke Attribute defines the color of the outline of lines, texts, or elements:

This is the SVG code:

<svg height="80" width="300">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="black" d="M5 40 l215 0" />
    <path stroke="blue" d="M5 60 l215 0" />
  </g>
</svg>

Try It Yourself

SVG stroke-width attribute

stroke-width Attribute defines the thickness of the outline of lines, texts, or elements:

This is the SVG code:

<svg height="80" width="300">
  <g fill="none" stroke="black">
    <path stroke-width="2" d="M5 20 l215 0" />
    <path stroke-width="4" d="M5 40 l215 0" />
    <path stroke-width="6" d="M5 60 l215 0" />
  </g>
</svg>

Try It Yourself

SVG stroke-linecap attribute

stroke-linecap Attribute defines different types of endpoints for open paths:

This is the SVG code:

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>

Try It Yourself

SVG stroke-dasharray attribute

stroke-dasharray Attribute used to create dashed lines:

This is the SVG code:

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>

Try It Yourself