Example


<svg width="12cm" height="2cm" viewBox="0 0 1200 200" version="1.1">
     <desc>Example linecap - demonstrates three stroke-linecap values</desc>
     <rect x="1" y="1" width="1198" height="198" fill="none" stroke="blue"/>
     <style type="text/css"> .thick { stroke:black; stroke-width:70 } .thin { stroke:#ffcccc; stroke-width:5 } text { text-anchor:middle; font-size:50; font-family:Verdana } circle { fill:#ffcccc; stroke:none } </style>
     <defs>
          <line id="line1" x1="-125" x2="125" y1="0" y2="0" fill="none"/>
          <g id="circles">
               <circle id="circle1" cx="-125" cy="0" r="8"/>
               <circle id="circle2" cx="125" cy="0" r="8"/>
          </g>
     </defs>
     <g transform="translate(200,75)">
          <use class="thick" xlink:href="#line1" stroke-linecap="butt"/>
          <use class="thin" xlink:href="#line1"/>
          <use xlink:href="#circles"/>
          <text y="90">'butt' cap</text>
     </g>
     <g transform="translate(600,75)">
          <use class="thick" xlink:href="#line1" stroke-linecap="round"/>
          <use class="thin" xlink:href="#line1"/>
          <use xlink:href="#circles"/>
          <text y="90">'round' cap</text>
     </g>
     <g transform="translate(1000,75)">
          <use class="thick" xlink:href="#line1" stroke-linecap="square"/>
          <use class="thin" xlink:href="#line1"/>
          <use xlink:href="#circles"/>
          <text y="90">'square' cap</text>
     </g>
</svg>
Original SVG source