SVG-lijn-naar-vulling-converter

Plak een willekeurige SVG met vormen die lijnen bevatten en krijg een gelijkwaardige SVG terug waarin elke lijn is vervangen door een gevuld pad met dezelfde visuele vorm en breedte. Handig voor icoonsystemen en ontwerptools die alleen vullingen betrouwbaar weergeven, of om een SVG terug te brengen tot alleen-vulling-paden vóór verdere vectorbewerking.

Wat is deze tool?

Sommige renderingpipelines — bepaalde icoonlettertype-generatoren, sommige game-engines, oudere PDF-exporteerders en tools die alleen vullingen samenstellen — verwerken SVG-lijnen niet correct of helemaal niet. Het omzetten van een lijn naar een gevulde vorm met dezelfde breedte omzeilt dit volledig: het visuele resultaat ziet er identiek uit, maar wordt uitgedrukt als één enkel gevuld pad in plaats van een lijn met een streek.

Deze tool werkt door veel punten langs de omtrek van elke vorm te bemonsteren (met behulp van de eigen path-length-API van de browser, hetzelfde mechanisme dat SVG-animatie gebruikt) en bouwt twee parallelle verschoven lijnen op de helft van de lijnbreedte aan elke kant, die vervolgens worden gesloten tot één gevulde veelhoek.

Waarom gebruiken?

Werkt met path-, line-, polyline-, polygon-, rect-, circle- en ellipse-elementen — niet alleen met <path> — met behulp van één uniforme bemonsteringsmethode.
Behoudt de eigen vulling van de vorm (indien aanwezig) als een aparte laag onder de nieuwe lijnvulling, zodat gevulde en omlijnde vormen correct worden geconverteerd.
Voor/na-preview naast elkaar, zodat je de conversie visueel kunt bevestigen voordat je het resultaat kopieert.
Werkt volledig in je browser — de SVG die je plakt wordt nooit ergens geüpload.
Gratis, direct, geen bestandsgroottelimiet buiten wat je browser kan weergeven.

Hoe te gebruiken

Plak je SVG-code in het tekstvak (een werkend voorbeeld is al ingevuld).
Klik op "Convert strokes to fills".
Vergelijk de voor/na-preview om te bevestigen dat het resultaat er goed uitziet.
Klik op "Copy SVG" om de geconverteerde, lijnvrije code te kopiëren.

Voorbeeld

Invoer

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

Uitvoer

Eén <path fill="#3B82F6"> waarvan de omtrek beide zijden van de oorspronkelijke kromme volgt, 12 eenheden uit elkaar, zonder enig stroke-attribuut.

De vorm van de kromme blijft behouden omdat de tool continu punten bemonstert langs het daadwerkelijk weergegeven pad, niet alleen de controlepunten ervan.

Veelgestelde vragen

Waarom worden scherpe hoeken afgerond in plaats van puntig (mitred)?

Dit is een bekende, bewuste vereenvoudiging van de bemonsteringsaanpak: dichte puntbemonstering langs een pad produceert van nature afgeronde verbindingen en uiteinden, ongeacht de oorspronkelijke waarde van stroke-linejoin of stroke-linecap. Het reconstrueren van exacte mitre- of bevel-verbindingen vereist een ander, complexer algoritme (lijnsegmentintersectie bij elk hoekpunt) dat deze tool niet implementeert. Voor de meeste icoon- en illustratietoepassingen is het visuele verschil minimaal, maar als je exacte mitre-verbindingen nodig hebt, is de "outline stroke"-functie van een gespecialiseerde vectoreditor nauwkeuriger.

Verwerkt dit gestippelde lijnen (stroke-dasharray)?

Nee — de tool behandelt elke lijn als een volle lijn en negeert stroke-dasharray/stroke-dashoffset. Een gestippelde lijn wordt geconverteerd alsof deze vol was, wat het uiterlijk ervan verandert. Als je SVG gestippelde lijnen gebruikt, is deze tool niet geschikt voor die specifieke vormen.

Waarom is er niets geconverteerd?

De tool converteert alleen elementen die zowel een lijnkleur (niet "none") als een positieve stroke-width hebben, ingesteld als attributen of in de eigen stijl van het element. Als je SVG de lijn instelt via een externe CSS-klasse die de browser niet kan oplossen binnen de geïsoleerde preview van deze tool, of via een <style>-blok dat naar klassen verwijst, wordt de berekende stijl mogelijk niet correct opgelost — probeer in plaats daarvan stroke en stroke-width als directe attributen op de vorm in te stellen.

Wanneer moet ik lijnen naar vullingen converteren, en wanneer moet ik lijnen behouden?

Als je nog aan het ontwerpen bent, behoud dan de lijnen — stroke-width blijft bewerkbaar als één enkel getal, wat je na conversie kwijtraakt. Als je exporteert naar een pipeline die lijnen verkeerd verwerkt (icoonlettertype-generatoren, bepaalde game-engines of PDF-exporteerders), converteer dan als laatste exportstap en bewaar het oorspronkelijke bestand met lijnen als je bewerkbare bron, aangezien de conversie eenrichtingsverkeer is.

Maakt converteren het SVG-bestand groter?

Meestal wel — een omlijnde kromme gedefinieerd door een paar controlepunten wordt een gevulde omtrek bestaande uit honderden bemonsterde lijnsegmenten, waardoor de padgegevens aanzienlijk groeien. Voor iconen maakt dit in de praktijk zelden uit, maar als grootte een probleem is, voer de geconverteerde output dan achteraf door een SVG-optimalisatietool om de coördinaatprecisie te verminderen.

Wordt stroke-opacity overgebracht naar de geconverteerde vulling?

Nee — het geconverteerde pad neemt de kleur van de lijn over als vulling, maar met volledige dekking; een stroke-opacity-waarde op de oorspronkelijke vorm wordt weggelaten. Als je de transparantie wilt behouden, voeg dan handmatig fill-opacity toe met dezelfde waarde aan het geconverteerde pad nadat je de output hebt gekopieerd.