CodeKitHubWhat Is This Tool?
Some rendering pipelines — certain icon font generators, some game engines, older PDF exporters, and tools that only composite fills — don't handle SVG strokes correctly or at all. Converting a stroke into a filled shape of the same width sidesteps that entirely: the visual result looks identical, but it's expressed as a single filled path instead of a stroked line.
This tool works by sampling many points along each shape's outline (using the browser's own path-length API, the same mechanism SVG animation uses) and building two parallel offset lines at half the stroke width on each side, then closing them into one filled polygon.
Why Use It?
- Works on path, line, polyline, polygon, rect, circle and ellipse elements — not just <path> — using one unified sampling method.
- Preserves the shape's own fill (if it had one) as a separate layer underneath the new stroke-fill, so filled-and-stroked shapes convert correctly.
- Side-by-side before/after preview so you can visually confirm the conversion before copying the result.
- Runs entirely in your browser — the SVG you paste is never uploaded anywhere.
- Free, instant, no file size limit beyond what your browser can render.
How to Use
- Paste your SVG markup into the text box (a working example is pre-filled).
- Click "Convert strokes to fills".
- Compare the before/after preview to confirm the result looks right.
- Click "Copy SVG" to copy the converted, stroke-free markup.
Example
Input
<path d="M20 100 Q100 20 180 100" fill="none" stroke="#3B82F6" stroke-width="12"/>Output
A single <path fill="#3B82F6"> whose outline traces both sides of the original curve, 12 units apart, with no stroke attribute at all.The curve's shape is preserved because the tool samples points continuously along the actual rendered path, not just its control points.
Frequently Asked Questions
Why do sharp corners come out rounded instead of pointed (mitered)?
This is a known, deliberate simplification of the sampling approach: dense point sampling along a path naturally produces rounded joins and end caps, regardless of the original stroke-linejoin or stroke-linecap value. Reconstructing exact miter or bevel joins requires a different, more complex algorithm (line-segment intersection at each vertex) that this tool doesn't implement. For most icon and illustration use cases the visual difference is minor, but if you need exact miter joins, a dedicated vector editor's "outline stroke" feature will be more precise.
Does this handle dashed strokes (stroke-dasharray)?
No — the tool treats every stroke as solid and ignores stroke-dasharray/stroke-dashoffset. A dashed stroke will be converted as if it were solid, which changes its appearance. If your SVG uses dashed strokes, this tool isn't the right fit for those specific shapes.
Why did nothing convert?
The tool only converts elements that have both a stroke color (not "none") and a positive stroke-width, set either as attributes or in the element's own style. If your SVG sets stroke via an external CSS class the browser can't resolve inside this tool's isolated preview, or via a <style> block referencing classes, the computed style may not resolve correctly — try setting stroke and stroke-width as direct attributes on the shape instead.
When should I convert strokes to fills, and when should I keep strokes?
If you're still designing, keep strokes — stroke-width stays editable as a single number, which you lose after conversion. If you're exporting to a pipeline that mishandles strokes (icon font generators, certain game engines or PDF exporters), convert as a final export step and keep the original stroked file as your editable source, since the conversion is one-way.
Does converting make the SVG file bigger?
Usually yes — one stroked curve defined by a few control points becomes a filled outline made of hundreds of sampled line segments, so the path data grows substantially. For icons this rarely matters in practice, but if size is a concern, run the converted output through an SVG optimizer afterwards to trim coordinate precision.
Is stroke-opacity carried over to the converted fill?
No — the converted path takes the stroke's color as its fill but at full opacity; a stroke-opacity value on the original shape is dropped. If you need the transparency preserved, add fill-opacity with the same value to the converted path manually after copying the output.