how to make <svg> 100% width

Question

I am trying to make this <svg> element stretch to 100% of the screen width:

  <svg height="100" width="100">
   <path d="M0 0 L100 0 L50 100 Z" />
  </svg>

What do I need to do?

Answer 1

The viewBox defines the co-ordinates you can see. Height and width define the size of the SVG. E.g.

html, body {
  width: 100%;
  height: 100%;
}

<svg height="100%" width="100%" viewBox="0 0 100 100"  preserveAspectRatio="none">
   <path d="M0 0 L100 0 L50 100 Z" />
</svg>