Skip to main content

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 stroke-width stroke-linecap
stroke-dasharray stroke-linejoin stroke-opacity


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

Demo 1

SVG text stroke Example 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 text circle Example
<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 line stroke width Example
<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 stroke width 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 stroke dasharray Example
<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.


SVG stroke linejoin Example 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>


SVG stroke opacity Example
<svg height="150" width="250" xmlns=""        xmlns: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>


Please share your knowledge to improve code and content standard. Also submit your doubts, and test case. We improve by your feedback. We will try to resolve your query as soon as possible.

New Comment