SVG kontūra uz pildījumu pārveidotājs

Ielīmējiet jebkuru SVG, kas satur formas ar kontūru, un saņemiet atpakaļ līdzvērtīgu SVG, kurā katra kontūra ir aizstāta ar aizpildītu ceļu, kam ir tāda pati vizuālā forma un platums. Noderīgs ikonu sistēmām un dizaina rīkiem, kas uzticami atveido tikai pildījumus, vai SVG samazināšanai līdz ceļiem tikai ar pildījumu pirms turpmākas vektoru rediģēšanas.

Kas ir šis rīks?

Dažas atveidošanas plūsmas — noteikti ikonu fontu ģeneratori, dažas spēļu dzinēji, vecāki PDF eksportētāji un rīki, kas komponē tikai pildījumus — nepareizi apstrādā SVG kontūras vai neapstrādā tās vispār. Kontūras pārveidošana par aizpildītu formu ar tādu pašu platumu to pilnībā apiet: vizuālais rezultāts izskatās identisks, taču tas ir izteikts kā viens aizpildīts ceļš, nevis kontūras līnija.

Šis rīks darbojas, ņemot daudz punktu paraugus gar katras formas kontūru (izmantojot paša pārlūkprogrammas ceļa garuma API, to pašu mehānismu, ko izmanto SVG animācija), un veido divas paralēlas nobīdes līnijas pusē no kontūras platuma katrā pusē, tad slēdzot tās vienā aizpildītā daudzstūrī.

Kāpēc to izmantot?

Darbojas ar path, line, polyline, polygon, rect, circle un ellipse elementiem — ne tikai ar <path> — izmantojot vienu vienotu paraugu ņemšanas metodi.
Saglabā formas pašas pildījumu (ja tāds bija) kā atsevišķu slāni zem jaunā kontūras pildījuma, tāpēc aizpildītas un kontūrētas formas tiek pareizi pārveidotas.
Blakus izvietots priekšskatījums pirms/pēc, lai jūs varētu vizuāli apstiprināt pārveidojumu pirms rezultāta kopēšanas.
Darbojas pilnībā jūsu pārlūkprogrammā — ielīmētais SVG nekad netiek augšupielādēts nekur.
Bezmaksas, tūlītējs, bez faila lieluma ierobežojuma, izņemot to, ko jūsu pārlūkprogramma spēj atveidot.

Kā to lietot

Ielīmējiet savu SVG kodu teksta lodziņā (funkcionējošs piemērs ir jau iepriekš aizpildīts).
Noklikšķiniet uz "Convert strokes to fills".
Salīdziniet pirms/pēc priekšskatījumu, lai apstiprinātu, ka rezultāts izskatās pareizi.
Noklikšķiniet uz "Copy SVG", lai kopētu pārveidoto, kontūru nesaturošo kodu.

Piemērs

Ievade

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

Izvade

Viens <path fill="#3B82F6">, kura kontūra seko abām oriģinālās līknes pusēm, 12 vienību attālumā, bez jebkāda stroke atribūta.

Līknes forma tiek saglabāta, jo rīks nepārtraukti ņem punktu paraugus gar faktiski atveidoto ceļu, nevis tikai tā kontrolpunktus.

Biežāk uzdotie jautājumi

Kāpēc asi stūri iznāk noapaļoti, nevis smaili (mitrēti)?

Šī ir zināma, apzināta paraugu ņemšanas pieejas vienkāršošana: blīva punktu paraugu ņemšana gar ceļu dabiski rada noapaļotus savienojumus un galus neatkarīgi no oriģinālās stroke-linejoin vai stroke-linecap vērtības. Precīzu mitre vai bevel savienojumu atjaunošanai nepieciešams cits, sarežģītāks algoritms (līnijas segmentu krustošanās katrā virsotnē), ko šis rīks neievieš. Lielākajā daļā ikonu un ilustrāciju lietošanas gadījumu vizuālā atšķirība ir neliela, taču, ja jums nepieciešami precīzi mitre savienojumi, specializēta vektoru redaktora "outline stroke" funkcija būs precīzāka.

Vai šis rīks apstrādā punktētas kontūras (stroke-dasharray)?

Nē — rīks katru kontūru uzskata par nepārtrauktu un ignorē stroke-dasharray/stroke-dashoffset. Punktēta kontūra tiks pārveidota tā, it kā tā būtu nepārtraukta, kas maina tās izskatu. Ja jūsu SVG izmanto punktētas kontūras, šis rīks nav piemērots šīm konkrētajām formām.

Kāpēc nekas netika pārveidots?

Rīks pārveido tikai elementus, kuriem ir gan kontūras krāsa (nevis "none"), gan pozitīvs stroke-width, iestatīts vai nu kā atribūti, vai paša elementa stilā. Ja jūsu SVG iestata kontūru caur ārēju CSS klasi, ko pārlūkprogramma nevar atrisināt šī rīka izolētajā priekšskatījumā, vai caur <style> bloku, kas atsaucas uz klasēm, aprēķinātais stils, iespējams, netiks pareizi atrisināts — tā vietā mēģiniet iestatīt stroke un stroke-width kā tiešus atribūtus formai.

Kad man vajadzētu pārveidot kontūras pildījumos un kad saglabāt kontūras?

Ja jūs joprojām veidojat dizainu, saglabājiet kontūras — stroke-width paliek rediģējams kā viens skaitlis, ko jūs zaudējat pēc pārveidošanas. Ja eksportējat uz plūsmu, kas nepareizi apstrādā kontūras (ikonu fontu ģeneratori, noteikti spēļu dzinēji vai PDF eksportētāji), pārveidojiet kā pēdējo eksportēšanas soli un saglabājiet oriģinālo kontūrēto failu kā savu rediģējamo avotu, jo pārveidošana ir vienvirziena.

Vai pārveidošana palielina SVG faila izmēru?

Parasti jā — ar dažiem kontrolpunktiem definēta kontūrēta līkne kļūst par aizpildītu kontūru, kas sastāv no simtiem paraugu ņemtu līnijas segmentu, tāpēc ceļa dati būtiski palielinās. Ikonām tam praksē reti ir nozīme, taču, ja izmērs rada bažas, pēc tam palaidiet pārveidoto rezultātu caur SVG optimizētāju, lai samazinātu koordinātu precizitāti.

Vai stroke-opacity tiek pārnests uz pārveidoto pildījumu?

Nē — pārveidotais ceļš pārņem kontūras krāsu kā savu pildījumu, taču ar pilnu necaurredzamību; oriģinālās formas stroke-opacity vērtība tiek atmesta. Ja jums nepieciešams saglabāt caurspīdīgumu, pēc rezultāta kopēšanas manuāli pievienojiet fill-opacity ar to pašu vērtību pārveidotajam ceļam.