SVG-viivan muunnin täytöksi

Liitä mikä tahansa reunaviivallisia muotoja sisältävä SVG ja saat takaisin vastaavan SVG:n, jossa jokainen viiva on korvattu samanmuotoisella ja -levyisellä täytetyllä polulla. Hyödyllinen kuvakejärjestelmissä ja suunnittelutyökaluissa, jotka renderöivät luotettavasti vain täyttöjä, tai SVG:n pelkistämiseen pelkiksi täyttöpoluiksi ennen jatkovektorimuokkausta.

Mikä tämä työkalu on?

Jotkin renderöintiketjut — tietyt kuvakefonttigeneraattorit, jotkin pelimoottorit, vanhemmat PDF-viejät ja työkalut, jotka koostavat vain täyttöjä — eivät käsittele SVG-viivoja oikein tai lainkaan. Viivan muuntaminen samanlevyiseksi täytetyksi muodoksi kiertää tämän kokonaan: visuaalinen tulos näyttää identtiseltä, mutta se ilmaistaan yhtenä täytettynä polkuna reunaviivallisen viivan sijaan.

Tämä työkalu toimii ottamalla näytteitä monista pisteistä kunkin muodon ääriviivaa pitkin (käyttäen selaimen omaa polun pituuden API:a, samaa mekanismia jota SVG-animaatio käyttää) ja rakentaa kaksi rinnakkaista siirrettyä viivaa puolen viivanleveyden päähän kummallekin puolelle, sulkien ne sitten yhdeksi täytetyksi monikulmioksi.

Miksi käyttää sitä?

Toimii path-, line-, polyline-, polygon-, rect-, circle- ja ellipse-elementeillä — ei vain <path>:lla — yhtä yhtenäistä näytteenottomenetelmää käyttäen.
Säilyttää muodon oman täytön (jos sillä oli sellainen) erillisenä tasona uuden viivatäytön alla, joten täytetyt ja reunaviivalliset muodot muuntuvat oikein.
Rinnakkainen ennen/jälkeen-esikatselu, jotta voit visuaalisesti vahvistaa muunnoksen ennen tuloksen kopiointia.
Toimii kokonaan selaimessasi — liittämääsi SVG:tä ei koskaan ladata mihinkään.
Ilmainen, välitön, ei tiedostokokorajoitusta muuta kuin sen, mitä selaimesi pystyy renderöimään.

Käyttöohje

Liitä SVG-koodisi tekstikenttään (toimiva esimerkki on esitäytetty).
Napsauta "Convert strokes to fills".
Vertaa ennen/jälkeen-esikatselua varmistaaksesi, että tulos näyttää oikealta.
Napsauta "Copy SVG" kopioidaksesi muunnetun, viivattoman koodin.

Esimerkki

Syöte

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

Tuloste

Yksi <path fill="#3B82F6">, jonka ääriviiva seuraa alkuperäisen käyrän molempia puolia 12 yksikön etäisyydeltä, ilman lainkaan stroke-attribuuttia.

Käyrän muoto säilyy, koska työkalu ottaa näytteitä jatkuvasti pitkin todellista renderöityä polkua, ei vain sen ohjauspisteitä.

Usein kysytyt kysymykset

Miksi terävät kulmat tulevat pyöristettyinä eivätkä terävinä (jiiratut)?

Tämä on tunnettu, tarkoituksellinen näytteenottomenetelmän yksinkertaistus: tiheä pisteiden näytteenotto polkua pitkin tuottaa luonnostaan pyöristettyjä liitoksia ja päätyjä riippumatta alkuperäisestä stroke-linejoin- tai stroke-linecap-arvosta. Tarkkojen jiiri- tai viistoliitosten rekonstruointi vaatii erilaisen, monimutkaisemman algoritmin (viivasegmenttien leikkaus jokaisessa kärjessä), jota tämä työkalu ei toteuta. Useimmissa kuvake- ja kuvituskäyttötapauksissa visuaalinen ero on vähäinen, mutta jos tarvitset tarkkoja jiiriliitoksia, erikoistuneen vektorieditorin "outline stroke" -toiminto on tarkempi.

Käsitteleekö tämä katkoviivoja (stroke-dasharray)?

Ei — työkalu käsittelee jokaisen viivan yhtenäisenä ja jättää huomiotta stroke-dasharray/stroke-dashoffset-määritykset. Katkoviiva muunnetaan ikään kuin se olisi yhtenäinen, mikä muuttaa sen ulkonäköä. Jos SVG:ssäsi käytetään katkoviivoja, tämä työkalu ei sovi näille tietyille muodoille.

Miksi mitään ei muunnettu?

Työkalu muuntaa vain elementtejä, joilla on sekä viivan väri (ei "none") että positiivinen stroke-width, määritettynä joko attribuutteina tai elementin omassa tyylissä. Jos SVG:si määrittää viivan ulkoisen CSS-luokan kautta, jota selain ei pysty ratkaisemaan tämän työkalun eristetyssä esikatselussa, tai <style>-lohkon kautta, joka viittaa luokkiin, laskettu tyyli ei ehkä ratkea oikein — kokeile sen sijaan asettaa stroke ja stroke-width suoraan muodon attribuutteina.

Milloin minun pitäisi muuntaa viivat täytöiksi ja milloin säilyttää viivat?

Jos vielä suunnittelet, säilytä viivat — stroke-width pysyy muokattavana yhtenä lukuna, jonka menetät muunnoksen jälkeen. Jos viet tiedostot putkeen, joka käsittelee viivat väärin (kuvakefonttigeneraattorit, tietyt pelimoottorit tai PDF-viejät), muunna viimeisenä vientivaiheena ja säilytä alkuperäinen reunaviivallinen tiedosto muokattavana lähteenäsi, sillä muunnos on yksisuuntainen.

Tekeekö muunnos SVG-tiedostosta suuremman?

Yleensä kyllä — muutamalla ohjauspisteellä määritelty reunaviivallinen käyrä muuttuu satoja näytteistettyjä viivasegmenttejä sisältäväksi täytetyksi ääriviivaksi, joten polkutiedot kasvavat huomattavasti. Kuvakkeissa tällä on harvoin käytännön merkitystä, mutta jos koko on huolenaihe, aja muunnettu tulos SVG-optimoijan läpi jälkikäteen koordinaattitarkkuuden pienentämiseksi.

Siirtyykö stroke-opacity muunnettuun täyttöön?

Ei — muunnettu polku ottaa viivan värin täytökseen, mutta täydellä peittävyydellä; alkuperäisen muodon stroke-opacity-arvo hylätään. Jos tarvitset läpinäkyvyyden säilyttämistä, lisää fill-opacity samalla arvolla muunnettuun polkuun manuaalisesti tuloksen kopioinnin jälkeen.