SVG Outline Stroke Online, Free and Private
Outline strokes in an SVG online: turn every stroked line, shape and path into a filled path with the same look. Paste code or open a file. Nothing is uploaded.
The converted SVG appears here.
About outlining strokes in an SVG
Outline stroke turns every stroked line, shape and path in an SVG into a filled path with the same appearance. It is the same job as Outline Stroke in Illustrator and Figma, Expand Stroke in Affinity and Stroke to Path in Inkscape, but it runs in your browser without installing anything. Paste your SVG code or open a file, compare the original and converted pictures, then copy or download the result. The drawing is converted on your device and never leaves your device. There is no signup, no watermark and no upload.
How to outline a stroke
Steps
- Paste the SVG code into SVG code, or choose Open SVG file. Use an example shows a drawing with a curve, a rounded rectangle and a line.
- Compare the Original and Converted previews. Rounded caps, square caps and corners should match exactly.
- If the status line mentions warnings, read them. Each lists an element that was left as it was, with the reason.
- Choose Copy SVG or Download SVG. The downloaded file name ends in
-outlined.svg.
Privacy
Everything runs in your browser. Your SVG is read and calculated by the page itself, with no request to a server, and it is cleared when you reload or close the tab. The preview is shown as a picture, so scripts inside the file are not run.
Worked examples
Stroke width on a logo
A logo drawn with stroke-width="6" and stroke-linejoin="round" looks right in your editor, but another program draws the width differently, or ignores it. After outlining, the 6-unit band is part of the shape, so the logo is identical everywhere. A path whose centre line runs along y = 40 becomes a filled shape from y = 37 to y = 43.
Sharp corners and the miter limit
A 90 degree corner drawn with stroke-linejoin="miter" keeps its sharp point. A very sharp angle would produce a spike longer than the stroke is wide, so beyond the stroke-miterlimit, 4 by default, the corner is cut off flat. This is the same rule a browser uses when it draws the stroke, so the picture does not change.
Outline first, fill underneath
A circle with fill="gold" and stroke="black" becomes two shapes. The gold circle stays as it was, with its stroke removed, and the black ring is placed on top as a filled path. If you use paint-order="stroke", the ring is placed underneath instead.
What is not outlined
- Dashed strokes, strokes painted with a gradient or pattern,
vector-effect="non-scaling-stroke", markers, text, and shapes insidedefsorsymbolor drawn through<use>are left unchanged and listed as warnings. - Strokes set by CSS rules in a
<style>block are not read. Use attributes or inline styles. - The outline is built from overlapping pieces and filled with the nonzero rule. It looks solid, but it is not one merged contour.
Related tools
Turn the result into a picture with the SVG to PNG converter, draw organic shapes with the SVG Blob Generator, or see the main tool at SVG stroke to fill.
Frequently asked questions
How do I outline a stroke in an SVG without Illustrator or Inkscape?
Paste the SVG code or open the file on this page. Every stroke is replaced by a filled shape with the same outline, which is what Outline Stroke in Illustrator and Stroke to Path in Inkscape do. Then copy the new code or download the file. It works in the browser, so there is nothing to install.
What is the difference between outlining a stroke and expanding it?
They are different names for the same thing. Illustrator and Figma call it Outline Stroke, Affinity calls it Expand Stroke, and Inkscape calls it Stroke to Path. In each case the line with a width becomes a filled shape that is exactly as wide as the stroke was.
Will the outlined SVG look the same as the original?
Yes for lines, rectangles, circles, ellipses, polygons and paths, including rounded caps, joins and the miter limit. The original and converted pictures are shown side by side. The one thing to know is that the new shapes overlap at corners, which cannot be seen when they are filled with one colour. A stroke with partial opacity is drawn on top of the fill underneath it, as before.
Which parts of an SVG cannot be outlined?
Dashed strokes, gradient and pattern strokes, markers, text, elements inside defs or symbol, and anything drawn through a use element are left as they were, and each one is listed in a warning. CSS written in a style block is not read either, so move those strokes to attributes first. Plain presentation attributes and inline style are both understood, including values inherited from groups.
Does it keep the original fill of a shape?
Yes. A rectangle with a yellow fill and a brown stroke becomes the same rectangle with no stroke, followed by a brown outline path on top, so the layering is the same. If the paint order puts the stroke first, the outline goes underneath. Shapes without a fill are replaced by the outline alone.
Does my SVG leave my computer?
No. Everything is calculated in your browser, so the file is never uploaded or stored. Nothing is kept after you close the tab.