SVG-konturlinje-till-fyllnad-konverterare

Klistra in valfri SVG som innehåller former med konturlinje och få tillbaka en motsvarande SVG där varje konturlinje har ersatts med en fylld bana med samma visuella form och bredd. Användbart för ikonsystem och designverktyg som endast rendrar fyllnader tillförlitligt, eller för att reducera en SVG till enbart fyllnadsbanor innan vidare vektorredigering.

Vad är detta verktyg?

Vissa renderingsflöden — vissa ikonteckensnittsgeneratorer, vissa spelmotorer, äldre PDF-exportörer och verktyg som endast kompositerar fyllnader — hanterar inte SVG-konturlinjer korrekt eller alls. Att konvertera en konturlinje till en fylld form med samma bredd kringgår detta helt: det visuella resultatet ser identiskt ut, men uttrycks som en enda fylld bana istället för en linje med konturlinje.

Det här verktyget fungerar genom att ta prov på många punkter längs varje forms kontur (med hjälp av webbläsarens egna API för banlängd, samma mekanism som SVG-animation använder) och bygger två parallella förskjutna linjer på halva konturlinjens bredd på varje sida, och sluter dem sedan till en enda fylld polygon.

Varför använda det?

Fungerar på path-, line-, polyline-, polygon-, rect-, circle- och ellipse-element — inte bara på <path> — med hjälp av en enhetlig samplingsmetod.
Bevarar formens egen fyllnad (om den hade en) som ett separat lager under den nya konturfyllnaden, så att fyllda och konturerade former konverteras korrekt.
Förhandsvisning sida vid sida av före/efter, så att du visuellt kan bekräfta konverteringen innan du kopierar resultatet.
Körs helt i din webbläsare — SVG:n du klistrar in laddas aldrig upp någonstans.
Gratis, omedelbart, ingen filstorleksgräns utöver vad din webbläsare klarar av att rendera.

Så använder du det

Klistra in din SVG-kod i textrutan (ett fungerande exempel är förifyllt).
Klicka på "Convert strokes to fills".
Jämför förhandsvisningen före/efter för att bekräfta att resultatet ser rätt ut.
Klicka på "Copy SVG" för att kopiera den konverterade, konturlinjefria koden.

Exempel

Inmatning

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

Resultat

En enda <path fill="#3B82F6"> vars kontur följer båda sidor av den ursprungliga kurvan, 12 enheter isär, helt utan stroke-attribut.

Kurvans form bevaras eftersom verktyget kontinuerligt samplar punkter längs den faktiskt rendrade banan, inte bara dess kontrollpunkter.

Vanliga frågor

Varför blir skarpa hörn rundade istället för spetsiga (mitrade)?

Detta är en känd, medveten förenkling av samplingsmetoden: tät punktsampling längs en bana ger naturligt rundade sammanfogningar och ändlock, oavsett det ursprungliga värdet för stroke-linejoin eller stroke-linecap. Att rekonstruera exakta miter- eller fasade sammanfogningar kräver en annan, mer komplex algoritm (linjesegmentskärning vid varje hörnpunkt) som det här verktyget inte implementerar. För de flesta ikon- och illustrationsanvändningsfall är den visuella skillnaden liten, men om du behöver exakta mitersammanfogningar kommer en dedikerad vektorredigerares "outline stroke"-funktion att vara mer precis.

Hanterar det här streckade konturlinjer (stroke-dasharray)?

Nej — verktyget behandlar varje konturlinje som heldragen och ignorerar stroke-dasharray/stroke-dashoffset. En streckad konturlinje konverteras som om den vore heldragen, vilket ändrar dess utseende. Om din SVG använder streckade konturlinjer är det här verktyget inte rätt val för de specifika formerna.

Varför konverterades ingenting?

Verktyget konverterar bara element som har både en konturfärg (inte "none") och en positiv stroke-width, angivna antingen som attribut eller i elementets egen stil. Om din SVG anger konturlinjen via en extern CSS-klass som webbläsaren inte kan slå upp inuti det här verktygets isolerade förhandsvisning, eller via ett <style>-block som refererar till klasser, kanske den beräknade stilen inte kan slås upp korrekt — försök istället ange stroke och stroke-width som direkta attribut på formen.

När bör jag konvertera konturlinjer till fyllnader, och när bör jag behålla konturlinjer?

Om du fortfarande designar, behåll konturlinjerna — stroke-width förblir redigerbar som ett enda tal, vilket du förlorar efter konvertering. Om du exporterar till ett flöde som hanterar konturlinjer felaktigt (ikonteckensnittsgeneratorer, vissa spelmotorer eller PDF-exportörer), konvertera som ett sista exportsteg och behåll den ursprungliga konturerade filen som din redigerbara källa, eftersom konverteringen är enkelriktad.

Gör konverteringen SVG-filen större?

Vanligtvis ja — en konturerad kurva definierad av några få kontrollpunkter blir en fylld kontur bestående av hundratals samplade linjesegment, så bandata växer avsevärt. För ikoner spelar det sällan någon praktisk roll, men om storleken är en oro, kör den konverterade utdatan genom en SVG-optimerare efteråt för att minska koordinatprecisionen.

Överförs stroke-opacity till den konverterade fyllnaden?

Nej — den konverterade banan tar konturens färg som sin fyllnad men med full opacitet; ett stroke-opacity-värde på den ursprungliga formen tas bort. Om du behöver bevara transparensen, lägg manuellt till fill-opacity med samma värde till den konverterade banan efter att du har kopierat utdatan.