How do I set SVG word-spacing?

Set Spacing in user units and click Set word-spacing. The value is written on every and , including style attributes. It only changes the gap at space characters.

How is word-spacing different from letter-spacing?

letter-spacing tracks every pair of glyphs. word-spacing leaves letter tracking alone and only adds (or subtracts) space where the string has a word break. Need a two-word run to see it.

Does word-spacing split the string into tspans?

No. Tspan → text unwraps line tspans. Glyph split makes one per character. This page keeps the phrase in one node and writes word-spacing.

Does word-spacing outline the font?

No. Convert SVG Text to Path replaces letters with path data. This page only writes the word-spacing attribute on live text.

Set SVG word-spacing — Free Tool

FAQ

Quick answers

How do I set SVG word-spacing?: Set Spacing in user units and click Set word-spacing. The value is written on every <text> and <tspan>, including style attributes. It only changes the gap at space characters.
How is word-spacing different from letter-spacing?: letter-spacing tracks every pair of glyphs. word-spacing leaves letter tracking alone and only adds (or subtracts) space where the string has a word break. Need a two-word run to see it.
Does word-spacing split the string into tspans?: No. Tspan → text unwraps line tspans. Glyph split makes one <text> per character. This page keeps the phrase in one node and writes word-spacing.
Does word-spacing outline the font?: No. Convert SVG Text to Path replaces letters with path data. This page only writes the word-spacing attribute on live text.

Set letter-spacing → Set textLength → Split text into glyphs → Set text-anchor →

Privacy Terms

Source

Spacing

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Set SVG word-spacing

Live preview