How to preserve space character in SVG

0 votes
asked Dec 6, 2018 in Question / help by anonymous

I am creating a component diagram.  In which, I would like the spaces given in between words to be preserved.


["Hello                World"]

The generated PNG preserves the spaces accordingly.


But the generated SVG is not preserving the spaces.  Its like this

How can I preserve the spaces in SVG as well?

commented Dec 10, 2018 by Vivek
I also figured out that the <text> tag of svg has an attribute called "xml:space" which can be set to "preserve" in order to preserve the spacing.

<text xml:space="preserve">Hello           world</text>

or even the top level stylesheet like the below can also preserve the spacing:

text {
  white-space: pre;
<text>Hello           world</text>

So now the question is, how can we specify these attributes or the CSS property in PUML file so that the generated SVG can contain these modifiers for the desired results.

3 Answers

0 votes
answered May 15, 2020 by carlheinmostert (200 points)
Any update to this?  I have the same requirement.
0 votes
answered May 20, 2020 by anonymous
I have the same issue.
0 votes
answered May 20, 2020 by The-Lu (19,980 points)

Hello all,

A first workaround will be to use horizontal tabulation '\t':


Here is the PNG result:

PlantUML diagram

Here is the SVG result:

If that can help,