SVG strek-til-fyll-konverterer

Lim inn en hvilken som helst SVG med former som har strek, og få tilbake en tilsvarende SVG der hver strek er erstattet med en fylt bane med samme visuelle form og bredde. Nyttig for ikonsystemer og designverktøy som bare gjengir fyll pålitelig, eller for å redusere en SVG til rene fyll-baner før videre vektorredigering.

Hva er dette verktøyet?

Enkelte rendringspipeliner — visse ikonfont-generatorer, noen spillmotorer, eldre PDF-eksportører og verktøy som bare setter sammen fyll — håndterer ikke SVG-streker korrekt, eller i det hele tatt. Å konvertere en strek til en fylt form med samme bredde omgår dette helt: det visuelle resultatet ser identisk ut, men uttrykkes som én enkelt fylt bane i stedet for en strektegnet linje.

Dette verktøyet fungerer ved å ta stikkprøver av mange punkter langs hver forms omriss (ved hjelp av nettleserens egen path-length-API, samme mekanisme som SVG-animasjon bruker), og bygger to parallelle forskyvningslinjer på halve strekbredden på hver side, og lukker dem deretter til én fylt polygon.

Hvorfor bruke det?

Fungerer på path-, line-, polyline-, polygon-, rect-, circle- og ellipse-elementer — ikke bare <path> — ved hjelp av én enhetlig prøvetakingsmetode.
Bevarer formens eget fyll (hvis den hadde et) som et eget lag under det nye strekfyllet, slik at fylte og strektegnede former konverteres riktig.
Side-om-side før/etter-forhåndsvisning slik at du visuelt kan bekrefte konverteringen før du kopierer resultatet.
Kjører utelukkende i nettleseren din — SVG-en du limer inn blir aldri lastet opp noe sted.
Gratis, umiddelbar, ingen filstørrelsesbegrensning utover det nettleseren din klarer å gjengi.

Slik bruker du det

Lim inn SVG-koden din i tekstboksen (et fungerende eksempel er forhåndsutfylt).
Klikk på "Convert strokes to fills".
Sammenlign før/etter-forhåndsvisningen for å bekrefte at resultatet ser riktig ut.
Klikk på "Copy SVG" for å kopiere den konverterte, strekfrie koden.

Eksempel

Inndata

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

Resultat

Én <path fill="#3B82F6"> hvis omriss følger begge sider av den opprinnelige kurven, 12 enheter fra hverandre, uten noe stroke-attributt i det hele tatt.

Kurvens form bevares fordi verktøyet tar stikkprøver av punkter kontinuerlig langs den faktisk gjengitte banen, ikke bare kontrollpunktene.

Ofte stilte spørsmål

Hvorfor blir skarpe hjørner avrundet i stedet for spisse (mitret)?

Dette er en kjent, bevisst forenkling av prøvetakingsmetoden: tett punktprøvetaking langs en bane produserer naturlig avrundede sammenføyninger og endekapper, uavhengig av den opprinnelige verdien for stroke-linejoin eller stroke-linecap. Å rekonstruere eksakte gjærings- eller fasettsammenføyninger krever en annen, mer kompleks algoritme (linjesegmentskjæring ved hvert hjørnepunkt) som dette verktøyet ikke implementerer. For de fleste ikon- og illustrasjonsformål er den visuelle forskjellen liten, men hvis du trenger nøyaktige gjæringssammenføyninger, vil "outline stroke"-funksjonen i en dedikert vektoreditor være mer presis.

Håndterer dette stiplede streker (stroke-dasharray)?

Nei — verktøyet behandler hver strek som heltrukken og ignorerer stroke-dasharray/stroke-dashoffset. En stiplet strek vil bli konvertert som om den var heltrukken, noe som endrer utseendet. Hvis SVG-en din bruker stiplede streker, er dette verktøyet ikke rett verktøy for disse spesifikke formene.

Hvorfor ble ingenting konvertert?

Verktøyet konverterer kun elementer som har både en strekfarge (ikke "none") og en positiv stroke-width, angitt enten som attributter eller i elementets egen stil. Hvis SVG-en din angir strek via en ekstern CSS-klasse som nettleseren ikke kan løse opp i dette verktøyets isolerte forhåndsvisning, eller via en <style>-blokk som refererer til klasser, kan den beregnede stilen kanskje ikke løses opp riktig — prøv i stedet å angi stroke og stroke-width som direkte attributter på formen.

Når bør jeg konvertere streker til fyll, og når bør jeg beholde streker?

Hvis du fortsatt designer, behold strekene — stroke-width forblir redigerbar som ett enkelt tall, noe du mister etter konvertering. Hvis du eksporterer til en pipeline som håndterer streker feil (ikonfont-generatorer, visse spillmotorer eller PDF-eksportører), konverter som et siste eksportsteg og behold den originale strektegnede filen som din redigerbare kilde, siden konverteringen er enveis.

Gjør konvertering SVG-filen større?

Vanligvis ja — en strektegnet kurve definert av noen få kontrollpunkter blir til et fylt omriss bestående av hundrevis av stikkprøvetatte linjesegmenter, så banedataene vokser betydelig. For ikoner har dette sjelden praktisk betydning, men hvis størrelse er en bekymring, kjør det konverterte resultatet gjennom en SVG-optimaliserer etterpå for å redusere koordinatpresisjonen.

Overføres stroke-opacity til det konverterte fyllet?

Nei — den konverterte banen tar strekens farge som sitt fyll, men med full ugjennomsiktighet; en stroke-opacity-verdi på den opprinnelige formen blir forkastet. Hvis du trenger å bevare gjennomsiktigheten, legg manuelt til fill-opacity med samme verdi på den konverterte banen etter at du har kopiert resultatet.