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. Відтворення точних з'єднань mitre чи bevel вимагає іншого, складнішого алгоритму (перетин відрізків лінії в кожній вершині), який цей інструмент не реалізує. Для більшості випадків використання іконок та ілюстрацій візуальна різниця незначна, але якщо вам потрібні точні з'єднання mitre, функція «outline stroke» спеціалізованого векторного редактора буде точнішою.
Чи обробляє це пунктирні контури (stroke-dasharray)?
Ні — інструмент трактує кожен контур як суцільний та ігнорує stroke-dasharray/stroke-dashoffset. Пунктирний контур буде перетворено так, ніби він суцільний, що змінює його вигляд. Якщо ваш SVG використовує пунктирні контури, цей інструмент не підходить для цих конкретних фігур.
Чому нічого не перетворилося?
Інструмент перетворює лише елементи, які мають одночасно колір контуру (не «none») і додатний stroke-width, встановлені або як атрибути, або у власному стилі елемента. Якщо ваш SVG задає контур через зовнішній клас CSS, який браузер не може розпізнати всередині ізольованого попереднього перегляду цього інструмента, або через блок <style>, що посилається на класи, обчислений стиль може розпізнатися неправильно — спробуйте натомість задати stroke і stroke-width як прямі атрибути на фігурі.
Коли варто перетворювати контури на заливки, а коли залишати контури?
Якщо ви ще проєктуєте, залиште контури — stroke-width залишається редагованим як одне число, яке ви втратите після перетворення. Якщо ви експортуєте до конвеєра, який неправильно обробляє контури (генератори іконних шрифтів, певні ігрові рушії або експортери PDF), перетворюйте як фінальний крок експорту і зберігайте оригінальний файл з контуром як редагований вихідник, оскільки перетворення односпрямоване.
Чи робить перетворення файл SVG більшим?
Зазвичай так — крива з контуром, визначена кількома контрольними точками, стає заповненим контуром, що складається із сотень вибраних відрізків лінії, тому дані шляху суттєво зростають. Для іконок це на практиці рідко має значення, але якщо розмір є проблемою, пропустіть перетворений результат через оптимізатор SVG згодом, щоб зменшити точність координат.
Чи переноситься stroke-opacity на перетворену заливку?
Ні — перетворений шлях бере колір контуру як свою заливку, але з повною непрозорістю; значення stroke-opacity на оригінальній фігурі відкидається. Якщо вам потрібно зберегти прозорість, вручну додайте fill-opacity з тим самим значенням до перетвореного шляху після копіювання результату.