How do you make responsive SVG elements?

Question

css

Good afternoon.
There is a task to lay out a layout, the transition between sections is not straight, but at an angle, i.e. triangles are obtained. There are many triangles and they are different.
www.seesawstudio.com.au - something like here.
How to cook them correctly? Calculate and register coordinates manually or are there convenient services?
How can I make them stretch when changing screens along with the width of the sections?
UPD Guys, thanks, but in theory I know almost everything about SVG.
You can share your practical experience.
For example, I need to make such a polygon on the SVG so that it stretches when the screens change.
prntscr.com/6kogri
How would you do it? did you select the coordinates manually?
if not difficult, make the code in the sandbox to see.

Answer 1

Responsive svg elements are made using the viewBox and preserveAspectRatio attributes.
Choose some resolution convenient for you, for example 1600 * 1080, hardcode inside this svg polygon elements with coordinates so that everything works out as it should. Then actually set viewBox="0 0 1600 1080" and your svg element starts to stretch adequately for any resolution.
After that, set the second attribute, for example, to the value preserveAspectRatio="xMidYMid slice" (explore other options yourself). He will be responsible for ensuring that your svg looks normal at non-standard resolutions, on square monitors and other strange moments.
Hardcoding the coordinates of two simple polygons is an elementary thing. In general, from idleness, I hard-skin complex arches and arcs, so to speak, I am fond of "drawing with numbers", because God did not endow me with ordinary drawing skills :)

Answer 2

any vector editor allows you to export to SVG, just do not forget that it is an open format and can be easily edited in a regular text editor, especially premiums.
Also, if you are not a specialist in vector editors, there are online editors, and online converters from raster graphics.

Answer 3

Can you do this with a triangle?