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