SVG joone teisendaja täidiseks

Kleebi mistahes joontega kujundeid sisaldav SVG ja saad tagasi samaväärse SVG, kus iga joon on asendatud sama visuaalse kuju ja laiusega täidetud rajaga. Kasulik ikoonisüsteemide ja disainitööriistade jaoks, mis renderdavad usaldusväärselt ainult täidiseid, või SVG taandamiseks ainult täidisega radadeks enne edasist vektorredigeerimist.

Mis see tööriist on?

Mõned renderdusahelad — teatud ikoonifontide generaatorid, mõned mängumootorid, vanemad PDF-eksportijad ja tööriistad, mis komponeerivad ainult täidiseid — ei käsitle SVG jooni korrektselt või üldse mitte. Joone teisendamine sama laiusega täidetud kujundiks lahendab selle probleemi täielikult: visuaalne tulemus näeb identne välja, kuid see väljendub ühe täidetud rajana, mitte joonega joonena.

See tööriist töötab, võttes proove paljudest punktidest mööda iga kujundi kontuuri (kasutades brauseri enda raja pikkuse API-t, sama mehhanismi, mida kasutab SVG animatsioon), ning ehitab kaks paralleelset nihkejoont poole joone laiuse kaugusel mõlemal küljel, seejärel sulgeb need üheks täidetud hulknurgaks.

Miks seda kasutada?

Töötab path, line, polyline, polygon, rect, circle ja ellipse elementidega — mitte ainult <path>-iga — kasutades ühte ühtset proovivõtumeetodit.
Säilitab kujundi enda täidise (kui see oli olemas) eraldi kihina uue joonetäidise all, nii et täidetud ja joontega kujundid teisendatakse korrektselt.
Kõrvuti enne/pärast eelvaade, et saaksid teisendust visuaalselt kinnitada enne tulemuse kopeerimist.
Töötab täielikult sinu brauseris — kleebitud SVG-d ei laadita kunagi kuhugi üles.
Tasuta, koheselt, ilma failisuuruse piiranguta peale selle, mida su brauser suudab renderdada.

Kuidas kasutada

Kleebi oma SVG-kood tekstikasti (töötav näide on eeltäidetud).
Klõpsa "Convert strokes to fills".
Võrdle enne/pärast eelvaadet, et kinnitada tulemuse õigsust.
Klõpsa "Copy SVG", et kopeerida teisendatud, joonteta kood.

Näide

Sisend

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

Tulemus

Üksik <path fill="#3B82F6">, mille kontuur jälgib algse kõvera mõlemat külge, 12 ühiku kaugusel, ilma stroke-atribuudita.

Kõvera kuju säilib, sest tööriist võtab proove pidevalt piki tegelikult renderdatud rada, mitte ainult selle juhtpunkte.

Korduma kippuvad küsimused

Miks teravad nurgad tulevad ümardatuna, mitte teravana (mitred)?

See on teadaolev, tahtlik proovivõtumeetodi lihtsustus: tiheda punktide proovivõtt piki rada tekitab loomulikult ümardatud liited ja otsad, sõltumata algsest stroke-linejoin või stroke-linecap väärtusest. Täpsete mitre- või faasitud liidete taastamine nõuab teistsugust, keerulisemat algoritmi (joonelõikude ristumine igal tipul), mida see tööriist ei rakenda. Enamiku ikoonide ja illustratsioonide kasutusjuhtude jaoks on visuaalne erinevus väike, kuid kui vajad täpseid mitre-liiteid, on spetsiaalse vektorredaktori "outline stroke" funktsioon täpsem.

Kas see käsitleb kriipsjooni (stroke-dasharray)?

Ei — tööriist käsitleb iga joont pideva joonena ja ignoreerib stroke-dasharray/stroke-dashoffset atribuute. Kriipsjoon teisendatakse nii, nagu oleks see pidev, mis muudab selle välimust. Kui sinu SVG kasutab kriipsjooni, ei sobi see tööriist nende konkreetsete kujundite jaoks.

Miks ei teisendatud midagi?

Tööriist teisendab ainult elemente, millel on nii joone värv (mitte "none") kui ka positiivne stroke-width, määratud kas atribuutidena või elemendi enda stiilis. Kui sinu SVG määrab joone välise CSS-klassi kaudu, mida brauser ei saa selle tööriista isoleeritud eelvaates lahendada, või <style> ploki kaudu, mis viitab klassidele, ei pruugi arvutatud stiil korrektselt lahenduda — proovi selle asemel määrata stroke ja stroke-width otseste atribuutidena kujundil.

Millal peaksin jooned täidiseks teisendama ja millal jooned alles jätma?

Kui alles disainid, jäta jooned alles — stroke-width jääb muudetavaks ühe arvuna, mille kaotad pärast teisendamist. Kui ekspordid ahelasse, mis käsitleb jooni valesti (ikoonifontide generaatorid, teatud mängumootorid või PDF-eksportijad), teisenda viimase ekspordisammuna ja hoia algne joontega fail redigeeritava allikana, kuna teisendus on ühesuunaline.

Kas teisendamine muudab SVG-faili suuremaks?

Tavaliselt jah — mõne juhtpunktiga määratud joonega kõverast saab sadadest proovivõetud joonelõikudest koosnev täidetud kontuur, mistõttu raja andmed kasvavad märkimisväärselt. Ikoonide puhul pole see praktikas tavaliselt oluline, kuid kui suurus on murekoht, käivita teisendatud väljund hiljem SVG optimeerija kaudu, et vähendada koordinaatide täpsust.

Kas stroke-opacity kandub üle teisendatud täidisele?

Ei — teisendatud rada võtab joone värvi oma täidisena, kuid täieliku läbipaistmatusega; algse kujundi stroke-opacity väärtus jäetakse kõrvale. Kui vajad läbipaistvuse säilitamist, lisa teisendatud rajale käsitsi fill-opacity sama väärtusega pärast väljundi kopeerimist.