6

Изучаю SVG.

В HTML-верстке, бывают порой такие секции, как у меня в примере, я решил сделать несколько.

Мой код(лучше смотреть на всю страницу):

Первый вариант:

.blob {
  padding: 190px 0 270px;
  background-color: #1E2E8D;
  position: relative;
}

.blob .blob__text {
  font-size: 80px;
  color: #fff;
  text-align: center;
}

.blob .blob__separator-top {
  position: absolute;
  left: 0;
  top: 0;
}

.blob .blob__separator-bottom {
  position: absolute;
  left: 0;
  bottom: 0;
}
<div class="blob">
  <svg class="blob__separator-top" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M 0 100 L 0 0 L 100 -5 L 100 100 Q 10 -75 0 100 Z" fill="white"></path>
    <path d="M -5 114 Q 12 -79 105 103" stroke="orange" stroke-width="7"  fill="transparent"></path>
    </svg>
  <p class="blob__text">SVG Block</p>
  <svg class="blob__separator-bottom" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M -25 210 Q 25 -130 105 100" stroke="orange" stroke-width="8"  fill="#fff"></path>
    </svg>
</div>

Второй вариант:

h2 {
  color: #fff;
  font-size: 80px;
  text-align: center;
}

.content-1 {
  position: relative;
  padding-top: 200px;
  background-color: #1E90FF;
}

.content-2 {
  padding: 200px;
  background-color: #1E2E8D;
}

.content-3 {
  padding-bottom: 200px;
  background-color: #90EE90;
}

.blob__separator-bottom {
  margin-bottom: -4px;
}
<div class="content-1">
  <h2>content-1</h2>
  <div class="blob">
    <svg class="blob__separator-bottom" width="100%" height="400" viewBox="0 0 100 100" preserveAspectRatio="none" fill="#1E2E8D" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <path d="M 104 100 V 0 Q 85 100, 45 104" stroke="orange" stroke-width="7"  fill="transparent"></path>    
     <path d="M 100 100 V 15 Q 80 100, 45 100 Z"/>
    </svg>
  </div>
</div>

<div class="content-2">
  <h2>content-2</h2>
</div>

<div class="content-3">
  <div class="blob">
    <svg class="blob__separator-top" width="100%" height="400" viewBox="0 0 100 100" preserveAspectRatio="none" fill="#1E2E8D" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <path d="M -4 0 V 100 Q 20 0, 50 -4" stroke="orange" stroke-width="7"  fill="transparent"></path>
   <path d="M 0 0 V 85 Q 25 0, 50 0 Z"/>
    </svg>
  </div>
  <h2>content-3</h2>
</div>

Написал руками. Здесь такая дуга, с цветными гранями(здесь именно важно что такие цветные края есть), посередине контент. В общем-то у меня получилось то, что нужно. Я делаю первые шаги в SVG, поэтому у меня есть вопросы:

  1. Возможно подобные блоки можно реализовать иначе, более оптимально?
  2. Возможно подобные блоки можно реализовать без SVG? при условии, что будет адаптивно конечно.
13
  • 1
    @Air Здравствуйте! Вот - developer.mozilla.org/ru/docs/Web/SVG/Tutorial там довольно понятно написано. Важно, как я слышал, научиться руками писать, без векторного редактора. Вот еще какую штуку забавную сделал(нажмите там на старт) на svg codepen.io/alexandr-kazakov/pen/wrWGQY?editors=1010 Когда получается, это может быть довольно интересно. Сейчас экспериментирую. Если помог, плюсаните пожалуйста за вопрос. Всего вам доброго! 21 сен 2017 в 18:46
  • 1
    @Air Я наоборот стараюсь видео не смотреть. Мне видео зачастую представляется некачественным контентом. Читать возможно и тяжелее, но и эффективнее, для обучения, на мой взгляд Могу сказать за себя, что на мозилле(куда дал линк) довольно понятно все объяснено, и на русском, и кажется это несложно. Там важно научиться первые штуки делать, желательно с анимацией, и после уже интереснее становится. Успехов в обучении! 21 сен 2017 в 19:02
  • 1
    @Petr Abdulin Здравствуйте! Я здесь на мете уже однажды обсуждал этот вопрос, и вот, оказалось, что нет такого правила, что нельзя здороваться и благодарить. Это скорее рекомендация. Про поиск я также слышал, но на мой взгляд, это второстепенно. Куда более важно, считаю, что людям стоит стараться общаться доброжелательно друг с другом. Всего вам Петр доброго! 21 сен 2017 в 19:41
  • 1
    Человек все же изменил мой вопрос, поступив по своему произволу. Видимо это все до модератора дойдет сейчас. @Paulo Berezini пожалуйста, не думайте, что все согласны с вашим поведением. Не стоит вам продолжать, считаю я. Я не нарушаю правил ресурса, тем что здороваюсь и благодарю. О своих приоритетах я сказал, и дальше собираюсь быть доброжелательным. 21 сен 2017 в 19:42
  • 1
    Имею смелость предположить что я был прав. Еще раз прошу прощения, и примите мои заранее предоставленные вам благодарности дорогие друзья и коллеги, я рад что я с Вами! 21 сен 2017 в 19:56

1 ответ 1

5

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

Я который месяц пишу сайт-проет и сам придумываю к нему дизайн. Для удобства я пользуюсь Adobe программами.

Твоя лучшая работа сделанная в Adobe Illustrator (время работы над картинкой: 6-8 минут)

картинка 1

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

картинка 2

ОБНОВЛЕНО: 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:

Плюсы:

  1. Удобный интерфейс
  2. Возможность быстрого создания векторных фигур/картинок для разноплановых применений (от создания обычной полоски для разделения на сайте до логотипов и векторных рисунков)
  3. Быстро осваиваешь
  4. Есть возможность сохранения в разных форматах
  5. Помимо сохрания в определенном формате (допустим SVG), можно уточнить в опциях как именно вы хотите сохранить и что добавить в ваш рисунок
  6. Можно посмотреть код SVG!!!!
  7. Можно открыть файлы SVG других авторов работ и удалить/изменить/добавить объекты. Когда я работал над тем, что мне нужна была карта Европы - скачав картинку формата .svg с Wikipedia я удалил ненужные watermarks, пару стран Европы и Азии, закрасил их другими цветами и получил нужную мне картинку.
  8. Если есть файл pdf, то можно открыть его и разобрать фигуры в файле на детали (а так же сохранить фигуры по отдельности). P.S. Это не работает, если pdf это скан или сохранена как одна единая фигура.

Минусы:

  1. Цена. Adobe программы продаются по подписке на продукт. Эти цены не многие могут потянуть
  2. Как и в любых делах всему нужно учиться перед тем как применять. Потребуется посмотреть несколько десятков роликов, чтобы понять как работает программа, но если начать сразу работать над программой, знать что вы делаете и чего хотите добиться - у вас легко получится нарисовать то, что задумывали.
  3. Код 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>

9
  • Здравствуйте! Благодарю за ваш ответ. Видимо он имеет место быть. Я поставлю вам плюс, если вы к ответу добавите живую демонстрацию(лучше сделать разделитель из моего второго варианта). В живой демонстрации пусть будет нарисованный вами в программе разделитель, а также сама страница, где он уже будет применен(как в моих вариантах, где добавлен демо-контент). Иначе говоря, я считаю, что для пользователей, в будущем будет полезнее ответ, который можно увидеть(выполнить код) и применить его у себя, а не просто теория. 24 ноя 2017 в 9:59
  • Также прошу вас улучшить ваш ответ. А именно привести плюсы и минусы использования программы для этого. Плюсом видимо является скорость создания такого разделителя. Я приведу очевидный минус. Считаю что данная работа довольна простая, а программы, что вы предлагаете платные. Оплачивать подписку за месяц, из-за пару линий, мне не хочется. Разные краденные/серые версии мы конечно не рассматриваем. Вы можете еще предложить использовать inkscape(он бесплатный) для этого. Но в нем еще разбираться нужно, тогда стоит учитывать время, затраченное на обучение использования программ. Всего вам доброго! 24 ноя 2017 в 10:00
  • @AlexandrKazakov Да, основным минусом является платная версия... не всех она удовлетворит. Мое хобби - фотографии, поэтому без Adobe программ не могу обходиться. По поводу "в живой форме" - это записать видеоролик всего процесса? 24 ноя 2017 в 12:57
  • Для убедительности того, что я сам нарисовал - на скриншоте "рабочей зоны" программы в правом нижнем углу вы можете увидеть "Слои" где видно, что я рисовал 2 фигуры. На "Слой 1" я использовал вашу работу для более быстрой реализации идеи 24 ноя 2017 в 12:59
  • Имелось ввиду то, что мой код можно выполнить и посмотреть, а ваш нет. Вопрос не только про то, как нарисовать: с помощью программы или без нее. Вопрос про реализацию самого блока, в целом. Можно записать inline svg(как у меня), а можно, видимо, svg как фоновую картинку. Также как позиционировать подобные разделители в секции(сейчас я делаю через position: absolute). Стоит рассмотреть, как сделать грамотно адаптив в подобных секциях. Пример, я сделал здесь: ru.stackoverflow.com/q/745654/234502 Т.е. как не только нарисовать, но и как лучше это применять. 24 ноя 2017 в 13:29

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.