Порядок рисования SVG: толстая обводка за буквами

Задайте paint-order="stroke fill" текстовому элементу или фигуре SVG, чтобы рисовать обводку перед заливкой. При непрозрачной заливке она закрывает внутреннюю часть обводки, поэтому толстая обводка не съедает цветную поверхность букв. Также можно записать paint-order: stroke fill; в CSS.

Контур, размер шрифта и ширина обводки остаются прежними. Это настройка внешнего вида, полезная, когда словесный логотип с обводкой становится тяжелым или трудночитаемым после увеличения ее ширины. Она не создает обводку с выравниванием снаружи или новый контур резки.

Почему стандартная обводка теснит буквы

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

Обратный порядок первых двух операций позволяет заливке закрыть это перекрытие. Спецификация рисования SVG определяет порядок, а справка MDN по атрибуту SVG описывает атрибут и его аналог CSS. Короткое значение stroke дает тот же порядок, что stroke fill markers: пропущенные операции следуют после него в своем обычном относительном порядке.

Эффекту нужна видимая заливка. У контура с fill="none" нечему закрывать внутреннюю обводку. Частично прозрачная заливка может пропускать ее, поэтому для показанного здесь результата используйте непрозрачную заливку.

Сравните одну графику в двух размерах

Мы создали короткий словесный логотип BOLD редактируемым текстом и небольшую треугольную эмблему из контура. В браузерном сравнении ниже внутри каждой пары меняется только порядок рисования. Используются ширины обводки 4 и 8 пользовательских единиц SVG, затем один viewBox 400 × 110 показывается с шириной 400 и 200 CSS-пикселей.

При настройке 8 единиц словесный логотип с обычным порядком теряет значительную часть желтой поверхности. Рисование заливки последней сохраняет видимость желтых штрихов. Эффект все еще заметен в версии шириной 200 пикселей, но небольшие отверстия остаются тесными. Крошечное внутреннее отверстие эмблемы тоже становится трудно различить при более тяжелой обводке.

Последняя деталь важна: порядок рисования может сохранить поверхность буквы, не делая каждое отверстие или зазор читаемым. Обводки по-прежнему заходят в незаполненные пространства. Если отверстие закрывается в нужном размере отображения, уменьшите обводку или упростите графику. Увеличение браузерного предпросмотра не заменяет проверки размера, который реально увидит читатель.

Это исходные примеры рисования, а не результаты преобразования PerfectVector. Словесный логотип использует установленный шрифт Arial с запасным sans-serif; другой шрифт меняет формы букв и расстояния.

Попробуйте полный SVG

Сохраните это как wordmark.svg и откройте напрямую в браузере. Пример оставляет достаточно места вокруг фигур для видимой обводки. Измените paint-order на normal для сравнения, затем попробуйте stroke-width="4".

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 110" width="400" height="110">
  <g fill="#ffd76a" stroke="#263b55" stroke-width="8"
     stroke-linejoin="round" paint-order="stroke fill">
    <path d="M22 72 L40 28 L58 72 Z M34 60 H46 L40 44 Z" fill-rule="evenodd"/>
    <text x="78" y="76" font-family="Arial, sans-serif"
          font-size="64" font-weight="700">BOLD</text>
  </g>
</svg>

Группа передает свои свойства окрашивания контуру и тексту. Каждый дочерний элемент использует запрошенный порядок для собственной отрисовки. fill-rule="evenodd" создает внутреннее отверстие эмблемы; оно независимо от порядка рисования.

Чтобы воспроизвести маленькие примеры, измените width и height на 200 и 55, не трогая viewBox. Поскольку в файле нет немасштабируемой обводки, графика и обводка масштабируются вместе. Обводка 8 единиц становится шириной 4 CSS-пикселя при отображении в половинном размере, до учета части, скрытой заливкой.

Для версии через таблицу стилей назначьте целевому элементу класс и задайте:

.outlined-wordmark {
  paint-order: stroke fill;
}

Если и атрибут представления, и объявление CSS задают свойство, CSS имеет приоритет. Если изменение атрибута кажется безрезультатным, проверьте примененные правила. Справка MDN по CSS также объясняет наследование и допустимые сочетания ключевых слов.

Что эта настройка не меняет

Выравнивание обводки. Обводка по-прежнему следует тому же центральному контуру. Рисование заливки поверх части обводки создает границу, выглядящую внешней вокруг заполненных областей, но не перемещает геометрию обводки наружу. На краю отверстия оставшаяся видимая обводка может заходить внутрь отверстия.

Наложение отдельных объектов. Задание порядка рисования одному элементу не отправляет его позади соседней фигуры. Более поздний перекрывающий объект все еще может его закрывать. Переставьте объекты, если проблема в этом. Пример есть в статье почему z-index SVG не меняет порядок контуров логотипа.

Траектории резки или смещения. Режущей машине или геометрическому инструменту нужны соответствующие контуры. Нельзя предполагать, что они интерпретируют привлекательную браузерную обводку как одну соединенную границу. Создайте и проверьте нужную геометрию отдельно, если задача передачи требует этого.

Переносимость шрифта. Пример содержит редактируемый текст. Изменение его порядка рисования не упаковывает шрифт и не фиксирует формы глифов. Используйте проверки смены шрифта SVG, если словесный логотип меняется при открытии в другом месте.

Сохраняйте эти различия при редактировании. Изменение paint-order легко отменить; преобразование обводок или текста в контуры меняет редактируемую структуру документа.

Проверьте копию для передачи в целевой среде

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

1. Сравните цвет поверхности и внешнюю границу в окончательном размере. Посмотрите внутрь B, O и узких отверстий эмблемы.
2. Подтвердите загрузку ожидаемого шрифта. Проверьте расстояния, а также формы букв.
3. Проверьте края страницы. Более широкой обводке может понадобиться больше места в области просмотра или внутри области обрезки.
4. Заново откройте экспортированный файл для передачи. Экспорт может изменить стили или построение объектов, даже если рабочий документ выглядел правильно.

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

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

Когда исходник — растровый логотип

Используйте исходную векторную эмблему и редактируемые надписи, если они есть. Нет пользы в снимке экрана рабочего текста и его трассировке только ради добавления обводки.

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

Там, где надпись можно воссоздать правильным шрифтом, сохраняйте ее отдельным текстовым объектом во время дизайна. Более общее руководство по векторизации логотипов объясняет выбор между восстановлением растровой графики и использованием существующего векторного оригинала.

Частые вопросы

Каков порядок рисования SVG по умолчанию? По умолчанию идет заливка, затем обводка, затем маркеры. Значение normal запрашивает этот порядок.

Отличается ли paint-order="stroke" от "stroke fill"? Здесь они дают один порядок: обводка, заливка, затем маркеры. Неперечисленные операции следуют за перечисленными в своем обычном относительном порядке.

Создает ли paint-order внешнюю обводку? Он не перемещает и не смещает обводку. Непрозрачная заливка скрывает внутреннюю часть центрированной обводки. Оставшаяся обводка все еще может теснить отверстия и зазоры.

Почему моя обводка SVG все еще выглядит слишком тяжелой? Обводка может быть слишком широкой для размера отображения, заливка может быть прозрачной или другое правило CSS может переопределять порядок рисования. Проверьте эти условия и небольшие отверстия в окончательном размере.

Источники

1. W3C — SVG 2 Painting — Определяет порядок рисования и связь заливок и обводок.
2. MDN — SVG paint-order attribute — Описывает порядок ключевых слов, поддерживаемые типы элементов и приоритет CSS над атрибутом представления.
3. MDN — CSS paint-order property — Объясняет наследование и сокращенные последовательности ключевых слов.

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