Pretvornik SVG obrisa v polnilo

Prilepite kateri koli SVG, ki vsebuje oblike z obrisom, in dobite nazaj enakovreden SVG, kjer je vsak obris nadomeščen z napolnjeno potjo enake vizualne oblike in širine. Uporabno za ikonske sisteme in orodja za oblikovanje, ki zanesljivo izrisujejo samo polnila, ali za poenostavitev SVG-ja na poti samo s polnilom pred nadaljnjim vektorskim urejanjem.

Kaj je to orodje?

Nekateri cevovodi za izrisovanje — določeni generatorji ikonskih pisav, nekateri igralni pogoni, starejši izvozniki PDF in orodja, ki sestavljajo samo polnila — ne obravnavajo SVG obrisov pravilno ali sploh ne. Pretvorba obrisa v napolnjeno obliko enake širine se temu popolnoma izogne: vizualni rezultat je videti identičen, vendar je izražen kot ena sama napolnjena pot namesto črte z obrisom.

To orodje deluje tako, da vzorči veliko točk vzdolž obrisa vsake oblike (z uporabo lastnega API-ja brskalnika za dolžino poti, istega mehanizma, ki ga uporablja SVG animacija), in zgradi dve vzporedni odmaknjeni črti na polovici širine obrisa na vsaki strani, nato ju zapre v en napolnjen mnogokotnik.

Zakaj ga uporabiti?

Deluje z elementi path, line, polyline, polygon, rect, circle in ellipse — ne le z <path> — z uporabo ene enotne metode vzorčenja.
Ohrani lastno polnilo oblike (če ga je imela) kot ločeno plast pod novim polnilom obrisa, tako da se napolnjene in obrisane oblike pravilno pretvorijo.
Predogled pred/po drug ob drugem, tako da lahko vizualno potrdite pretvorbo, preden kopirate rezultat.
Deluje popolnoma v vašem brskalniku — SVG, ki ga prilepite, nikoli ni naložen nikamor.
Brezplačno, takojšnje, brez omejitve velikosti datoteke, razen tega, kar lahko vaš brskalnik izriše.

Kako ga uporabljati

Prilepite svojo SVG kodo v besedilno polje (delujoč primer je vnaprej izpolnjen).
Kliknite "Convert strokes to fills".
Primerjajte predogled pred/po, da potrdite, da je rezultat videti pravilno.
Kliknite "Copy SVG", da kopirate pretvorjeno kodo brez obrisa.

Primer

Vnos

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

Rezultat

En sam <path fill="#3B82F6">, katerega obris sledi obema stranema izvirne krivulje, 12 enot narazen, brez kakršnega koli atributa stroke.

Oblika krivulje je ohranjena, ker orodje neprekinjeno vzorči točke vzdolž dejansko izrisane poti, ne le njenih kontrolnih točk.

Pogosta vprašanja

Zakaj ostri koti postanejo zaobljeni namesto koničasti (mitred)?

To je znana, namerna poenostavitev pristopa vzorčenja: gosto vzorčenje točk vzdolž poti naravno ustvari zaobljene spoje in konce, ne glede na izvirno vrednost stroke-linejoin ali stroke-linecap. Rekonstrukcija natančnih mitre ali bevel spojev zahteva drugačen, bolj zapleten algoritem (presečišče linijskih segmentov na vsakem oglišču), ki ga to orodje ne implementira. Za večino primerov uporabe ikon in ilustracij je vizualna razlika majhna, vendar če potrebujete natančne mitre spoje, bo funkcija "outline stroke" namenskega vektorskega urejevalnika natančnejša.

Ali to obravnava črtkane obrise (stroke-dasharray)?

Ne — orodje obravnava vsak obris kot poln in ignorira stroke-dasharray/stroke-dashoffset. Črtkan obris bo pretvorjen, kot da bi bil poln, kar spremeni njegov videz. Če vaš SVG uporablja črtkane obrise, to orodje ni primerno za te specifične oblike.

Zakaj se ni nič pretvorilo?

Orodje pretvori samo elemente, ki imajo tako barvo obrisa (ne "none") kot pozitiven stroke-width, nastavljen bodisi kot atributa bodisi v lastnem slogu elementa. Če vaš SVG nastavi obris prek zunanjega razreda CSS, ki ga brskalnik ne more razrešiti znotraj izoliranega predogleda tega orodja, ali prek bloka <style>, ki se sklicuje na razrede, se izračunani slog morda ne bo pravilno razrešil — namesto tega poskusite nastaviti stroke in stroke-width kot neposredna atributa na obliki.

Kdaj naj pretvorim obrise v polnila in kdaj naj obdržim obrise?

Če še oblikujete, obdržite obrise — stroke-width ostane urejljiv kot eno samo število, kar po pretvorbi izgubite. Če izvažate v cevovod, ki obrise napačno obravnava (generatorji ikonskih pisav, določeni igralni pogoni ali izvozniki PDF), pretvorite kot zadnji korak izvoza in obdržite izvirno datoteko z obrisom kot svoj urejljiv vir, saj je pretvorba enosmerna.

Ali pretvorba poveča datoteko SVG?

Običajno da — obrisana krivulja, definirana z nekaj kontrolnimi točkami, postane napolnjen obris, sestavljen iz stotin vzorčenih linijskih segmentov, zato se podatki poti znatno povečajo. Pri ikonah to v praksi redko šteje, vendar če je velikost pomislek, pozneje zaženite pretvorjen izhod skozi optimizator SVG, da zmanjšate natančnost koordinat.

Ali se stroke-opacity prenese na pretvorjeno polnilo?

Ne — pretvorjena pot prevzame barvo obrisa kot svoje polnilo, vendar s polno neprozornostjo; vrednost stroke-opacity na izvirni obliki je opuščena. Če morate ohraniti prosojnost, po kopiranju izhoda ročno dodajte fill-opacity z enako vrednostjo pretvorjeni poti.