Why are there missing spaces in SVG text in some browsers? - svg

Question

I'm drawing a graphic in CorelDRAW (2021) and then exporting it to SVG.
In CorelDRAW, one of the artistic text objects contains text in different font weights. For example:
Garfield sat on the mat
Problem: Some browsers, such as Chrome and Edge, display that text in the SVG as:
Garfieldsat on the mat
That is, with the bold "Garfield" abutting the normal "sat", with no space.
In other browsers, such as Firefox, the same SVG displays as expected, with a space.
Example SVG (exported from CorelDRAW: not a truly minimal example, but I've stripped some of the excess markup):
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW 2021.5 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="3.44562in" height="0.247335in" version="1.1" viewBox="0 0 18928.2 1358.7">
<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:#373435}
.fnt1 {font-weight:normal;font-size:1831.1px;font-family:'Arial'}
.fnt0 {font-weight:bold;font-size:1831.1px;font-family:'Arial'}
]]>
</style>
</defs>
<text x="-87.9" y="1334.9" class="fil0 fnt0">Garfield</text>
<text x="6831.7" y="1334.9" class="fil0 fnt1"> sat on the mat</text>
</svg>

Answer 1

Chrome and Edge, and possibly other browsers, ignore leading spaces inside the SVG <text> element.
Here's a snippet of the SVG:
<text ... class="fil4 fnt0">Garfield</text>
<text ... class="fil4 fnt1"> sat on the mat</text>
(where "..." indicates elided attributes)
Note:
CorelDRAW has split the original single text object into two SVG <text> elements. Understandable, because of the different font weights (.fnt0 is bold, .fnt1 is normal).
The content of the second <text> element begins with a space.
Workaround: In CorelDRAW, don't mix font weights in a single text object.
More generally, whatever application you use to create SVG: if you notice a missing space when the SVG is rendered (say, in a browser), check whether the content of the corresponding SVG <text> element begins with a leading space. If so, rework your artwork in the original application to avoid that SVG output.

Answer 2

Usually for html2pdf, in common with many apps, heavy weight texts tend to "stretch" into a following void, or in this case the leading space is not defined. One way to enforce whitespace is try in standard html see the enforced spacing in https://stackoverflow.com/a/74297349/10802527
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW 2021.5 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="3.44562in" height="0.247335in" version="1.1" viewBox="0 0 18928.2 1358.7">
<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:#373435}
.fnt1 {font-weight:normal;font-size:1831.1px;font-family:'Arial'}
.fnt0 {font-weight:bold;font-size:1831.1px;font-family:'Arial'}
]]>
</style>
</defs>
<text x="-87.9" y="1334.9" class="fil0 fnt0">Garfield</text>
<text x="6831.7" y="1334.9" class="fil0 fnt1"> sat on the mat</text>
</svg>