SVG text exporting oddly

[JamieA]

Hi, I've noticed when I export something in SVG, the text is split into a bunch of different elements seemingly randomly. Meaning the phrase "hello world" is spliced into 3 different tags "h", "ello wo", "rld" for example. Is there a way to get Affinity to export text normally? This would save so much time as I wouldn't have to recreate text elements in Inkscape. Thanks

[JamieA]

test.svg

It does it for all text, even regular old text.

test.afdesign

[v_kyr]

It looks messed due to how the Affinity SVG output generator treats this, which in my eyes has more to do with vowels and maybe also with apps setup localized spelling correction for title case words in contrast to upper- or lower case word handling.

[Dan C]

I can confirm this is a known bug that is logged with our developers, I'll 'bump' the report with your file now.

Under the More... options of the Export Dialog, please tick Longer Text Spans and then try exporting the document again. Does this provide a better SVG file for you?

[v_kyr]

I say it again, that SVG text export behavior here has to do with vowels namely (a, e, i, o, u ) excluding the umlauts, at least on my german localised app version.

Try it out yourself, for example with ...

1. Taster
2. Tester
3. Tister
4. Toster
5. Tuster
6. Täster
7. Tnster
8. Tttttt
9. ... etc. ...

[Dan C]

Thanks for letting me know @BofG, I agree the name of this option does not seem very logical with the export results and hopefully we will have this fixed shortly!

Many thanks for the clarification @v_kyr, I can confirm that this information is part of the development log regarding this already

[Alfred]

14 minutes ago, Dan C said:

I agree the name of this option does not seem very logical with the export results

‘Longer Text Spans’ is a logical enough name if you read it as “Please give me longer text spans on export” rather than “I’m using longer text spans here, so please chop them up for me”! That aside, longer text spans in the output seems as though it should be the default.

[JamieA]

19 hours ago, Dan C said:

Thanks for letting me know @BofG, I agree the name of this option does not seem very logical with the export results and hopefully we will have this fixed shortly!

Many thanks for the clarification @v_kyr, I can confirm that this information is part of the development log regarding this already

Does this mean I will possibily be able to use Affinity to make SVG templates? Like the kind I can make a script (not in Affinity) to replace text on. If so, game changer. Thank you 

[Alfred]

2 hours ago, JamieA said:

Does this mean I will possibily be able to use Affinity to make SVG templates?

Since we can export to SVG from any of the Affinity apps, it follows that you can do the same things to the output as you can do to other SVG files. Or did you mean something else?

[JamieA]

3 hours ago, Alfred said:

Since we can export to SVG from any of the Affinity apps, it follows that you can do the same things to the output as you can do to other SVG files. Or did you mean something else?

So I have a custom image for example, a sick design and in the centre of it there's some text that I want to be, for a website, a user's username. My plan was to use Affinity designer to make the design and put the text in, make the text something like "USERNAME", and use a script on my web server to replace "USERNAME" to the actual username, then either render in Inkscape (which you can automate because of the command line) or just get the web browser to show it. I cannot currently do this with Affinity because the text element is not one clear element, but split into many different elements meaning I can't make a script look for "USERNAME" and replace it. 

[v_kyr]

8 minutes ago, JamieA said:

...My plan was to use Affinity designer to make the design and put the text in, make the text something like "USERNAME", and use a script on my web server to replace "USERNAME" to the actual username, then either render in Inkscape (which you can automate because of the command line) or just get the web browser to show it. I cannot currently do this with Affinity because the text element is not one clear element, but split into many different elements meaning I can't make a script look for "USERNAME" and replace it. 

Of course you can, all capital words (aka characters) aren't affected here from that, just title case words. So USERNAME wouldn't make any problems here (see below SVG code sample), but for title capitalized words (aka Username) you would have to choose an abrreviation like "Usrname" or "Usr_name" etc. instead, which then doesn't contain a vowel at start.

<svg ...
    ...
    <g transform="matrix(0.837524,0,0,0.837524,-20.2637,48.981)">
        <text x="187.927px" y="301.545px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:118.042px;">USERNAME</text>
    </g>
</svg>

 

[N A]

I am getting a horrible issue where the word STATUS (it's a frame text object) is being split into: STA<tspan x="156.484px " y="664.092px ">T</tspan>. Wherever there is an "AT" or "TA" pair, Affinity messes it up, with the resulting SVG having visibly wrong kerning between the AT and TA letter pairs. If I manually remove all the unnecessary <tspan> tags in a text editor, the SVG is clean and correct with proper kerning! But there is an even worse error: the word "firmware" (also a frame text object) is being split terribly. The "fi" is turned into a <g> block of curve code, while the "rmware" remains as a text object... with the "r" also having an unnecessary <tspan> element around it. Put simply, what should have been clean and simple SVG output has been wrecked by Affinity.

[David in Яuislip]

Click the more button before export then tick Longer Text Spans

With Longer Text Spans set
<text id="FrameText" x="61px" y="375.446px" style="font-family:'Arial';font-size:150px;">firmware</text>
<text id="ArtText" x="59.596px" y="523.5px" style="font-family:'Arial';font-size:125px;fill:#f00;">FirmWare</text>
<text id="FrameText1" x="61px" y="144.446px" style="font-family:'Arial';font-size:150px;">STATUS</text>
<text id="ArtText1" x="55.385px" y="240.5px" style="font-family:'Arial';font-size:125px;fill:#f00;">STAtUS</text>

Without
<text id="FrameText" x="61px" y="375.446px" style="font-family:'Arial';font-size:150px;">firmware</text>
<text id="ArtText" x="59.596px" y="523.5px" style="font-family:'Arial';font-size:125px;fill:#f00;">FirmW<tspan x="422.816px 492.335px " y="523.5px 523.5px ">ar</tspan>e</text>
<text id="FrameText1" x="61px" y="144.446px" style="font-family:'Arial';font-size:150px;">ST<tspan x="241.542px 330.458px 422.084px " y="144.446px 144.446px 144.446px ">ATU</tspan>S</text>
<text id="ArtText1" x="55.385px" y="240.5px" style="font-family:'Arial';font-size:125px;fill:#f00;">ST<tspan x="205.836px 289.21px " y="240.5px 240.5px ">At</tspan>US</text>

 

[v_kyr]

58 minutes ago, N A said:

But there is an even worse error: the word "firmware" (also a frame text object) is being split terribly. The "fi" is turned into a <g> block of curve code, while the "rmware" remains as a text object... with the "r" also having an unnecessary <tspan> element around it.

Not during my tryouts, with Arial used as default font for the ArtText & FrameText and with the "Longer text Spans" disabled here ...

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(1,0,0,1,33.9387,15.8569)">
        <text x="164.222px" y="215.232px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:84.987px;">firmware</text>
    </g>
    <text x="197.547px" y="349.224px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;">firmware</text>
</svg>