SVG Stroke

stroke are used to defined the color of svg elements outline shape(border). stroke are provide wide range of attributes. there are given in tables.

Stroke

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

Demo 1

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

Demo 2

<svg height="170" width="250" xmlns="http://www.w3.org/2000/svg"        xmlns:xlink="http://www.w3.org/1999/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>
</svg>

stroke-width

change width of shape outline.

Example

<svg height="150" width="250" xmlns="http://www.w3.org/2000/svg"        xmlns:xlink="http://www.w3.org/1999/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>
</svg>

Stroke width Animation example

<svg height="260" width="250" xmlns="http://www.w3.org/2000/svg"        xmlns:xlink="http://www.w3.org/1999/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>
  </circle>
</svg>

SVG stroke-dasharray

<svg width="300" height="200"  
     xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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>
</svg>

Stroke-linejoin

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

Example

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    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>
</svg>

stroke-opacity

<svg height="150" width="250" xmlns="http://www.w3.org/2000/svg"        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<line x1="10" y1="10" x2="10" y2="100" stroke="#9c27b0" stroke-width="10px"  stroke-opacity="1.0">  </line>
<line stroke-opacity="0.1" x1="30" y1="10" x2="30" y2="100" stroke="#9c27b0" stroke-width="10px" >  </line>
<line stroke-opacity="0.2" x1="50" y1="10" x2="50" y2="100" stroke="#9c27b0" stroke-width="10px">  </line>
<line stroke-opacity="0.3" x1="70" y1="10" x2="70" y2="100" stroke="#9c27b0" stroke-width="10px">  </line>
<line stroke-opacity="0.4" x1="90" y1="10" x2="90" y2="100" stroke="#9c27b0" stroke-width="10px">  </line>
<line stroke-opacity="0.5" x1="110" y1="10" x2="110" y2="100" stroke="#9c27b0" stroke-width="10px">  </line>
<line stroke-opacity="0.6" x1="130" y1="10" x2="130" y2="100" stroke="#9c27b0" stroke-width="10px">  </line>
<line stroke-opacity="0.7" x1="150" y1="10" x2="150" y2="100" stroke="#9c27b0" stroke-width="10px">  </line>
<line stroke-opacity="0.8" x1="170" y1="10" x2="170" y2="100" stroke="#9c27b0" stroke-width="10px">  </line>
<line stroke-opacity="0.9" x1="190" y1="10" x2="190" y2="100" stroke="#9c27b0" stroke-width="10px">  </line>
</svg>