lagudal

вручную нарисовать - линию можно 3-4 точками, а бэйдж проще всего - Effect-> Distort & Transform -> Zig Zag.
вот даже видео есть если непонятно.
https://www.youtube.com/watch?v=9p6HXeNIdRc

не уточнили, какая именно анимация нужна.
Как пример

1. У вас инлайн css записан в синтаксисе sass или less.
2. block__submit - нет точки перед стилями класса.
3. В принципе, первые 2 пункта - пофигу, так как градиенты в svg так не анимируются, тем более по hover.
Т.е. , если вы поменяете ваш css на валидный -

.block__submit {
  transition: hover 5s ease;
  height: 4vmin;
  width: 100%;
}
.block__submit:hover .stop-start {
  stop-color: green !important;
}
.block__submit:hover .stop-end {
  stop-color: red !important;
}

вы увидите, что цвета по наведению меняются, но никакой плавности вы не добьетесь, так как значение цвета - не числовое, а css анимации (в т.ч. transition) применимы только к числовым значениям.
Анимации градиентов в svg делаются немного по другому. Применительно к hover - как вариант

Если нужно анимировать именно path, а не stroke, т.е. когда речь идет не о четкой линии с постоянной толщиной, а о фигуре с размытыми, рваными краями, не имеющей четкой толщины, то к вышеизложенному clip-path.
Как варианты, пример1 , пример2 , пример3.
Ну или что угодно еще в этом же духе на тему Masking SVG Animations

правильно сказали - зеленые элементы абсолютом к контейнеру изображения, что там будет, картинка или svg
как пример - подсказка

Смотря какие картинки. Бывает такая графика на сайте, которая действительно в svg может дать экономию "веса" файла в несколько порядков. Например, большие фоны, особенно абстрактные.
Но бывает и наоборот, когда, как ни странно, оптимизированный png может быть меньше чем svg- бывают такие svg в которых огромное число точек и сократить нет возможности.
По опыту, например, небольшой логотип в размерах 100-200px по ширине может быть в svg больше png такого же размера, если в нем есть существенные шрифтовые элементы.
Аргумент "чтобы меньше весил" чаще всего не есть важнейший при выборе формата графики. Целесообразность того или иного формата определяется конкретными условиями.

ключевые слова "stroke-dasharray, stoke-dashoffset" - смотрите реализацию в гугле примеров тьма.
Требования к svg - fill none, stroke-width по вашему вкусу.
И у них не по клику а по ховеру элементу с классами core__card js-core-card добавляется класс core__card_active
и вот к нему эта анимация и применяется.
Например, первый элемент, div data-id="insurance" class="core__card js-core-card
внутри него svg id="insuranceSvg", stroke-dashoffset=32.
Как только к диву добавился класс core__card_active, значение stroke-dashoffset анимируется до 0. Убирается активный класс, значение stroke-dashoffset снова в дефолтное. Ну там еще опасити для активного класса, но это уже не svg- там просто все.

из сервисов знаю только vectormagic - но вроде там сейчас вообще убрали возможность как скачать результат в онлайн версии, так и сохранить результат в триальной десктоп-версии.
А так - увидеть что получается можно, и если векторизация необходима на регулярной основе, то етсть варианты:
1. купить
2. искать на просторах русского сегмента сети
3. научиться работать с программами векторной графики, и самому бесплатно, качественно и с удовольствием векторизировать )

Не знаю, кто из вас, вы или ваш дезигнер, но мусье знает толк в извращениях - это ж надо простейшие иконки из 3 точек делать в png, заворачивать их в svg и подключать как спрайты. Как бы есть svg-спрайты, есть png-спрайты - и то и другое имеет право быть, а смешение жанров есть самое настоящее извращение...
Если нормальные svg иконки нельзя сделать, и по другому никак, ну пробуйте...

После того как объект разобрали, делайте составной контур, получится один path.
Но он будет все равно большим, поскольку количество точек останется неизменным.