How do I set SVG letter-spacing?

Set Spacing in user units and click Set spacing. The value is written on every and , including style attributes. Negative values tighten the run.

How is letter-spacing different from splitting text into glyphs?

Glyph split makes one per character with baked x. letter-spacing keeps a single run and lets the renderer track. You can still edit the string as one node.

Does letter-spacing convert letters to paths?

No. Convert SVG Text to Path outlines glyphs so the font file is not required. This page only writes the letter-spacing attribute.

Is letter-spacing the same as word-spacing or dx?

No. word-spacing only affects spaces between words. dx is a per-character offset list. This tool writes letter-spacing — tracking between all adjacent glyphs.

Set SVG letter-spacing — Free Tool

FAQ

Quick answers

How do I set SVG letter-spacing?: Set Spacing in user units and click Set spacing. The value is written on every <text> and <tspan>, including style attributes. Negative values tighten the run.
How is letter-spacing different from splitting text into glyphs?: Glyph split makes one <text> per character with baked x. letter-spacing keeps a single run and lets the renderer track. You can still edit the string as one node.
Does letter-spacing convert letters to paths?: No. Convert SVG Text to Path outlines glyphs so the font file is not required. This page only writes the letter-spacing attribute.
Is letter-spacing the same as word-spacing or dx?: No. word-spacing only affects spaces between words. dx is a per-character offset list. This tool writes letter-spacing — tracking between all adjacent glyphs.

Split text into glyphs → Set word-spacing → Set text-anchor → Set dominant-baseline →

Privacy Terms

Source

Spacing

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Set SVG letter-spacing

Live preview