htmlsvg

how to make <svg> 100% width

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?

Solution

  • 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>