SVG kontūro į užpildą keitiklis

Įklijuokite bet kokį SVG su formomis, turinčiomis kontūrą, ir gaukite lygiavertį SVG, kuriame kiekvienas kontūras pakeistas užpildyta taka, turinčia tą pačią vizualinę formą ir plotį. Naudinga piktogramų sistemoms ir dizaino įrankiams, kurie patikimai atvaizduoja tik užpildus, arba SVG supaprastinimui iki tik užpildo takų prieš tolesnį vektorinį redagavimą.

Kas yra šis įrankis?

Kai kurios atvaizdavimo grandinės — tam tikri piktogramų šriftų generatoriai, kai kurie žaidimų varikliai, senesni PDF eksportuotojai ir įrankiai, kurie sudėlioja tik užpildus — netinkamai apdoroja SVG kontūrus arba jų visai neapdoroja. Kontūro pavertimas užpildyta forma to paties pločio šią problemą visiškai apeina: vizualinis rezultatas atrodo identiškas, bet jis išreikštas kaip viena užpildyta taka, o ne kontūro linija.

Šis įrankis veikia imdamas daug taškų pavyzdžių išilgai kiekvienos formos kontūro (naudodamas paties naršyklės takos ilgio API, tą patį mechanizmą, kurį naudoja SVG animacija), ir sukuria dvi lygiagrečias poslinkio linijas per pusę kontūro pločio kiekvienoje pusėje, tada uždaro jas į vieną užpildytą daugiakampį.

Kodėl jį naudoti?

Veikia su path, line, polyline, polygon, rect, circle ir ellipse elementais — ne tik su <path> — naudojant vieną suvienodintą pavyzdžių ėmimo metodą.
Išlaiko formos nuosavą užpildą (jei toks buvo) kaip atskirą sluoksnį po naujuoju kontūro užpildu, todėl užpildytos ir kontūru turinčios formos konvertuojamos teisingai.
Peržiūra prieš ir po vienas šalia kito, kad galėtumėte vizualiai patvirtinti konvertavimą prieš kopijuodami rezultatą.
Veikia visiškai jūsų naršyklėje — įklijuotas SVG niekada niekur neįkeliamas.
Nemokamas, akimirksniu, be failo dydžio apribojimų, išskyrus tai, ką jūsų naršyklė gali atvaizduoti.

Kaip naudoti

Įklijuokite savo SVG kodą į teksto lauką (veikiantis pavyzdys jau iš anksto įrašytas).
Spustelėkite "Convert strokes to fills".
Palyginkite prieš/po peržiūrą, kad patvirtintumėte, jog rezultatas atrodo teisingai.
Spustelėkite "Copy SVG", kad nukopijuotumėte konvertuotą, kontūro neturintį kodą.

Pavyzdys

Įvestis

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

Išvestis

Vienas <path fill="#3B82F6">, kurio kontūras seka abi originalios kreivės puses, nutolusias 12 vienetų, be jokio stroke atributo.

Kreivės forma išsaugoma, nes įrankis nuolat ima taškų pavyzdžius išilgai faktiškai atvaizduotos takos, o ne tik jos valdymo taškų.

Dažniausiai užduodami klausimai

Kodėl aštrūs kampai išeina suapvalinti, o ne smailūs (mitred)?

Tai žinomas, tyčinis pavyzdžių ėmimo metodo supaprastinimas: tankus taškų ėmimas išilgai takos natūraliai sukuria suapvalintas jungtis ir galus, nepriklausomai nuo originalios stroke-linejoin arba stroke-linecap reikšmės. Tiksliai atkurti mitre ar bevel jungtis reikalauja kitokio, sudėtingesnio algoritmo (linijos segmentų susikirtimas kiekvienoje viršūnėje), kurio šis įrankis neįgyvendina. Daugumai piktogramų ir iliustracijų naudojimo atvejų vizualinis skirtumas yra nedidelis, tačiau jei jums reikia tikslių mitre jungčių, specializuoto vektorinio redaktoriaus „outline stroke“ funkcija bus tikslesnė.

Ar tai apdoroja punktyrinius kontūrus (stroke-dasharray)?

Ne — įrankis kiekvieną kontūrą laiko vientisu ir ignoruoja stroke-dasharray/stroke-dashoffset. Punktyrinis kontūras bus konvertuotas taip, tarsi jis būtų vientisas, o tai pakeičia jo išvaizdą. Jei jūsų SVG naudoja punktyrinius kontūrus, šis įrankis netinka toms konkrečioms formoms.

Kodėl niekas nebuvo konvertuota?

Įrankis konvertuoja tik elementus, turinčius ir kontūro spalvą (ne „none“), ir teigiamą stroke-width, nustatytus kaip atributus arba paties elemento stiliuje. Jei jūsų SVG nustato kontūrą per išorinę CSS klasę, kurios naršyklė negali išspręsti šio įrankio izoliuotoje peržiūroje, arba per <style> bloką, nurodantį klases, apskaičiuotas stilius gali būti neteisingai išspręstas — vietoj to pabandykite nustatyti stroke ir stroke-width kaip tiesioginius atributus formoje.

Kada turėčiau konvertuoti kontūrus į užpildus, o kada juos palikti?

Jei vis dar kuriate dizainą, palikite kontūrus — stroke-width lieka redaguojamas kaip vienas skaičius, kurį prarandate po konvertavimo. Jei eksportuojate į grandinę, kuri netinkamai apdoroja kontūrus (piktogramų šriftų generatoriai, tam tikri žaidimų varikliai ar PDF eksportuotojai), konvertuokite kaip paskutinį eksportavimo žingsnį ir išsaugokite originalų kontūrinį failą kaip redaguojamą šaltinį, nes konvertavimas yra vienpusis.

Ar konvertavimas padidina SVG failą?

Paprastai taip — keliais valdymo taškais apibrėžta kontūrinė kreivė virsta užpildytu kontūru, sudarytu iš šimtų pavyzdžiais paimtų linijos segmentų, todėl takos duomenys ženkliai išauga. Piktogramoms tai praktiškai retai turi reikšmės, bet jei dydis kelia susirūpinimą, po to praleiskite konvertuotą rezultatą per SVG optimizatorių, kad sumažintumėte koordinačių tikslumą.

Ar stroke-opacity perkeliamas į konvertuotą užpildą?

Ne — konvertuota taka perima kontūro spalvą kaip savo užpildą, tačiau visišku nepermatomumu; originalios formos stroke-opacity reikšmė atmetama. Jei jums reikia išsaugoti skaidrumą, po rezultato kopijavimo rankiniu būdu pridėkite fill-opacity su ta pačia reikšme prie konvertuotos takos.