How do I set SVG textLength?

Set Length in user units, pick spacing or glyphs, then click Set. Each gets textLength and lengthAdjust. A second click with the same values is a no-op.

How is textLength different from letter-spacing?

letter-spacing adds a constant between glyphs; the run grows by that times (n−1). textLength sets the whole run’s target length and lets the renderer distribute extra space (or squeeze).

What does lengthAdjust do with textLength?

spacing (the SVG default) only changes gaps. spacingAndGlyphs also scales glyph outlines so a short word can fill a long target without huge holes.

Does textLength convert the run to a path?

No. Convert SVG Text to Path outlines glyphs. This page keeps a live string and only writes textLength / lengthAdjust.

Set SVG textLength — Free Tool

FAQ

Quick answers

How do I set SVG textLength?: Set Length in user units, pick spacing or glyphs, then click Set. Each <text> gets textLength and lengthAdjust. A second click with the same values is a no-op.
How is textLength different from letter-spacing?: letter-spacing adds a constant between glyphs; the run grows by that times (n−1). textLength sets the whole run’s target length and lets the renderer distribute extra space (or squeeze).
What does lengthAdjust do with textLength?: spacing (the SVG default) only changes gaps. spacingAndGlyphs also scales glyph outlines so a short word can fill a long target without huge holes.
Does textLength convert the run to a path?: No. Convert SVG Text to Path outlines glyphs. This page keeps a live <text> string and only writes textLength / lengthAdjust.

Set letter-spacing → Set word-spacing → Text to path → Split text into glyphs →

Privacy Terms

Source

Length

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Set SVG textLength

Live preview