Softonic

Генератор сеток SVG

Шаг 1 / 3
Далее

Графическая сетка является стандартным элементом дизайнерских инструментов (Figma, Framer), страниц ландингов для разработчиков (Linear, Vercel) и любых интерфейсов, ориентированных на создание эффекта чертежа или графической бумаги. Это также одна из самых компактных фоновых решений: повторяющийся образец <pattern> с двумя штрихами, обычно занимает менее 300 байтов. Генератор позволяет настраивать сетку под любой размер ячейки, толщину штриха и цвет, что обеспечивает возможность создания либо тонкой сетки в стиле Figma, либо ярко выраженного дизайна в формате чертежа.

Как создать сетку

  1. 1

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

    Установите ширину и высоту от 50 до 3 000 пикселей. Кратный размер ячейки помогает избежать частичных ячеек на краях.

  2. 2

    Выберите размер ячейки

    Выберите от 5 до 500 пикселей. Попробуйте 20–40 для тонкого фона, 8–12 для миллиметровой бумаги или 60–80 для выразительного каркаса.

  3. 3

    Выберите ширину и цвет штриха

    Штрихи шириной от 0,5 до 1 пикселя воспринимаются как чистые линии; при ширине более 2 пикселей они начинают выглядеть как нарисованные.

  4. 4

    Установить фон

    Выберите сплошной цвет фона, который создаст SVG. Для наложения скопируйте SVG и измените или удалите фоновый `<rect>` в собственном коде.

  5. 5

    Копируйте SVG

    Вставьте в маркировку или встроенно в URL данных CSS для изображения фонового оформления, подлежащего размещению по плиткам.

Элемент шаблона

Каждая ячейка представляет собой отдельный элемент <path>, формирующий правую и нижнюю границы; повторение этого элемента позволяет создать всю сетку, используя всего два линейных сегмента на каждой ячейке (а не четыре).

<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#cccccc" stroke-width="1"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff"/>
<rect width="100%" height="100%" fill="url(#grid)"/>

Суть заключается в траектории M 40 0 L 0 0 0 40: она начинается в точке (40, 0), проходит по линии до (0, 0) и затем, до (0, 40). Эта траектория рисует верхнюю линию только до верхнего левого угла, после чего продолжает её вниз по левой стороне; при нанесении элементов она формирует полную сетку без дублированных линий.

Руководство по выбору размера образца

Сценарий использования Размер ячейки Штрих Цветовой оттенок
Холст в стиле Figma 20–30 пикселей 1 пиксель #e5e7eb на #fafafa
Графическая бумага 10–12 пикселей 0,5 пикселя #cbd5e1 на #ffffff
Схема 40–60 пикселей 1 пиксель #bfdbfe на #1e3a8a
Wireframe 80 пикселей 1,5 пикселя #9ca3af на #ffffff
Ретро-терминал 16 пикселей 1 пиксель #22c55e на #000000

Основные и второстепенные сетки

Если вы хотите получить оформление в стиле чертежа с тонкой сеткой и более выраженной основной сеткой каждые N ячеек, объедините два фоновых файла в формате SVG.

.grid {
  background:
    url("data:image/svg+xml,<svg>... major grid ...</svg>"),
    url("data:image/svg+xml,<svg>... minor grid ...</svg>");
}

Браузер объединяет оба элемента за одну отрисовку, без снижения производительности.

Доступность

Сетка имеет исключительно декоративную функцию. Применяйте её к псевдоэлементу (::before вместе с position: absolute; inset: 0; z-index: -1;), чтобы программы для чтения экрана и инструменты обработки контента видели только основной контент, а не фон.

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

Штрихи SVG, отображаемые с шириной менее пикселя, могут подвергаться антиализингу. Ширину штриха следует устанавливать в целые значения пикселей (1, 2), а путь смещать на 0,5 пикселя (для штрихов шириной 1 пиксель) для выравнивания с сеткой пикселей.

Не с этим генератором. Для гексагональных сетей требуется элемент, ширина которого в sqrt(3) раза превышает его высоту, а также контур, образующий полугексагон. Используйте специальный инструмент для создания гексагональных сетей или рисуйте её в Figma.

Этот редактор создаёт сплошной фон. Для наложения скопируйте SVG и замените первый фоновый <rect> на fill="transparent" или удалите его в собственном коде.

Да. Сетки в формате SVG занимают от 200 до 500 байт, точно масштабируются при изменении размера экрана (DPR) и позволяют изменять цвет с помощью переменных CSS. Сетка в формате PNG обычно занимает от 5 до 20 КБ и выглядит пикселизованной на дисплеях Retina.

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

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

Сжать 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 либо откройте диалог печати браузера.

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