SVG Stroke

stroke are used to defined the color of svg elements outline shape. stroke are provide wide range of properties.

  • stroke
  • stroke-width
  • stroke-linecap
  • stroke-dasharray
  • stroke-linejoin (use in css properties)


help of stroke we can change outline color of SVG shapes or text.

Demo 1

Hello SVG!
<svg height="80" width="250" xmlns=""        xmlns:xlink="" version="1.1">
  <text x="10" y="50" font-size="40px"     font-family="monospace" stroke="slateblue" fill="none">Hello SVG!</text>

Demo 2

<svg height="170" width="250" xmlns=""        xmlns:xlink="" version="1.1">
  <circle cx="80" cy="80" r="70" stroke="blue" fill="none"></circle>
  <circle cx="80" cy="80" r="43" stroke="green" fill="none"></circle>
   <circle cx="80" cy="80" r="20" stroke="pink" fill="none"></circle>


change width of shape outline.


<svg height="150" width="250" xmlns=""        xmlns:xlink="" version="1.1">
  <line x1="10" y1="10" x2="10" y2="100" stroke="gray" stroke-width="1px">  </line>
   <line x1="30" y1="10" x2="30" y2="100" stroke="green" stroke-width="3px">  </line>
     <line x1="50" y1="10" x2="50" y2="100" stroke="#00bcd4" stroke-width="5px">  </line>
   <line x1="70" y1="10" x2="70" y2="100" stroke="darkcyan" stroke-width="10px">  </line>
     <line x1="100" y1="10" x2="100" y2="100" stroke="#9c27b0" stroke-width="20px">  </line>

Stroke width Animation example

<svg height="260" width="250" xmlns=""        xmlns:xlink="" version="1.1">
  <line x1="150" y1="50" x2="100" y2="150" stroke="gray" stroke-width="10px">     <animate attributeName="stroke-width" from="0" to="100" begin="1s" dur="8s"  repeatCount="indefinite"></animate></line>
  <circle cx="80" cy="80" r="5" stroke="forestgreen" fill="pink" stroke-width="1">
     <animate attributeName="stroke-width" from="0" to="100" begin="1s" dur="8s"  repeatCount="indefinite"></animate>

SVG stroke-dasharray

<svg width="300" height="200"  
     xmlns="" preserveAspectRatio="xMidYMid meet" xmlns="" xmlns:xlink="">
   <circle stroke-dasharray="1 1" cx="160" cy="90"  r="80" stroke="blue" stroke-width="2" fill="none"></circle>
  <circle stroke-dasharray="2 3" cx="160" cy="90"  r="70" stroke="#ff5722" stroke-width="5.8" fill="none"></circle>
    <circle stroke-dasharray="50" cx="160" cy="90"  r="30" stroke="#8bc34a" stroke-width="5.8" fill="none"></circle>
      <circle stroke-dasharray="10 10" cx="160" cy="90"  r="50" stroke="#607d8b" stroke-width="5.8" fill="none"></circle>


There are used to change the shape of corner of join points.


Normal shape stroke-linejoin="round" stroke-linejoin="bevel"
<svg version="1.1" xmlns=""
    width="290" height="650">
  <text x="90" y="115"> Normal shape</text>
  <text x="60" y="315"> stroke-linejoin="round"</text>
  <text x="60" y="515">stroke-linejoin="bevel"</text>
  <path stroke="goldenrod" fill="none" stroke-width="15px" d="M90 70 l 50 -50 l 50 50 l 70 40 l-70 40 l-50 50 l-50 -50 l-70 -40 l 73 -42"></path>
   <path stroke-linejoin="round" stroke="hotpink" fill="none" stroke-width="15px" d="M90 270 l 50 -50 l 50 50 l 70 40 l-70 40 l-50 50 l-50 -50 l-70 -40 l 73 -42"></path>
     <path stroke-linejoin="bevel" stroke="chocolate" fill="none" stroke-width="15px" d="M90 470 l 50 -50 l 50 50 l 70 40 l-70 40 l-50 50 l-50 -50 l-70 -40 l 73 -42"></path>

© 2019,, All rights reserved