Softonic

Генератор SVG-разделителей

Шаг 1 / 3
Далее

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

Как создать разделитель секции

  1. 1

    Выберите стиль

    Волна (S-образная кривая), дуга (один арк), наклонная линия (диагональ), треугольники (зигзаг), ступенчатая линия.

  2. 2

    Установить ширину и высоту

    Ширина, ширина страницы (1200–1920 пикселей); Высота, высота разделителя (обычно 50–200 пикселей).

  3. 3

    Выберите цвет заполнения

    Выберите цвет фона следующего раздела, чтобы разделитель плавно интегрировался в него.

  4. 4

    Поворот вертикально

    Переключите flipY, чтобы перевернуть форму, если вам нужно, чтобы она указывала вверх вместо вниз.

  5. 5

    Копируйте SVG

    Поставьте элемент в нижней части выходящего участка или в верхней части входящего. Используйте `preserveAspectRatio="none"` (уже включённый), чтобы форма автоматически расширялась в соответствии с размерами области отображения.

Пять стилей и время их применения

Стиль Атмосфера Отлично сочетается с
Волна Мягкий, дружелюбный стиль Герой → отзывы пользователей, пастельные тона
Кривая Чистый, элегантный дизайн Сетка элементов → Контактная зона (CTA), минималистичный стиль
Наклон Современный, смелый Тёмный герой → светлый контент, темы с высоким контрастом
Треугольники Чёткие, технические Инструменты для разработчиков, SaaS-панели управления
Лестницы Структурированный дизайн в ретро-стиле Таблицы цен, редакционные оформления

Добавление разделителя в вашем маркапе

Типичное расположение в нижней части раздела:

<section class="hero">
  <!-- hero content -->
  <div class="divider" aria-hidden="true">
    <!-- paste the SVG here -->
  </div>
</section>
<section class="next">…</section>

.hero { position: relative; }
.divider {
  position: absolute; bottom: 0; left: 0; width: 100%; line-height: 0;
}
.divider svg { width: 100%; height: auto; display: block; }

Почему preserveAspectRatio="none"

По умолчанию SVG масштабируется равномерно. Для разделителя, охватывающего весь видоотображаемый экран, необходимо, чтобы его форма расширялась горизонтально, на всю ширину от одного края до другого, а не на небольшую дугу, центрированную по центру страницы. Формат preserveAspectRatio="none" позволяет рендереру свободно искажать соотношение сторон, именно это и требуется для таких разделителей.

Доступность и SEO

  • Обозначьте оболочку aria-hidden="true", чтобы программы чтения экрана игнорировали декоративную форму.
  • Соблюдайте размер SVG не более нескольких килобайтов: крупные встроенные SVG замедляют анализ DOM; получаемые результаты значительно меньше 1 КБ.
  • Избегайте растровых изображений для разделительных линий, они становятся нечеткими на ультрашироких мониторах и дисплеях Retina.

Часто задаваемые вопросы

Не строго. Атрибут width в файле SVG определяет внутренний размер элемента, однако при использовании атрибутов preserveAspectRatio="none" и CSS-атрибута width: 100% форма заполняет весь контейнер. Установка ширины на целое число (например, 1200) облегчает чтение значений по траектории элемента.

Это обычно стандартная внутренняя базовая линия элемента SVG. Для устранения разрыва добавьте в SVG значение display: block (или vertical-align: bottom).

Да. Сгенерируйте два или три разделителя разного цвета и уровня прозрачности и накладьте их друг на друга. Устройте смещение каждого на несколько пикселей с помощью кодов margin-top или CSS transform для создания эффекта параллакса.

Генерированный SVG-файл является статичным. Для анимированных волн примените ключевой кадр CSS transform: translateX() к оболочке или используйте две копии рядом и перемещайте их друг относительно друга.

Нет. Ничто не сохраняется, файл в формате SVG каждый раз генерируется заново на основе текущих значений формы.

Сопутствующие инструменты

Сжать GIF

Уменьшайте анимированные GIF прямо в браузере: снижайте размеры, оставляйте меньше кадров и настраивайте качество кодирования. Проверьте петлю перед скачиванием.

Палитра цветов Material Design

Просмотрите палитру цветов Material Design. Копируйте любой оттенок (от 50 до A700) в форматах HEX, RGB или HSL одним нажатием.

Конструктор тир-листов

Создайте приватный тир-лист из текста и локальных изображений. Настройте уровни, распределите элементы мышью или клавиатурой и экспортируйте в JSON, PNG или SVG.

Конвертер JPG в Word

Конвертируйте JPG-фото или скриншот текста в редактируемый документ Word. Инструмент считывает слова с помощью OCR и раскладывает их, чтобы вы могли переписать, отформатировать и переиспользовать их.

Генератор надписей граффити

Создавайте надписи в стилях тег, баббл, блок, трафарет, неон и вайлд. Настраивайте цвета и экспортируйте PNG или SVG прямо в браузере.

Конструктор флагов

Создайте в браузере простой собственный флаг 3:2 с шестью компоновками, цветами, текстом и символом. Скачайте SVG или PNG либо откройте диалог печати браузера.

Инструмент доступен на других языках