SVG

SVG Stroke to Fill Converter

Details

How to use SVG Stroke to Fill Converter

What the tool does, how to run it, and what to expect from the result.

How to convert SVG strokes to fills

Paste your SVG markup into the input. The tool scans every path, circle, rect, line, polyline, polygon, ellipse, g, and use element, finds the ones painted with a stroke, copies that color into fill, and strips the stroke-* attributes.

Compare the two previews before you copy. If the original was drawn with open paths, the filled version will look wrong, and that is not a bug you can configure away: it means you need real path outlining in a vector editor instead.

  • Paste the SVG markup into the input box.
  • Check the count in the notes to see how many shapes were converted.
  • Compare the Original and Filled previews side by side.
  • If open paths turned into blobs, stop and outline the strokes in a vector editor instead.
  • If the filled version looks right, press Copy result.
Tips

Getting a better result out of SVG Stroke to Fill Converter

Specific settings and thresholds, not general advice.

  • Read this before you use it: the converter copies each shape's stroke color into its fill and deletes the stroke-* attributes. It does not offset the path to preserve line thickness. On a closed shape that was outlined, that is exactly what you want. On an open path, like a checkmark or a line, filling it produces a solid wedge, not an outline.
  • It rewrites nine tags: path, circle, rect, line, polyline, polygon, ellipse, g, and use. Anything else in the file is passed through untouched.
  • It reads the stroke from either the presentation attribute or an inline style declaration, and it strips stroke declarations out of that inline style as well. A stroke coming from an external CSS class is not seen at all.
  • A shape with stroke="none" or no stroke is left alone, and the tool tells you how many shapes it changed. If the count comes back zero, your SVG is already fill-based.
  • For true outlining, where a 2px stroke becomes a 2px-wide filled region, you need path-offset math. That is what Inkscape's Stroke to Path and Illustrator's Expand do. This tool is not a substitute for either.
Limits

What SVG Stroke to Fill Converter does not do

The honest boundary, so you do not lose time finding it yourself.

  • No path-offset math. Stroke thickness is discarded, not converted into geometry.
  • Strokes applied through an external CSS class or a <style> block inside the SVG are not detected.
  • It is a text transform, not an SVG parser, so exotic markup can be passed through unchanged.
  • Gradient and pattern strokes (stroke="url(#id)") are copied into fill verbatim, which may or may not render as intended.
At a glance

Who SVG Stroke to Fill Converter is for

A quick way to understand who this helps, what it solves, and where it connects next.

Best fit

Designers and developers converting SVG icons.

Ideal for

Using the svg stroke to fill converter without installing anything or signing up.

FAQ

Common questions

Short answers for the questions people usually have before trying a utility like this.

My checkmark turned into a solid blob. Is that a bug?

No, it is the honest result of what this tool does. A checkmark is an open path drawn with a stroke; filling it means filling the region its two line segments enclose. Only closed shapes survive a stroke-to-fill recolor intact. For an open path you need real outlining, which requires path-offset math this tool deliberately does not attempt.

When is this conversion actually the right move?

When an icon set ships as strokes and you need fills: for example, so the shape can be used as a CSS mask, so it can be filled with currentColor without stroke-width scaling issues, or so a font or cutting-machine tool that ignores strokes can read it. It is also the fast way to strip stroke-width, stroke-linecap, and stroke-linejoin noise out of exported markup.

Why did nothing change when I pasted my SVG?

Either every shape already uses fill, or the stroke is coming from a CSS class or a <style> block rather than from a stroke attribute or an inline style. The tool only reads stroke from those two places, and it reports how many shapes it converted so you can tell the difference.

How do I do a real stroke-to-outline conversion instead?

Use a vector editor. Inkscape has Path, Stroke to Path; Illustrator has Object, Path, Outline Stroke; Figma has Outline Stroke. Those compute the offset geometry so a 2px line becomes a 2px-wide filled shape. Then paste the resulting fill-only SVG anywhere you like.

Is my SVG uploaded when I paste it here?

No. The transform is a pure text-in, text-out function running in the page. Nothing is sent anywhere, which matters if the icon is from an unreleased product.

Does it handle groups?

It treats <g> as a shape tag, so a stroke set on a group is moved to fill on that group. Since fill and stroke both inherit, that usually does the right thing, but any child that sets its own stroke is converted separately.

Recommendations

You Might Also Like

Nearby tools from the catalog that fit the same job or workflow.

Cleanor app

Do it all on your device

Cleanor puts these tools in one app: compress and convert images, video, and audio, work with PDFs, and scan text right on your device. Plus free up storage and clear inbox clutter with Email Cleaner. Start with a free trial.

  • iPhone
  • Android
  • Macsoon
  • Windowssoon