SVG stregkontur til fyld-konverter

Indsæt en vilkårlig SVG med streger, og få en tilsvarende SVG tilbage, hvor hver streg er erstattet med en udfyldt sti med samme visuelle form og bredde. Nyttigt til ikonsystemer og designværktøjer, der kun pålideligt gengiver fyld, eller til at reducere en SVG til kun-fyld-stier før yderligere vektorredigering.

Hvad er dette værktøj?

Nogle rendering-pipelines — visse ikonfont-generatorer, nogle spilmotorer, ældre PDF-eksportører og værktøjer, der kun sammensætter fyld — håndterer ikke SVG-streger korrekt eller slet ikke. At konvertere en streg til en udfyldt form med samme bredde omgår dette helt: det visuelle resultat ser identisk ud, men er udtrykt som en enkelt udfyldt sti i stedet for en stregoplinje.

Dette værktøj fungerer ved at prøve mange punkter langs hver figurs omrids (ved brug af browserens egen path-length-API, samme mekanisme som SVG-animation bruger) og opbygger to parallelle forskudte linjer på halvdelen af stregbredden på hver side, som derefter lukkes til én udfyldt polygon.

Hvorfor bruge det?

Virker på path, line, polyline, polygon, rect, circle og ellipse-elementer — ikke kun <path> — ved brug af én samlet samplingsmetode.
Bevarer figurens eget fyld (hvis den havde et) som et separat lag under det nye stregfyld, så udfyldte og stregede figurer konverteres korrekt.
Side-om-side før/efter-forhåndsvisning, så du visuelt kan bekræfte konverteringen, før du kopierer resultatet.
Kører udelukkende i din browser — den SVG, du indsætter, uploades aldrig nogen steder.
Gratis, øjeblikkelig, ingen filstørrelsesgrænse ud over hvad din browser kan gengive.

Sådan bruger du det

Indsæt din SVG-kode i tekstboksen (et fungerende eksempel er forudfyldt).
Klik på "Convert strokes to fills".
Sammenlign før/efter-forhåndsvisningen for at bekræfte, at resultatet ser rigtigt ud.
Klik på "Copy SVG" for at kopiere den konverterede, stregfrie kode.

Eksempel

Input

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

Output

En enkelt <path fill="#3B82F6">, hvis omrids følger begge sider af den oprindelige kurve, 12 enheder fra hinanden, uden nogen stroke-attribut overhovedet.

Kurvens form bevares, fordi værktøjet prøver punkter kontinuerligt langs den faktisk gengivede sti, ikke kun dens kontrolpunkter.

Ofte stillede spørgsmål

Hvorfor bliver skarpe hjørner runde i stedet for spidse (mitred)?

Dette er en kendt, bevidst forenkling af samplingsmetoden: tæt punktsampling langs en sti producerer naturligt runde samlinger og endekapper, uanset den oprindelige værdi af stroke-linejoin eller stroke-linecap. Genopbygning af præcise mitre- eller skrå samlinger kræver en anden, mere kompleks algoritme (linjesegment-skæring ved hvert hjørnepunkt), som dette værktøj ikke implementerer. For de fleste ikon- og illustrationsformål er den visuelle forskel minimal, men hvis du har brug for præcise mitre-samlinger, vil en dedikeret vektoreditors "outline stroke"-funktion være mere præcis.

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

Nej — værktøjet behandler alle streger som massive og ignorerer stroke-dasharray/stroke-dashoffset. En stiplet streg konverteres, som om den var massiv, hvilket ændrer dens udseende. Hvis din SVG bruger stiplede streger, er dette værktøj ikke det rette til de specifikke figurer.

Hvorfor blev der ikke konverteret noget?

Værktøjet konverterer kun elementer, der har både en stregfarve (ikke "none") og en positiv stroke-width, angivet enten som attributter eller i elementets eget style. Hvis din SVG angiver streg via en ekstern CSS-klasse, som browseren ikke kan løse inde i dette værktøjs isolerede forhåndsvisning, eller via en <style>-blok, der refererer til klasser, kan den beregnede stil muligvis ikke løses korrekt — prøv i stedet at angive stroke og stroke-width som direkte attributter på figuren.

Hvornår bør jeg konvertere streger til fyld, og hvornår bør jeg beholde streger?

Hvis du stadig designer, så behold stregerne — stroke-width forbliver redigerbar som ét tal, hvilket du mister efter konvertering. Hvis du eksporterer til en pipeline, der håndterer streger dårligt (ikonfont-generatorer, visse spilmotorer eller PDF-eksportører), så konverter som et sidste eksporttrin, og behold den originale stregede fil som din redigerbare kilde, da konverteringen er envejs.

Gør konvertering SVG-filen større?

Normalt ja — en streget kurve defineret af nogle få kontrolpunkter bliver til et udfyldt omrids bestående af hundredvis af samplede linjesegmenter, så stidataene vokser betydeligt. For ikoner har dette sjældent betydning i praksis, men hvis størrelse er en bekymring, kan du køre det konverterede output gennem en SVG-optimering bagefter for at reducere koordinatpræcisionen.

Overføres stroke-opacity til det konverterede fyld?

Nej — den konverterede sti tager stregens farve som sit fyld, men med fuld uigennemsigtighed; en stroke-opacity-værdi på den oprindelige figur droppes. Hvis du har brug for at bevare gennemsigtigheden, kan du manuelt tilføje fill-opacity med samme værdi til den konverterede sti efter at have kopieret outputtet.