Pretvarač SVG obrisa u ispunu

Zalijepite bilo koji SVG koji sadrži oblike s obrisom i dobit ćete natrag ekvivalentan SVG u kojem je svaki obris zamijenjen ispunjenom putanjom istog vizualnog oblika i širine. Korisno za sustave ikona i alate za dizajn koji pouzdano prikazuju samo ispune, ili za svođenje SVG-a na putanje samo s ispunom prije daljnjeg vektorskog uređivanja.

Što je ovaj alat?

Neki pipelinei za renderiranje — određeni generatori font ikona, neki game enginei, stariji izvoznici PDF-a i alati koji sastavljaju samo ispune — ne obrađuju SVG obrise ispravno ili ih uopće ne obrađuju. Pretvaranje obrisa u ispunjen oblik iste širine potpuno zaobilazi taj problem: vizualni rezultat izgleda identično, ali je izražen kao jedna ispunjena putanja umjesto linije s obrisom.

Ovaj alat radi tako da uzorkuje mnoge točke duž obrisa svakog oblika (koristeći vlastiti API duljine putanje preglednika, isti mehanizam koji koristi SVG animacija) i gradi dvije paralelne pomaknute linije na pola širine obrisa sa svake strane, a zatim ih zatvara u jedan ispunjeni poligon.

Zašto ga koristiti?

Radi s elementima path, line, polyline, polygon, rect, circle i ellipse — ne samo s <path> — koristeći jednu jedinstvenu metodu uzorkovanja.
Zadržava vlastitu ispunu oblika (ako ju je imao) kao zaseban sloj ispod nove ispune obrisa, tako da se oblici s ispunom i obrisom ispravno pretvaraju.
Prikaz prije/poslije jedan pored drugoga kako biste vizualno potvrdili pretvorbu prije kopiranja rezultata.
Radi u potpunosti u vašem pregledniku — SVG koji zalijepite nikada se nikamo ne prenosi.
Besplatno, trenutno, bez ograničenja veličine datoteke osim onoga što vaš preglednik može renderirati.

Kako ga koristiti

Zalijepite svoj SVG kod u tekstualni okvir (unaprijed je popunjen radni primjer).
Kliknite "Convert strokes to fills".
Usporedite prikaz prije/poslije kako biste potvrdili da rezultat izgleda ispravno.
Kliknite "Copy SVG" za kopiranje pretvorenog koda bez obrisa.

Primjer

Ulaz

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

Izlaz

Jedan <path fill="#3B82F6"> čiji obris prati obje strane izvorne krivulje, razmaknute 12 jedinica, bez ikakvog atributa stroke.

Oblik krivulje je sačuvan jer alat kontinuirano uzorkuje točke duž stvarno renderirane putanje, ne samo njezinih kontrolnih točaka.

Često postavljana pitanja

Zašto oštri kutovi ispadnu zaobljeni umjesto šiljasti (mitred)?

Ovo je poznato, namjerno pojednostavljenje metode uzorkovanja: gusto uzorkovanje točaka duž putanje prirodno stvara zaobljene spojeve i završetke, bez obzira na izvornu vrijednost stroke-linejoin ili stroke-linecap. Rekonstrukcija točnih mitre ili bevel spojeva zahtijeva drugačiji, složeniji algoritam (presijecanje linijskih segmenata na svakom vrhu) koji ovaj alat ne implementira. Za većinu slučajeva korištenja ikona i ilustracija vizualna razlika je minimalna, ali ako trebate točne mitre spojeve, funkcija "outline stroke" namjenskog vektorskog uređivača bit će precizniji.

Obrađuje li ovo isprekidane obrise (stroke-dasharray)?

Ne — alat tretira svaki obris kao puni i zanemaruje stroke-dasharray/stroke-dashoffset. Isprekidani obris bit će pretvoren kao da je pun, što mijenja njegov izgled. Ako vaš SVG koristi isprekidane obrise, ovaj alat nije prikladan za te specifične oblike.

Zašto se ništa nije pretvorilo?

Alat pretvara samo elemente koji imaju i boju obrisa (ne "none") i pozitivnu stroke-width, postavljenu bilo kao atribute ili u vlastitom stilu elementa. Ako vaš SVG postavlja obris putem vanjske CSS klase koju preglednik ne može razriješiti unutar izoliranog prikaza ovog alata, ili putem <style> bloka koji upućuje na klase, izračunati stil se možda neće ispravno razriješiti — umjesto toga pokušajte postaviti stroke i stroke-width kao izravne atribute na oblik.

Kada trebam pretvoriti obrise u ispune, a kada zadržati obrise?

Ako još dizajnirate, zadržite obrise — stroke-width ostaje uredljiv kao jedan broj, što gubite nakon pretvorbe. Ako izvozite u pipeline koji pogrešno obrađuje obrise (generatori font ikona, određeni game enginei ili izvoznici PDF-a), pretvorite kao završni korak izvoza i zadržite izvornu datoteku s obrisima kao svoj uredljivi izvor, budući da je pretvorba jednosmjerna.

Čini li pretvorba SVG datoteku većom?

Obično da — krivulja s obrisom definirana s nekoliko kontrolnih točaka postaje ispunjeni obris sastavljen od stotina uzorkovanih linijskih segmenata, pa se podaci putanje znatno povećavaju. Za ikone to u praksi rijetko ima značaja, ali ako je veličina problem, pokrenite pretvoreni rezultat kroz optimizator SVG-a naknadno kako biste smanjili preciznost koordinata.

Prenosi li se stroke-opacity na pretvorenu ispunu?

Ne — pretvorena putanja preuzima boju obrisa kao svoju ispunu, ali s punom neprozirnošću; vrijednost stroke-opacity na izvornom obliku se odbacuje. Ako trebate zadržati prozirnost, ručno dodajte fill-opacity s istom vrijednošću pretvorenoj putanji nakon kopiranja rezultata.