Выравнивание обводки SVG: внутри или снаружи

Обводка SVG центрируется на контуре. Чтобы обводка шириной 12 единиц находилась полностью внутри замкнутой фигуры, нарисуйте обводку шириной 24 единицы и обрежьте ее по этой фигуре. Чтобы разместить ту же видимую ширину снаружи, нарисуйте обводку шириной 24 единицы через маску, скрывающую внутреннюю область фигуры. Сохраните копию исходного контура: обрезка и маска меняют видимость, а не базовую геометрию.

Предлагаемое свойство stroke-alignment присутствует в редакторском черновике SVG Strokes, но черновик указывает, что определение обводки SVG 2 остается нормативным. Для файла, который должен работать в разных браузерах и редакторах, постройте и проверьте видимый результат вместо зависимости от предлагаемого свойства.

Посмотрите, где оказывается нарисованная обводка

Этот исходный замкнутый значок использует один контур во всех трех панелях. Его бирюзовая заливка, номинальная видимая обводка 12 единиц и окружающее пространство документа одинаковы. Коралловая пунктирная линия — центральный контур. В средней панели она совпадает с наружным краем синей полосы; справа — с внутренним краем.

Средняя панель сохраняет наружную нарисованную границу значка на его исходном контуре. Внешняя панель увеличивает нарисованную площадь на 12 единиц вокруг контура. Если значок почти касается края viewBox, добавленное окрашивание может обрезаться. Руководство MDN по заливкам и обводкам описывает обычные обводки как центрированные на контуре; сравнение выше отрисовывает три построения в одном размере.

Создайте внутреннюю обводку с обрезкой

Поместите замкнутый контур в <defs>. Используйте его повторно один раз как заливку и один раз как область обрезки. Нарисуйте вторую копию с удвоенной нужной шириной обводки, затем ограничьте эту обводку внутренней областью контура. Обрезка делает все снаружи фигуры невидимым; она не удаляет скрытую половину обводки. См. справку MDN по clipPath и наше руководство по координатам clipPath, если импортированная область обрезки смещается относительно графики.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <clipPath id="badge-inside">
      <use href="#badge"/>
    </clipPath>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    clip-path="url(#badge-inside)"/>
</svg>

Здесь обводка шириной 24 единицы обычно достигает 12 единиц по обе стороны контура. Обрезка убирает ее наружную половину, оставляя внутри видимую полосу 12 единиц. Поместите заливку под обрезанной обводкой, как в примере, если хотите сохранить видимость всей внутренней полосы. Для составных контуров с отверстиями проверьте правила заливки и обрезки, прежде чем предполагать, какая сторона внутренняя.

Создайте внешнюю обводку с маской

Внешней полосе нужна обратная область видимости. Маска ниже белая по области документа и черная внутри значка. Она применяется только к копии обводки, а копия без маски дает заливку. Явно заданная область маски оставляет место для обводки за исходной фигурой.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <mask id="badge-outside" mask-type="luminance"
      maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"
      x="80" y="20" width="240" height="260">
      <rect x="80" y="20" width="240" height="260" fill="white"/>
      <use href="#badge" fill="black"/>
    </mask>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    mask="url(#badge-outside)"/>
</svg>

Снова остается только половина центрированной обводки шириной 24 единицы, поэтому видимая внешняя полоса имеет ширину 12 единиц. Задавайте область маски намеренно: MDN описывает, как maskUnits, maskContentUnits и размеры области влияют на маску. Белый прямоугольник должен покрывать всю внешнюю обводку. Слишком маленькая маска может обрезать именно тот край, который вы хотели сохранить.

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

Проверьте SVG после импорта

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

1. Откройте SVG самостоятельно, затем поместите его в нужный редактор или производственное приложение. Сравните внутренние и наружные края при одном масштабе.
2. Проверьте viewBox или монтажную область вокруг внешней версии. Оставьте место для наружной полосы 12 единиц и соединений на острых углах.
3. Проверьте список объектов. Примеры содержат повторно используемые контуры, обрезку или маску и редактируемую обводку. Они не создают один сплошной контур обводки.
4. Если получателю нужна геометрия с заливкой, преобразуйте выбранную обводку в копии для передачи и проверьте полученные фигуры. Сохраните исходник с редактируемой обводкой для последующего изменения ширины.

Если линия исчезает при экспорте, используйте список проверок видимости обводки, чтобы различить отсутствие окрашивания, обрезку и поддержку импорта. Если обводка неожиданно закрывает заливку, наше объяснение paint-order SVG показывает, какой слой рисуется последним.

Где нужен PerfectVector

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

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

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

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

Почему нужно удваивать ширину обводки? Обычная обводка наполовину расположена по обе стороны контура. Обрезка или маска отбрасывает одну половину. Поэтому обводка шириной 24 единицы оставляет видимую внутреннюю или внешнюю полосу 12 единиц в этих примерах.

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

Источники

1. MDN — Fills and strokes — Определяет центрированную отрисовку обводки и обсуждаемое поведение paint-order.
2. W3C SVG Working Group — SVG Strokes editor's draft — Устанавливает предлагаемые значения выравнивания и статус черновика относительно SVG 2.
3. MDN — clipPath element — Определяет ограничение видимости во внутреннем построении.
4. MDN — mask element — Определяет область маски и координатные атрибуты внешнего построения.
5. Alex Chan — Drawing inner/outer strokes in SVG — Демонстрирует подход с обводкой двойной ширины, обрезкой и маской, использованный как отправная точка нашего исходного образца значка.

Если логотип все еще растровый, создайте пробный SVG с PerfectVector, проверьте границу его контура, затем попробуйте внутреннее или внешнее построение в редакторе и проверьте передаваемый файл в целевой среде.