CodeKitHubŠta je ovaj alat?
Неки цевоводи за рендеровање — одређени генератори фонтова икона, неки гејм енџини, старији PDF извозници и алати који састављају само попуне — не обрађују SVG контуре исправно или уопште. Претварање контуре у попуњен облик исте ширине то потпуно заобилази: визуелни резултат изгледа идентично, али је изражен као једна попуњена путања уместо линије са контуром.
Овај алат ради тако што узоркује много тачака дуж контуре сваког облика (користећи сопствени API прегледача за дужину путање, исти механизам који користи SVG анимација) и гради две паралелне померене линије на пола ширине контуре са сваке стране, а затим их затвара у један попуњен полигон.
Zašto ga koristiti?
- Ради са елементима path, line, polyline, polygon, rect, circle и ellipse — не само са <path> — користећи једну јединствену методу узорковања.
- Задржава сопствену попуну облика (ако ју је имао) као засебан слој испод нове попуне контуре, тако да се попуњени и оконтурени облици исправно конвертују.
- Приказ пре/после један поред другог, тако да можете визуелно потврдити конверзију пре копирања резултата.
- Ради у потпуности у вашем прегледачу — SVG који налепите никада се нигде не отпрема.
- Бесплатно, тренутно, без ограничења величине датотеке осим онога што ваш прегледач може да рендерује.
Kako se koristi
- Налепите свој SVG код у текстуално поље (радни пример је унапред попуњен).
- Кликните на "Convert strokes to fills".
- Упоредите приказ пре/после да потврдите да резултат изгледа исправно.
- Кликните на "Copy SVG" да копирате конвертовани код без контуре.
Primer
Unos
<path d="M20 100 Q100 20 180 100" fill="none" stroke="#3B82F6" stroke-width="12"/>Rezultat
Један <path fill="#3B82F6"> чија контура прати обе стране оригиналне криве, на растојању од 12 јединица, без икаквог stroke атрибута.Облик криве је сачуван јер алат непрекидно узоркује тачке дуж стварно рендероване путање, а не само њене контролне тачке.
Često postavljana pitanja
Зашто оштри углови испадну заобљени уместо шиљатих (митровани)?
Ово је познато, намерно поједностављење приступа узорковања: густо узорковање тачака дуж путање природно производи заобљене спојеве и крајеве, без обзира на оригиналну вредност 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 са истом вредношћу конвертованој путањи након копирања резултата.