Konvertor SVG obrysu na výplň

Vložte akékoľvek SVG obsahujúce tvary s obrysom a získajte späť ekvivalentné SVG, v ktorom je každý obrys nahradený vyplnenou cestou rovnakého vizuálneho tvaru a šírky. Užitočné pre systémy ikon a nástroje na navrhovanie, ktoré spoľahlivo vykresľujú iba výplne, alebo na zredukovanie SVG na cesty len s výplňou pred ďalšou vektorovou úpravou.

Čo je tento nástroj?

Niektoré vykresľovacie reťazce — určité generátory ikonových fontov, niektoré herné enginy, staršie exportéry PDF a nástroje, ktoré skladajú iba výplne — nespracúvajú obrysy SVG správne alebo vôbec. Konverzia obrysu na vyplnený tvar rovnakej šírky sa tomuto úplne vyhýba: vizuálny výsledok vyzerá identicky, ale je vyjadrený ako jedna vyplnená cesta namiesto línie s obrysom.

Tento nástroj funguje tak, že vzorkuje mnoho bodov pozdĺž obrysu každého tvaru (pomocou vlastného API dĺžky cesty prehliadača, rovnakého mechanizmu, aký používa SVG animácia) a vytvára dve rovnobežné posunuté línie v polovičnej šírke obrysu na každej strane, ktoré potom uzavrie do jedného vyplneného mnohouholníka.

Prečo ho používať?

Funguje na elementoch path, line, polyline, polygon, rect, circle a ellipse — nielen na <path> — pomocou jednej jednotnej metódy vzorkovania.
Zachováva vlastnú výplň tvaru (ak ju mal) ako samostatnú vrstvu pod novou výplňou obrysu, takže vyplnené a obrysované tvary sa konvertujú správne.
Náhľad pred/po vedľa seba, aby ste mohli vizuálne potvrdiť konverziu pred kopírovaním výsledku.
Beží celý vo vašom prehliadači — SVG, ktoré vložíte, sa nikdy nikam nenahráva.
Bezplatné, okamžité, bez obmedzenia veľkosti súboru okrem toho, čo dokáže váš prehliadač vykresliť.

Ako sa používa

Vložte svoj kód SVG do textového poľa (funkčný príklad je vopred vyplnený).
Kliknite na "Convert strokes to fills".
Porovnajte náhľad pred/po, aby ste potvrdili, že výsledok vyzerá správne.
Kliknite na "Copy SVG" a skopírujte konvertovaný kód bez obrysu.

Príklad

Vstup

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

Výstup

Jeden <path fill="#3B82F6">, ktorého obrys sleduje obe strany pôvodnej krivky, vzdialené 12 jednotiek, úplne bez atribútu stroke.

Tvar krivky je zachovaný, pretože nástroj vzorkuje body nepretržite pozdĺž skutočne vykreslenej cesty, nielen jej kontrolných bodov.

Časté otázky

Prečo sú ostré rohy zaoblené namiesto ostrých (mitrovaných)?

Toto je známe, zámerné zjednodušenie prístupu vzorkovania: husté vzorkovanie bodov pozdĺž cesty prirodzene produkuje zaoblené spoje a konce, bez ohľadu na pôvodnú hodnotu stroke-linejoin alebo stroke-linecap. Rekonštrukcia presných mitrových alebo skosených spojov vyžaduje iný, zložitejší algoritmus (priesečník úsečiek v každom vrchole), ktorý tento nástroj neimplementuje. Pre väčšinu prípadov použitia ikon a ilustrácií je vizuálny rozdiel minimálny, ale ak potrebujete presné mitrové spoje, funkcia "outline stroke" v špecializovanom vektorovom editore bude presnejšia.

Spracúva toto čiarkované obrysy (stroke-dasharray)?

Nie — nástroj považuje každý obrys za plný a ignoruje stroke-dasharray/stroke-dashoffset. Čiarkovaný obrys sa skonvertuje, akoby bol plný, čo zmení jeho vzhľad. Ak vaše SVG používa čiarkované obrysy, tento nástroj nie je vhodný pre tieto konkrétne tvary.

Prečo sa nič neskonvertovalo?

Nástroj konvertuje iba elementy, ktoré majú farbu obrysu (nie "none") aj kladnú hodnotu stroke-width, nastavenú buď ako atribúty, alebo vo vlastnom štýle elementu. Ak vaše SVG nastavuje obrys pomocou externej CSS triedy, ktorú prehliadač nedokáže vyriešiť v izolovanom náhľade tohto nástroja, alebo pomocou bloku <style>, ktorý odkazuje na triedy, vypočítaný štýl sa nemusí správne vyriešiť — namiesto toho skúste nastaviť stroke a stroke-width ako priame atribúty na tvare.

Kedy by som mal konvertovať obrysy na výplne a kedy by som mal ponechať obrysy?

Ak ešte navrhujete, ponechajte obrysy — stroke-width zostáva upraviteľná ako jedno číslo, ktoré po konverzii stratíte. Ak exportujete do reťazca, ktorý nesprávne spracúva obrysy (generátory ikonových fontov, určité herné enginy alebo exportéry PDF), konvertujte ako posledný krok exportu a ponechajte pôvodný súbor s obrysom ako svoj upraviteľný zdroj, keďže konverzia je jednosmerná.

Zväčšuje konverzia súbor SVG?

Zvyčajne áno — obrysová krivka definovaná niekoľkými kontrolnými bodmi sa zmení na vyplnený obrys pozostávajúci zo stoviek vzorkovaných úsekov línie, takže dáta cesty výrazne narastú. Pri ikonách to v praxi zriedka záleží, ale ak je veľkosť problémom, spustite konvertovaný výstup následne cez optimalizátor SVG, aby ste znížili presnosť súradníc.

Prenáša sa stroke-opacity do konvertovanej výplne?

Nie — konvertovaná cesta preberá farbu obrysu ako svoju výplň, ale s plnou nepriehľadnosťou; hodnota stroke-opacity na pôvodnom tvare sa zahodí. Ak potrebujete zachovať priehľadnosť, po skopírovaní výstupu manuálne pridajte fill-opacity s rovnakou hodnotou ku konvertovanej ceste.