SVGEditor

Free online SVG editor — preview, share, React & PNG

Open source

Bake SVG Markers into Path

Draw each marker-* tip as a filled path at the vertex, then drop the marker attributes — keep live d of the run

Add arrowhead? Add arrowheadInline use elements? Inline use elements

FAQ

Quick answers

How do I bake SVG markers into a path?
Click Bake markers. For every marker-start, marker-mid, and marker-end, a filled triangle is placed at that vertex (oriented along the run) and the marker attribute is removed. Unused <marker> defs are dropped. The original path d is not outlined.
How is baking markers different from adding an arrowhead?
Add Arrowhead writes a live <marker> so the tip stays attached to the stroke. Bake copies the tip into geometry so PNG/CNC/other tools that ignore markers still show the arrow.
Does bake convert the stroke into a filled outline?
No. Convert SVG Stroke to Path expands stroke-width into a ribbon. This page only materializes the marker tips. Inline <use> is a different instance-expand.
Are unused marker definitions deleted?
Yes, after the tips are copied into path geometry. Unreferenced <marker> elements (and an empty defs) are dropped. Remove Markers from SVG does that strip without baking any triangles.
Add arrowhead → Remove markers → Inline use elements → Stroke to path →

Privacy Terms

Open full editor →

Source

Type or paste SVG markup. The preview on the right updates as you type.

Ready

Live preview

PNG export · 2× for retina