xml:space

SVG supports the built-in XML xml:space attribute to handle whitespace characters inside elements. Child elements inside an element may also have an xml:space attribute that overrides the parentʼs one.

This attribute influences how browsers parse text content and therefore changes the way the DOM is built. Therefore, changing this attributeʼs value through the DOM API may have no effect.

All elements are using this attribute.

html, body, svg {
  height: 100%;
}

<svg viewBox="0 0 140 50" xmlns="http://www.w3.org/2000/svg">
  <text y="20" xml:space="default">Default   spacing</text>
  <text y="40" xml:space="preserve">Preserved   spacing</text>
</svg>

Usage notes

default

With this value set, whitespace characters will be processed in this order:

1. All newline characters are removed.
2. All tab characters are converted into space characters.
3. All leading and trailing space characters are removed.
4. All contiguous space characters are collapsed into a single space character.

preserve

This value tells the user agent to convert all newline and tab characters into spaces. Then, it draws all space characters (including leading, trailing and multiple consecutive space characters).

For example, the string "a b" (three spaces between "a" and "b") separates "a" and "b" more than "a b" (one space between "a" and "b").

Specifications

Browser compatibility