« SVG Attribute reference home
The letter-spacing attribute controls spacing between text characters, in addition to any spacing from the kerning attribute.
For SVG, if the attribute value is a unitless number (like 128), the browser processes it as a <length> in the current user coordinate system.
If the attribute value has a unit identifier, such as .25em or 1%, then the browser converts the <length> into its corresponding value in the current user coordinate system.
As a presentation attribute, it also can be used as a property in CSS. See css letter-spacing for further information.
Usage context
| Categories | Presentation attribute |
|---|---|
| Value | normal | <length> | inherit |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |
- <length>
-
A length is a distance measurement, given as a number along with a unit. Lengths are specified in one of two ways. When used in a stylesheet, a <length> is defined as follows:
length ::= number (~"em" | ~"ex" | ~"px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")?
See the CSS2 specification for the meanings of the unit identifiers.
For properties defined in CSS2, a length unit identifier must be provided. For length values in SVG-specific properties and their corresponding presentation attributes, the length unit identifier is optional. If not provided, the length value represents a distance in the current user coordinate system. In presentation attributes for all properties, whether defined in SVG1.1 or in CSS2, the length identifier, if specified, must be in lower case.
When lengths are used in an SVG attribute, a <length> is instead defined as follows:
length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?The unit identifiers in such <length> values must be in lower case.
Note that the non-property <length> definition also allows a percentage unit identifier. The meaning of a percentage length value depends on the attribute for which the percentage length value has been specified. Two common cases are:
- when a percentage length value represents a percentage of the viewport width or height
- when a percentage length value represents a percentage of the bounding box width or height on a given object.
In the SVG DOM, <length> values are represented using
SVGLengthorSVGAnimatedLengthobjects.
Elements
The following elements can use the letter-spacing attribute
- Text content elements, such as
<text>and<tspan>.
Browser compatibility
| Desktop | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Basic support | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Compatibility unknown
- Compatibility unknown
See also
Usage Note
The letter-spacing attribute in SVG is poorly supported. As of May 2018, Firefox ignores letter-spacing and renders text without. Chrome does render text with spaced letters, but improperly computes the text length; textNode.getComputedTextLength() returns exactly the same length whether letter-spacing is set or not, producing grossly incorrect results when letters are spaced.