Как вы делаете адаптивные SVG элементы?

Question

[mishapsv]

Добрый день.
Есть задача сверстать макет, переход между секциями не прямой, а под углом, т.е. получаются треугольники. Треугольников много и они разные.
www.seesawstudio.com.au - примерно, как здесь.
Как правильно их готовить? высчитывать и прописывать координаты в ручную или есть удобные сервисы?
Как задать, чтобы они тянулись при изменении экранов вместе с шириной секций?

UPD Ребята, спасибо, но в теории я про свг почти все знаю.
Можете своим практическим опытом поделиться.
К примеру, мне нужно вот такой многоуголник на СВГ сделать, чтобы тянулся при изменении экранов.
prntscr.com/6kogri
Как бы вы его делали? в ручную координаты подбирали?
если не сложно, сделайте в песочнице код посмотреть.

Answer 1

[Nikolay Talanov]

Адаптивными svg элементы делаются с помощью атрибутов viewBox и preserveAspectRatio.
Выбираете какой-нибудь удобное вам разрешение, например 1600*1080, хардкодите внутри этого svg элементы polygon с координатами, чтобы все получилось как надо. Потом собственно ставите viewBox="0 0 1600 1080" и ваш svg элемент начинает адекватно тянуться под любые разрешения.
После этого выставляете второй аттрибут, допустим в значение preserveAspectRatio="xMidYMid slice" (другие варианты сами изучите). Он будет отвечать за то, чтобы ваш свг смотрелся нормально при нестандартных разрешениях, на квадратных мониторах и прочих странных моментах.
Захардкодить координаты двух простых полигонов - элементарное дело. Я вообще от безделья сложные арки и дуги хардкожу, так сказать увлекаюсь "рисованием циферками", ибо боженька не одарил меня навыками обычного рисования :)

Answer 2

[ShamblerR]

любой векторный редактор позволяет экспортировать в SVG так же не забывайте что он открытый формат и легко редактируется в обычном текстовом редакторе, тем более премитивы.
Так же если вы не спец в векторных редакторах есть онлайн редакторы, и онлайн конверторы с растровой графики.