Převodník obrysu SVG na výplň

Vložte libovolné SVG obsahující tvary s obrysem a získejte zpět ekvivalentní SVG, kde je každý obrys nahrazen vyplněnou cestou se stejným vizuálním tvarem a šířkou. Užitečné pro systémy ikon a designové nástroje, které spolehlivě vykreslují pouze výplně, nebo pro redukci SVG na cesty pouze s výplní před dalším vektorovým úpravami.

Co je tento nástroj?

Některé vykreslovací procesy — určité generátory ikonových fontů, některé herní enginy, starší exportéry PDF a nástroje, které skládají pouze výplně — nezpracovávají obrysy SVG správně, nebo vůbec. Převod obrysu na vyplněný tvar stejné šířky tento problém zcela obchází: vizuální výsledek vypadá identicky, ale je vyjádřen jako jedna vyplněná cesta místo obrysované čáry.

Tento nástroj funguje tak, že vzorkuje mnoho bodů podél obrysu každého tvaru (pomocí vlastního API pro délku cesty prohlížeče, stejného mechanismu, jaký používá animace SVG) a vytváří dvě rovnoběžné odsazené čáry ve vzdálenosti poloviny šířky obrysu na každé straně, které pak uzavře do jednoho vyplněného mnohoúhelníku.

Proč ho používat?

Funguje na prvcích path, line, polyline, polygon, rect, circle a ellipse — nejen na <path> — pomocí jedné jednotné metody vzorkování.
Zachovává vlastní výplň tvaru (pokud nějakou měl) jako samostatnou vrstvu pod novou obrysovou výplní, takže vyplněné a zároveň obrysované tvary se převádějí správně.
Náhled před/po vedle sebe, takže si můžete výsledek převodu vizuálně ověřit před zkopírováním.
Běží zcela ve vašem prohlížeči — vložené SVG se nikam neodesílá.
Zdarma, okamžité, bez omezení velikosti souboru kromě toho, co dokáže vykreslit váš prohlížeč.

Jak se používá

Vložte kód SVG do textového pole (funkční příklad je předvyplněn).
Klikněte na „Convert strokes to fills“.
Porovnejte náhled před/po a ověřte, že výsledek vypadá správně.
Klikněte na „Copy SVG“ a zkopírujte převedený kód bez obrysů.

Příklad

Vstup

<path d="M20 100 Q100 20 180 100" fill="none" stroke="#3B82F6" stroke-width="12"/>

Výstup

Jediný prvek <path fill="#3B82F6">, jehož obrys sleduje obě strany původní křivky ve vzdálenosti 12 jednotek, zcela bez atributu stroke.

Tvar křivky je zachován, protože nástroj vzorkuje body souvisle podél skutečně vykreslené cesty, nikoli jen podél jejích řídicích bodů.

Časté dotazy

Proč jsou ostré rohy zaoblené místo špičatých (seříznutých)?

Jedná se o známé, záměrné zjednodušení metody vzorkování: husté vzorkování bodů podél cesty přirozeně vytváří zaoblená spojení a zakončení bez ohledu na původní hodnotu stroke-linejoin nebo stroke-linecap. Rekonstrukce přesných seříznutých nebo zkosených spojů vyžaduje jiný, složitější algoritmus (průsečík úseček v každém vrcholu), který tento nástroj neimplementuje. Pro většinu ikon a ilustrací je vizuální rozdíl minimální, ale pokud potřebujete přesná seříznutá spojení, funkce „outline stroke“ specializovaného vektorového editoru bude přesnější.

Zvládá nástroj čárkované obrysy (stroke-dasharray)?

Ne — nástroj zachází s každým obrysem jako s plným a ignoruje stroke-dasharray/stroke-dashoffset. Čárkovaný obrys bude převeden, jako by byl plný, což změní jeho vzhled. Pokud vaše SVG používá čárkované obrysy, tento nástroj není pro tyto konkrétní tvary vhodný.

Proč se nic nepřevedlo?

Nástroj převádí pouze prvky, které mají zároveň barvu obrysu (jinou než „none“) a kladnou hodnotu stroke-width, nastavenou buď jako atributy, nebo ve vlastním stylu prvku. Pokud vaše SVG nastavuje obrys pomocí externí třídy CSS, kterou prohlížeč nemůže v izolovaném náhledu tohoto nástroje vyřešit, nebo pomocí bloku <style> odkazujícího na třídy, vypočítaný styl se nemusí správně vyřešit — zkuste místo toho nastavit stroke a stroke-width přímo jako atributy tvaru.

Kdy bych měl obrysy převádět na výplně a kdy je zachovat?

Pokud stále navrhujete, obrysy zachovejte — stroke-width zůstává editovatelný jako jedno číslo, což po převodu ztratíte. Pokud exportujete do procesu, který obrysy zpracovává nesprávně (generátory ikonových fontů, některé herní enginy nebo exportéry PDF), převádějte jako poslední krok exportu a ponechte si původní obrysovaný soubor jako editovatelný zdroj, protože převod je jednosměrný.

Zvětší převod soubor SVG?

Obvykle ano — jedna obrysovaná křivka definovaná několika řídicími body se stane vyplněným obrysem tvořeným stovkami vzorkovaných úseček, takže data cesty výrazně narostou. U ikon to v praxi zřídkakdy vadí, ale pokud vás velikost trápí, spusťte převedený výstup následně přes optimalizátor SVG, abyste omezili přesnost souřadnic.

Přenáší se stroke-opacity do převedené výplně?

Ne — převedená cesta přebírá barvu obrysu jako svou výplň, ale s plnou neprůhledností; hodnota stroke-opacity u původního tvaru se zahodí. Pokud potřebujete zachovat průhlednost, přidejte po zkopírování výstupu ručně do převedené cesty fill-opacity se stejnou hodnotou.