CodeKitHubЧто это за инструмент?
Некоторые конвейеры рендеринга — определённые генераторы иконочных шрифтов, некоторые игровые движки, более старые экспортёры PDF и инструменты, которые компонуют только заливки — некорректно обрабатывают обводки SVG или не поддерживают их вовсе. Превращение обводки в залитую фигуру той же ширины полностью решает эту проблему: визуальный результат идентичен, но выражен как единый залитый контур, а не линия с обводкой.
Инструмент работает, сэмплируя множество точек вдоль контура каждой фигуры (используя собственный API длины пути браузера — тот же механизм, что применяется в анимации SVG), и строит две параллельные смещённые линии на расстоянии половины ширины обводки с каждой стороны, а затем замыкает их в единый залитый полигон.
Зачем его использовать?
- Работает с элементами path, line, polyline, polygon, rect, circle и ellipse — не только с <path> — используя единый метод сэмплирования.
- Сохраняет собственную заливку фигуры (если она была) в виде отдельного слоя под новой заливкой обводки, поэтому фигуры, у которых есть и заливка, и обводка, конвертируются корректно.
- Предпросмотр «до/после» рядом друг с другом, чтобы визуально подтвердить результат конвертации перед копированием.
- Полностью работает в вашем браузере — вставленный SVG никуда не загружается.
- Бесплатно, мгновенно, без ограничения размера файла, кроме того, что способен отрендерить ваш браузер.
Как использовать
- Вставьте разметку SVG в текстовое поле (изначально уже заполнено рабочим примером).
- Нажмите «Convert strokes to fills».
- Сравните предпросмотр «до/после», чтобы убедиться, что результат корректен.
- Нажмите «Copy SVG», чтобы скопировать преобразованную разметку без обводок.
Пример
Ввод
<path d="M20 100 Q100 20 180 100" fill="none" stroke="#3B82F6" stroke-width="12"/>Результат
Единственный <path fill="#3B82F6">, контур которого повторяет обе стороны исходной кривой на расстоянии 12 единиц, без какого-либо атрибута stroke.Форма кривой сохраняется, потому что инструмент непрерывно сэмплирует точки вдоль фактически отрендеренного пути, а не только по опорным точкам.
Часто задаваемые вопросы
Почему острые углы становятся скруглёнными, а не заострёнными (mitered)?
Это известное и намеренное упрощение метода сэмплирования: плотная выборка точек вдоль пути естественным образом создаёт скруглённые соединения и концы линий, независимо от исходного значения stroke-linejoin или stroke-linecap. Для точного воссоздания соединений типа miter или bevel нужен другой, более сложный алгоритм (пересечение отрезков в каждой вершине), который этот инструмент не реализует. Для большинства иконок и иллюстраций визуальная разница минимальна, но если вам нужны точные соединения miter, функция «обвести обводку» в специализированном векторном редакторе даст более точный результат.
Поддерживаются ли пунктирные обводки (stroke-dasharray)?
Нет — инструмент считает любую обводку сплошной и игнорирует stroke-dasharray/stroke-dashoffset. Пунктирная обводка будет преобразована так, как будто она сплошная, что изменит её внешний вид. Если в вашем SVG используются пунктирные обводки, этот инструмент не подходит для таких фигур.
Почему ничего не конвертировалось?
Инструмент конвертирует только элементы, у которых одновременно есть цвет обводки (не «none») и положительное значение stroke-width, заданные либо как атрибуты, либо в собственном style элемента. Если ваш SVG задаёт обводку через внешний CSS-класс, который браузер не может разрешить внутри изолированного предпросмотра этого инструмента, или через блок <style> со ссылками на классы, вычисленный стиль может не разрешиться корректно — попробуйте задать stroke и stroke-width напрямую как атрибуты фигуры.
Когда стоит конвертировать обводки в заливку, а когда лучше оставить обводки?
Если вы всё ещё находитесь в процессе проектирования, оставьте обводки — stroke-width остаётся редактируемым единым числом, а после конвертации эта возможность теряется. Если вы экспортируете в конвейер, который некорректно обрабатывает обводки (генераторы иконочных шрифтов, некоторые игровые движки или экспортёры PDF), конвертируйте на финальном этапе экспорта и сохраняйте исходный файл с обводками как редактируемый источник, поскольку конвертация необратима.
Становится ли SVG-файл больше после конвертации?
Обычно да — кривая с обводкой, заданная несколькими опорными точками, превращается в залитый контур из сотен сэмплированных отрезков, поэтому данные пути заметно увеличиваются. Для иконок это на практике редко имеет значение, но если размер важен, пропустите результат конвертации через оптимизатор SVG, чтобы сократить точность координат.
Переносится ли stroke-opacity в преобразованную заливку?
Нет — преобразованный контур берёт цвет обводки как заливку, но с полной непрозрачностью; значение stroke-opacity исходной фигуры отбрасывается. Если нужно сохранить прозрачность, добавьте вручную fill-opacity с тем же значением к преобразованному контуру после копирования результата.