Если тебя затрудняет работа с SVG ВРУЧНУЮ и ты не хочешь тратить все свое полезное время на описание каждой точки фигуры - установи себе на компьютер Adobe Illustrator (или подобные программы работающие с векторной графикой) и это упростит тебе задачу с рисованием векторных фигур.
Я который месяц пишу сайт-проет и сам придумываю к нему дизайн. Для удобства я пользуюсь Adobe программами.
Твоя лучшая работа сделанная в Adobe Illustrator (время работы над картинкой: 6-8 минут)

а вот в каких форматах можно сохранять файл:

ОБНОВЛЕНО: 24.11.17
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1366 768" style="enable-background:new 0 0 1366 768;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFEC3E;}
.st1{fill:#4614C1;}
.st2{fill:#FFFFFF;}
.st3{font-family:'Arial-Black';}
.st4{font-size:39.5469px;}
.st5{font-size:31px;}
</style>
<path class="st0" d="M0,153c0,0,208-120,437-107s683,147,810,114s119-44,119-44v524c0,0-197,88-358,69s-603.4-204.9-853-81
C16,697,0,706,0,706V153z"/>
<path class="st1" d="M0,213.4C0,213.4,206,68,404,68c183,0,646,152,790,117s172.1-44.3,172.1-44.3v458.5c0,0-182.1,126.8-473.1,44.8
s-501-86-557-81S62,613,0,665.4C-0.3,665.7,0,213.4,0,213.4z"/>
<text transform="matrix(1 0 0 1 381.8267 341.6289)"><tspan x="0" y="0" class="st2 st3 st4">EXAMPLE OF SVG BLOG</tspan><tspan x="63.6" y="37.2" class="st2 st3 st5">BY ANTON ROGALSKIY</tspan></text>
</svg>
Плюсы и минусы Adobe Illustrator:
Плюсы:
- Удобный интерфейс
- Возможность быстрого создания векторных фигур/картинок для разноплановых применений (от создания обычной полоски для разделения на сайте до логотипов и векторных рисунков)
- Быстро осваиваешь
- Есть возможность сохранения в разных форматах
- Помимо сохрания в определенном формате (допустим SVG), можно уточнить в опциях как именно вы хотите сохранить и что добавить в ваш рисунок
- Можно посмотреть код SVG!!!!
- Можно открыть файлы SVG других авторов работ и удалить/изменить/добавить объекты. Когда я работал над тем, что мне нужна была карта Европы - скачав картинку формата .svg с Wikipedia я удалил ненужные watermarks, пару стран Европы и Азии, закрасил их другими цветами и получил нужную мне картинку.
- Если есть файл pdf, то можно открыть его и разобрать фигуры в файле на детали (а так же сохранить фигуры по отдельности). P.S. Это не работает, если pdf это скан или сохранена как одна единая фигура.
Минусы:
- Цена. Adobe программы продаются по подписке на продукт. Эти цены не многие могут потянуть
- Как и в любых делах всему нужно учиться перед тем как применять. Потребуется посмотреть несколько десятков роликов, чтобы понять как работает программа, но если начать сразу работать над программой, знать что вы делаете и чего хотите добиться - у вас легко получится нарисовать то, что задумывали.
- Код SVG может быть неудобен для редактирования/вставки на страницу И для добавления внутри ее элементов другие объекты. Но я думаю, что применив смекалку, эту проблему будет легко решить.
Немного о личном опыте. Когда мне впервые программа попала в руки, я сразу разобрался что к чему, потому что у меня до этого был опыт в Adobe Photoshop и Paint.
(Если есть предложения по добавлению плюсов/минусов - не стесняйтесь редактировать)
ОБРАЗЕЦ СОХРАНЕНИЯ SVG:

Как мы можем видеть, файл можно настраивать на свой вкус и цвет

Код SVG, который вы можете увидееть/скопировать во время сохранения нажав на "Код SVG..."
еще один пример SVG:


<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1366 768" style="enable-background:new 0 0 1366 768;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:none;}
.st2{font-family:'Monaco';}
.st3{font-size:18px;}
.st4{fill:url(#SVGID_2_);}
</style>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="162.809" y1="99.4912" x2="959.6008" y2="535.2817">
<stop offset="0" style="stop-color:#94FF9B"/>
<stop offset="0.9988" style="stop-color:#00942A"/>
</linearGradient>
<rect x="0.5" y="0.5" class="st0" width="1365" height="767"/>
<path d="M1365,1v766H1V1H1365 M1366,0H0v768h1366V0L1366,0z"/>
</g>
<rect x="96.6" y="44.4" class="st1" width="462.8" height="223.6"/>
<text transform="matrix(1 0 0 1 106.5498 58.6099)"><tspan x="0" y="0" class="st2 st3"> УAловите свое руки мощные вдохновениев</tspan><tspan x="432.1" y="0" class="st2 st3">-</tspan><tspan x="0" y="21.6" class="st2 st3">кладывает в ваши творческие инструменты, </tspan><tspan x="5.4" y="43.2" class="st2 st3">которые обеспечивают абсолютный контроль </tspan><tspan x="-5.4" y="64.8" class="st2 st3">над текстом. их помощью вы любым элементам </tspan><tspan x="-5.4" y="86.4" class="st2 st3">тени, эффекты с использованием прозрачно</tspan><tspan x="437.5" y="86.4" class="st2 st3">-</tspan><tspan x="-5.4" y="108" class="st2 st3">сти. Они позволят вам создавать элегантные </tspan><tspan x="-5.4" y="129.6" class="st2 st3">таблицы. И не бойтесь экспериментировать у </tspan><tspan x="5.4" y="151.2" class="st2 st3">вас всегда ть отменить или выполнить по</tspan><tspan x="426.7" y="151.2" class="st2 st3">-</tspan><tspan x="135" y="172.8" class="st2 st3">вторно действия.</tspan><tspan x="10.8" y="194.4" class="st2 st3">Любая работа в продуктивность работы на </tspan></text>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="702.8804" y1="625.736" x2="672.6509" y2="381.0211">
<stop offset="0" style="stop-color:#94FF9B"/>
<stop offset="0.9988" style="stop-color:#00942A"/>
</linearGradient>
<path class="st4" d="M0,768c0,0,91-305,356-352s536,81,749-62s261-192.4,261-192.4V268c0,0-185.8,110-269,134
c-90,26-268,100-384,107c-94.1,5.7-245,2-385,46S28,730,0,768z"/>
<rect x="910.7" y="521.9" class="st1" width="358.4" height="181.4"/>
<text transform="matrix(1 0 0 1 911.7344 536.0391)"><tspan x="0" y="0" class="st2 st3"> УAловите свое руки мощные вдох</tspan><tspan x="345.7" y="0" class="st2 st3">-</tspan><tspan x="0" y="21.6" class="st2 st3">новениевкладывает в ваши творче</tspan><tspan x="345.7" y="21.6" class="st2 st3">-</tspan><tspan x="0" y="43.2" class="st2 st3">ские инструменты, которые обеспе</tspan><tspan x="345.7" y="43.2" class="st2 st3">-</tspan><tspan x="16.2" y="64.8" class="st2 st3">чивают абсолютный контроль над </tspan><tspan x="0" y="86.4" class="st2 st3">текстом. их помощью вы любым эле</tspan><tspan x="345.7" y="86.4" class="st2 st3">-</tspan><tspan x="0" y="108" class="st2 st3">ментам тени, эффекты с использо</tspan><tspan x="345.7" y="108" class="st2 st3">-</tspan><tspan x="0" y="129.6" class="st2 st3">ванием прозрачности. Они позволят </tspan><tspan x="0" y="151.2" class="st2 st3">вам создавать элегантные таблицы. </tspan></text>
</svg>