Острые выступы SVG: исправьте углы без обрезки

Игольчатый выступ на обводке SVG обычно возникает из-за соединения miter на остром углу. Если выступ не нужен, уменьшите stroke-miterlimit или выберите соединение bevel либо round. Если острие — часть дизайна, но его кончик исчезает, оставьте больше места для закрашенной обводки внутри viewBox. Это разные исправления: одно меняет форму угла, другое — то, что файл может показать.

При проверке сохраняйте копию исходного SVG. У логотипа с намеренным острым кончиком может понадобиться сохранить miter, а случайный выступ на импортированной обводке может требовать более плоского соединения. Сначала решите, какой угол должен сохраниться.

Почему узкий угол образует выступ

Обводка имеет ширину по обе стороны центральной линии контура. При stroke-linejoin="miter" внешние края обводки продолжаются до пересечения. Чем острее поворот, тем дальше может находиться точка пересечения. Согласно определению оформления SVG 2, SVG использует miter как исходный стиль соединения, а исходный stroke-miterlimit равен 4.

Предел — это отношение, а не расстояние в пикселях или единицах SVG. Если длина miter, деленная на stroke-width, превышает предел, обычное соединение miter становится bevel. Больший предел разрешает более длинное острие; меньший делает больше острых углов плоскими. Справочник miter-limit MDN показывает связь с углом и отмечает, что свойство CSS может переопределить атрибут представления SVG.

Один контур, четыре видимых результата

Для теста мы нарисовали один открытый угловой сегмент эмблемы с d="M130 520 L180 200 L230 520" и обводкой 26 единиц. Первые две панели используют предел miter 10. Вторая применяет тесную видимую границу на y=170, обрезающую кончик. Третья использует предел 4, поэтому угол становится bevel. Четвертая использует round. Это контролируемая иллюстрация данного контура и рендерера, а не обещание одинаковой формы угла у любого импортированного SVG.

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

Это выступ, скос или обрезанное острие?

Обрезанный кончик сначала может напоминать намеренный скос. Увеличьте масштаб и проверьте, совпадает ли его конец с границей файла. Диагностика исчезающих обводок SVG описывает другие причины оформления и обрезки; этот тест изолирует угол miter.

Исправьте угол, не меняя лишнего

1. Найдите контур и фактическое соединение

Выберите угол в векторном редакторе или найдите в тексте SVG stroke, stroke-width, stroke-linejoin и stroke-miterlimit. Проверьте родительские группы и правила CSS вместе с собственными атрибутами контура. Свойство stroke-miterlimit во встроенном стиле или таблице стилей может иметь приоритет над одноименным атрибутом представления элемента, как описано в MDN.

Если выбранный объект — контур с заливкой вместо редактируемой обводки, прекратите менять настройки miter. Нужно изменить контур заливки или вернуться к оригиналу с непреобразованной обводкой. Если весь импорт имеет неверный размер, выполните проверку импорта SVG с известным размером, прежде чем компенсировать его изменением ширины обводки.

2. Измените одну настройку соединения на копии

Сначала попробуйте bevel, если допустим механический плоский угол. Попробуйте round, если дизайн допускает смягченный край. Сохраните miter, когда точное острие — часть знака, и выберите предел, сохраняющий только нужные острия. Справочник SVG stroke-linejoin определяет различия распространенных форм соединений.

Вот небольшая тестовая копия использованного выше контура:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 590">
  <path d="M130 520 L180 200 L230 520"
    fill="none" stroke="#0d7991" stroke-width="26"
    stroke-linejoin="miter" stroke-miterlimit="10" />
</svg>

Измените stroke-miterlimit на 4, чтобы увидеть переход в bevel для этого конкретного угла. Затем верните 10 и переключите stroke-linejoin на round или bevel. Для этих двух стилей значение stroke-miterlimit несущественно. Не уменьшайте его во всем логотипе только из-за одного проблемного угла: другие острия могут быть намеренными.

3. Дайте нужному острию достаточно холста

Если miter правильный, но исчезает у края, увеличьте или переместите viewBox вокруг закрашенного результата, а не только координат контура. Определение систем координат SVG 2 объясняет видимый прямоугольник; обводка может выходить за координаты центрального контура. Проверьте также вложенные области просмотра SVG и контуры обрезки. Родительская обрезка может продолжать срезать острие даже после расширения корневого viewBox.

Больший холст не лечит случайную иглу: он лишь показывает ее большую часть. И наоборот, изменение соединения на bevel ради тесной монтажной области может стереть задуманный угол. Сравните передаваемый файл с исходным знаком в реальном размере отображения или печати. Если подрядчик измеряет физический размер SVG, сохраните нужные ширину и высоту, осознанно меняя отображение viewBox.

4. Снова откройте передаваемый файл

Проверьте результат в браузере и целевом редакторе или производственном приложении. Осмотрите острие при 100% и в предполагаемом конечном размере. Если нужны залитые контуры вместо редактируемых обводок, сохраните исходный оригинал, преобразуйте обводку в контур на копии для передачи в редакторе и проверьте новую границу контура с заливкой. Такое преобразование меняет геометрию; это не обратимая настройка miter. Для более широкой проверки заливок и обводок см. руководство по paint-order SVG.

Когда растровому логотипу сначала нужен новый контур

Настройки miter работают только с редактируемой векторной обводкой. Если сохранился только PNG или JPG логотипа, процесс векторизации логотипов PerfectVector может создать вариант SVG перед редактированием углов. Сравните восстановленный силуэт, маленькие зазоры и структуру контуров с исходником. Трассировка может представить толстую растровую линию как контур с заливкой, а не исходную редактируемую центральную линию, поэтому не ожидайте автоматического исправления через stroke-miterlimit. Перерисуйте критическое геометрическое острие, если оно должно точно соответствовать фирменному оригиналу.

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

Итоговая проверка угла

1. Сохраните нетронутый векторный оригинал.
2. Определите, является ли угол редактируемой обводкой или залитым контуром.
3. Сравните miter, bevel и round на одном затронутом контуре.
4. При сохранении miter проверьте предел и оставьте достаточно видимого места для всего закрашенного кончика.
5. Снова откройте SVG в реальном целевом приложении и проверьте в конечном размере.

FAQ

Почему у SVG появляются выступы на острых углах? Соединение miter продолжает внешние края обводки до пересечения. При остром угле точка пересечения может быть далеко от центрального контура. Уменьшите предел miter или используйте bevel либо round, если острие не задумано.

Почему уменьшение stroke-miterlimit делает угол плоским? Когда отношение длины miter к ширине обводки превышает предел, обычное соединение miter переходит в bevel. Меньшие значения вызывают такой переход у большего числа углов. Сохраните больший предел, если острие намеренное, затем проверьте границы.

Почему острие SVG все еще обрезается после увеличения предела miter? Больший предел может удлинить острие, а viewBox или обрезка продолжает его срезать. Расширьте видимую область вокруг закрашенной обводки или переместите знак, затем снова откройте передаваемый SVG в целевом приложении.

Sources

1. W3C — SVG 2 Painting — Определяет соединения обводок, исходные значения и переход miter в другой стиль.
2. MDN — stroke-miterlimit — Объясняет отношение предела и связь с острыми углами.
3. MDN — stroke-linejoin — Определяет распространенные формы углов обводки.
4. MDN — CSS stroke-miterlimit — Описывает приоритет свойства CSS над атрибутом представления SVG.
5. W3C — SVG 2 Coordinate Systems — Определяет связь viewBox и области просмотра, используемую для проверки границ.

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