SVGEditor

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

Open source

Add underline to SVG text

Solid underline under live SVG text from the run — keep the string editable, do not outline glyphs

Outline with stroke? Outline with strokeText to path? Text to path

FAQ

Quick answers

How do I add an underline to SVG text?
Pick underline and click Underline. A solid bar is measured from each live <text> box and filled with the text color. Chrome cannot turn off skip-ink on SVG text-decoration, so CSS underline looks gapped under y/p — this bar does not. Pick none to clear it. Same value again is a no-op.
How is this underline different from drawing a line?
You do not place coordinates. The bar is sized from the live text box and uses the text fill, so it tracks that run. A hand-drawn <line> is a separate shape. Outline with stroke contours glyphs instead.
Does underline convert text to a path?
No. Convert SVG Text to Path outlines glyphs. This page keeps a live string and only adds the underline bar.
How do I remove the underline?
Pick none and click Underline. The measured bar is removed. Outline with stroke is unrelated — that adds a contour around fills.
Outline with stroke → Text to path → Set font-family → Set letter-spacing →

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