How to set SVG polygon to be fully stretched on any screen resolution?

Question

i need to create polygon which will be responsive to any screen resolution and it will be always fully stretched to screen.

I started with this demo but as you can see it is woriking only for fixed width (1000px) of screen.

Is it possible to set polygon's coordinates with percentage units or is there any other way how to accomplish that?

Answer 1

You need to set a viewBox rather than a fixed width and height.

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 20" preserveAspectRatio="none" width="100%" height="100%">

  <polygon points="0,0  1000,0  500,20"
         style="fill:#cc3333;"/>

</svg>