Фон с сеткой в SVG

Из чего состоит фон с узором

Созданный файл содержит один небольшой тайл, который определяется один раз как узор, и прямоугольник, заполняющий холст этим узором. Поскольку браузер повторяет тайл, файл занимает несколько сотен байт, независимо от того, 20 или 2 000 ячеек в сетке. Первый прямоугольник закрашивает цвет фона, второй рисует линии поверх него.

Каждый тайл рисует только верхний и левый край. Соседние тайлы дают остальное, поэтому ни одна линия не рисуется дважды. Одно следствие стоит знать: линия в первом столбце и первой строке лежит прямо на краю холста, поэтому половина её толщины выходит за пределы. Линия толщиной 1 px поэтому выглядит как тонкая полупиксельная граница сверху и слева. Если ширина холста точно кратна размеру ячейки, правый и нижний край заканчиваются без замыкающей линии.

Выбирайте значения, которые работают как фон

Фон должен поддерживать текст поверх себя. Эти отправные точки безопасны:

Держите контраст между линиями и фоном низким. Если поверх лежит основной текст, линия, почти такая же темная, как текст, утомляет глаз.

Пример расчета

Для блока героя шириной 1200 px и высотой 800 px ячейка 40 px даст 30 колонок и 20 строк, то есть 600 ячеек. Поскольку 1200 и 800 делятся на 40, сетка аккуратно заканчивается на обоих краях. С ячейкой 50 px получится 24 x 16 ячеек, тоже чисто. Ячейка 45 px оставит неполную клетку справа и снизу, так как 1200 делится на 45 как 26,67.

Использование результата

Вставьте SVG напрямую в разметку, сохраните как файл и подключите как изображение или поместите за контент как декоративный слой. Помните, что цвет фона входит в SVG. Если хотите сетку поверх другого цвета, измените первый прямоугольник в скопированном коде.

Согласование фона с версткой

Если колонка контента 960 px шириной, ячейка 32 px или 40 px сохранит сетку и края колонок в ладу, потому что 960 делится на оба значения. Выравнивание сетки по верстке делает линии продуманными, а не случайными.