Crus4

logo
Menu
crus4
Menu

SVG Stroke Properties

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

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

Related Posts: