SVG Stroke to Fill Converter, Free and Private
Turn the strokes of an SVG into filled shapes in your browser. Lines, rectangles, circles and paths keep their look with caps, joins and curves outlined. Paste code or open a file. Nothing is uploaded.
The converted SVG appears here.
About the SVG stroke to fill converter
The SVG stroke to fill converter replaces the strokes in an SVG with filled shapes that look exactly the same. A stroke is a line that the viewer draws along a path with a width, a colour, rounded or square ends and corner styles. A fill is just an area. Converting one into the other is useful when a logo has to survive resizing in other tools, when an icon font or a cutting machine needs outlines, or when you want an SVG whose look does not depend on stroke settings. Paste your code or open a file and the result appears next to the original. Everything runs in your browser, so your drawing never leaves your device. There is no signup and no upload.
How to convert strokes to fills
Steps
- Paste the SVG code into SVG code, or choose Open SVG file. Use an example loads a small drawing so you can see the tool at work.
- Check the Original and Converted previews. They should look the same.
- Read the line under the previews. It says how many strokes were converted, and any warnings list the elements that were left as they were.
- Choose Copy SVG, or Download SVG to save the file with
-outlinedadded to its name.
Privacy
Everything runs in your browser. The code you paste or the file you open is read on your device and converted by the page itself, with no network request. The preview is shown as a picture, so scripts in the file are not run. Reloading or closing the tab clears the text, and files up to 2 MB are accepted.
Worked examples
A line with round ends
<line x1="10" y1="20" x2="110" y2="20" stroke="#ff0000" stroke-width="10" stroke-linecap="round"/> is a red line, 10 units thick. After conversion it is a filled path with fill="#ff0000" that runs from x = 5 to x = 115 and from y = 15 to y = 25, because the round caps extend half the width past each end. With a butt cap the shape runs from x = 10 to 110, and with a square cap from x = 5 to 115.
A rectangle with a fill and a stroke
<rect x="10" y="10" width="100" height="50" fill="blue" stroke="black" stroke-width="4"/> becomes two shapes in the same place: the blue rectangle without a stroke, then a black path made of an outer and an inner outline covering the 4-unit border. The border starts 2 units outside the rectangle and ends 2 units inside it.
A scaled shape
A line with stroke-width="2" and transform="scale(2)" is drawn 4 units wide on the page. The converted path has exactly that width and keeps the shape's own transform baked into its coordinates.
Things worth knowing
- Overlaps. The outline is built from pieces that may overlap at corners and joins. The result is filled with the nonzero rule, so it looks solid. It is not merged into one contour. Use Unite or Merge in a design tool if you need that.
- Skipped elements. Dashed strokes, gradient or pattern strokes,
vector-effect="non-scaling-stroke", markers, stroked text and shapes drawn through<use>are left unchanged, and each is listed as a warning. Convert text to paths first. - Style blocks. Strokes set by CSS rules in a
<style>block are not read. Attributes and inlinestylevalues are, including values inherited from groups. - Opacity. A shape with both a fill and a stroke and an
opacitybelow 1 is drawn as two shapes, so the overlap between them can look slightly darker. - Accuracy. Curves are flattened to straight pieces within about 0.05 units of the true curve. Numbers are written to three decimals.
Related tools
Turn the result into a picture with the SVG to PNG converter, make organic shapes with the SVG Blob Generator, or create repeating backgrounds with the SVG Pattern Generator. This page can also be found as SVG outline stroke.
Frequently asked questions
How do I convert an SVG stroke to a fill?
Paste the SVG code into the box or open an .svg file. Each stroked line, rectangle, circle, ellipse, polygon and path is replaced by a filled path that covers exactly the area the stroke covered, painted in the stroke colour. Copy the result or download it as a file. The converted picture is shown next to the original so you can check that they match.
Why would I turn strokes into fills?
A stroke is drawn by the viewer, and tools differ in how they handle its width, caps and scaling. It also cannot be used directly as a cutting path or an icon-font glyph. A filled path is just an outline, so it behaves the same everywhere. Logos, icon sets and cut files are the usual reasons.
Why does the converted path have overlapping parts?
To keep the conversion fast and exact, each stretch of a stroke becomes its own piece and the pieces are allowed to overlap at corners and joins. The outline is filled with the nonzero rule, so overlaps look solid and the picture is identical. The path is not merged into one clean outline, so a design tool's Unite or Merge command is the next step if you need a single contour.
How are line caps, joins and the miter limit handled?
Butt, round and square caps and miter, round and bevel joins are all drawn as the browser would draw them. A miter join that would stick out further than the miter limit, 4 by default, falls back to a bevel, as it does on screen. Curves and arcs are flattened to straight pieces about 0.05 units from the true curve, which is far below one pixel at normal sizes.
What happens to dashed strokes, text, markers and gradients?
Dashed strokes, strokes painted with a gradient or pattern, strokes with vector-effect non-scaling-stroke, markers, stroked text and elements pulled in by a use element are not converted. They are left exactly as they were, and the tool lists each one in a warning so you know what was skipped. Convert text to paths first, and everything else that is supported is still converted.
Does a transform on the shape change the result?
The stroke is outlined in the shape's own coordinates and then moved by the shape's own transform, so a scale of 2 doubles the stroke width and a non-uniform scale stretches it the same way the browser does. The outline sits in the same place in the file, so transforms on groups above it still apply once. The new path carries the transform baked into its numbers.
Is my SVG uploaded anywhere?
No. The code is read and converted on your device, nothing is sent to a server, and there is no signup. Closing or reloading the tab clears it. The preview is drawn from the code with scripts and outside links not run.