A snippet of code to remind myself the power of svg independent positioning

svg-left-center

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle">
  <g transform="scale(0.4 0.4)">
    <polygon points="0,0 100,0 50,100"/>
  </g>
  </svg>

  <svg class="svg-triangle" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
    <polygon points="0,0 100,0 50,100"/>
  </svg>

svg-left-center-style

.svg-triangle{
  z-index: 2;
  position:relative;
  display:block;
  width: 100%;
  height: 100px;
  //top :0;
  left :0;
}   

.svg-triangle polygon{
  fill:#98d02e;
  stroke:#65b81d;
  stroke-width:2;
}

.svg-triangle polygon{
  fill:#98d02e;
  stroke:#65b81d;
  stroke-width:2;
}