<link href='https://fonts.googleapis.com/css?family=Comfortaa:400,700' rel='stylesheet' type='text/css'>
<section>
  <h1>Stroke Linecap</h1>
  <div class="svg-wrapper">
   <div class="svg-box butt">
    <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.9 97.6">
    <line x1="30" y1="90" x2="30" y2="30"　/>
</svg>
    <h2>butt</h2>
  </div>
    
   <div class="svg-box round">
    <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.9 100.6">
    <line x1="30" y1="90" x2="30" y2="30"　/>
</svg>
    <h2>round</h2>
  </div>
    
    <div class="svg-box square">
    <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.9 97.6">
    <line x1="30" y1="90" x2="30" y2="30"　/>
</svg>
    <h2>square</h2>
  </div>
 </div>
</section>

html,body{
  height:100%;
  display: block;
}

body{
   font-family: 'Comfortaa', cursive;
}

h1 {
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
  font-size:40px;
}

h2{
  text-align:center;
}

svg{
  width: 100px;
  display:block;
  margin:auto;
}

.svg-wrapper{
  text-align:center;
}

.svg-box{
  display:inline-block;
  margin: 0px 20px;
}

.butt{
  line{
    stroke-linecap:butt;
  }
}

.round{
  line{
    stroke-linecap:round;
  }
}

.square{
  line{
    stroke-linecap:square;
  }
}

line{
  stroke:#000;
  stroke-width:20px;
}