Softonic

Генератор шаблонов SVG-полос

Шаг 1 / 4
Далее

Штриховые узоры, один из наиболее надёжных способов оформления раздела с героями, разделительной полосы или пустой карточки без использования шаблонных фотографий. Данный генератор создает чистый SVG-файл на основе стандарта <pattern> с двумя цветами, настраиваемой шириной полос и углом поворота, что позволяет файлу чётко масштабироваться, от мобильного баннера размером 320 пикселей до 4K-баннера для рабочего стола.

Как создать штриховую узорную структуру в формате SVG

  1. 1

    Установить размер полотна

    Укажите требуемую ширину и высоту: SVG использует границы области (viewbox), поэтому изображение будет корректно масштабироваться на странице.

  2. 2

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

    Более малые значения создают плотные полосатые узоры, а более крупные, полосы в стиле зонта.

  3. 3

    Выберите угол

    Используйте 0 для горизонтальной диагонали, 90, для вертикальной или 45, для классической диагонали.

  4. 4

    Выберите два цвета

    Установите значения цветов гексадекад для переднего и заднего плана, прозрачные полосы также подходят отлично.

  5. 5

    Копируйте SVG

    Поставьте его в тексте напрямую, сохраните в формате .svg или вставьте в фоновый элемент CSS с помощью конвертера SVG в CSS.

Как формируется шаблон

SVG-файл определяет небольшой элемент <pattern> размером с две полосы, затем заполняет весь контур области элементом <rect> и последующим элементом fill="url(#stripes)". Поскольку шаблоны автоматически повторяются, изменение размера полотна не влияет на толщину полос, изменяется лишь количество поддающихся размещению полос.

patternTransform="rotate(angle)" позволяет создавать диагональные узоры без необходимости повторного расчёта геометрии; при этом узор идеально укладывается под любый угол.

Сводка по ширине полосы Stripe

Ширина полосы Вид Распространённое использование
2–6 пикс. Тонкая полоска Формальные фоновые изображения с нежной текстурой
10–20 пикселей Сбалансированная диагональная компоновка Разделы героя, карточки, разделители
30–60 пикселей Жирный шторчатый элемент Баннеры на странице прибытия, графика в режиме «пустое состояние»
80 пикс. и более блоки размером с постеры заголовки, которые необходимо отображать издалека

советы

– Ставьте контраст низким (например, #f5f5f5 по сравнению с #ffffff), когда шаблон расположен за текстом. Углы в 15, 30 и 45 градусов кажутся более «уместными» по сравнению с строгими значениями 0 или 90 градусов. Чтобы активировать полосы, оберните элемент <rect> вокруг элемента <g> и перемещайте его по циклу: благодаря структуре узорных плиток вы получаете возможность бесконечного прокрутки бесплатно. Результат представляет собой чистый формат SVG без внешних ссылок, поэтому его можно безопасно встроить в HTML-шаблоны или электронные письма, удаляющие теги <script>.

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

Да. Сохраните результат в формате .svg и используйте его под номерами background-image: url(...) и background-repeat: repeat; либо передайте его в конвертер SVG в CSS для получения URL данных для инライン-вывода.

Диагональные линии обрабатываются браузером для устранения эффекта антиализации. Если вы замечаете краевые искажения, увеличьте ширину полосы на 1–2 пикселя или выполните растровизацию изображения в формате PNG большего размера, а затем уменьшите его масштаб.

Палитры выбирают сплошные цвета, поэтому чтобы сделать полосу прозрачной, отредактируйте итоговый SVG: задайте одному fill значение none или 8-значный hex с альфа-каналом, например #00000000. Тогда сквозь SVG будет видно то, что находится за ним.

Результат будет вашим, это просто маркировка, сгенерированная на основе ваших данных, без использования защищённых товарными знаками форм или ресурсов сторонних разработчиков.

Ваши два цвета, а также ширина и высота отправляются на наш сервер только для отрисовки предпросмотра 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 либо откройте диалог печати браузера.

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