SVG Stroke Properties

SVG offers different stroke properties that can be applied to any kind of lines, text and outlines of elements. In this chapter we will take a look at the following stroke properties:

stroke
stroke-width
stroke-linecap
stroke-dasharray

**SVG stroke Property**

The stroke property specifies the color of a line, text or outline of an element.

In an example below let’s write an SVG code:

Example

<!DOCTYPE html>
<html>
<head>
 <title>SVG stroke</title>
</head>
  <body>
    <svg width="250" height="100" >
      <g fill="none">
        <path stroke="powderblue" d="M5 30 l215 0" />
        <path stroke="green" d="M5 60 l215 0" />
        <path stroke="red" d="M5 90 l215 0" />
      </g>
    </svg>
  </body>
</html>

Copy the Code and Run it Here

**SVG stroke-width Property**

The SVG stroke-width property is used to specify the thickness of the line, text or outline of an element.

In an example below let’s write an SVG code:

Example

<!DOCTYPE html>
<html>
<head>
 <title>SVG stroke Properties</title>
  <body>

   <svg height="80" width="300">
     <g fill="none" stroke="green">
       <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>
 
  </body>
</html>

Copy the Code and Run it Here

**SVG stroke-linecap Property**

The stroke-linecap property specifies the various types of endings to an open path.

In an example below let’s write an SVG code:

Example

<!DOCTYPE html>
<html>
<head>
 </title>SVG stroke Properties</title>
</head>
<body>
<svg height="80" width="300">
  <g fill="none" stroke="green" 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>
</body>
</html>

Copy the Code and Run it Here

**SVG stroke-dasharray Property**

This property is used to create dashed lines.

In an example below let’s write an SVG code:

Example

<!DOCTYPE html>
<html>
<head>
 <title>SVG stroke Properties</title>
</head>
<body>
<svg height="80" width="300">
  <g fill="none" stroke="green" 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>
  Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

Copy the Code and Run it Here

Next

Related Posts

SVG Rectangle

Dotted Line SVG

SVG Circle

SVG Stroke Properties – crus4