Jump to content
Our response time is longer than usual currently. We're working to answer users as quickly as possible and thank you for your continued patience.

Recommended Posts

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

Link to comment
Share on other sites

Okay, yeah that's just messed up!! If the text starts with a capital letter, it gets split into a <tspan> yet if the capital is anywhere else it's fine. There's no odd kerning or tracking.

@Dan C any ideas?

p.s. If you place a leading space on artistic text, the space is taken up, but the bounding box doesn't encompass it - on export to SVG the leading space is lost, yet it prevents the first capital being placed into a <tspan>.

Link to comment
Share on other sites

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.

☛ Affinity Designer 1.10.5 ◆ Affinity Photo 1.10.5 ◆ OSX El Capitan

Link to comment
Share on other sites

  • Moderators

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?

Link to comment
Share on other sites

1 hour ago, Dan C said:

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?

From what I've tested it does seem to work. Given that it avoids inserting (completely unnecessary) "text span" elements, the name is somewhat confusing! 🤣

Link to comment
Share on other sites

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. ...

☛ Affinity Designer 1.10.5 ◆ Affinity Photo 1.10.5 ◆ OSX El Capitan

Link to comment
Share on other sites

  • Moderators

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 :)

Link to comment
Share on other sites

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.

Alfred spacer.png
Affinity Designer/Photo/Publisher for Windows 1.10 • Windows 10 Home/Pro
Affinity Photo for iPad 1.10 • Designer for iPad 1.10 • iPadOS 15.6.1 (iPad Air 2)

Link to comment
Share on other sites

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 

Link to comment
Share on other sites

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? :/

Alfred spacer.png
Affinity Designer/Photo/Publisher for Windows 1.10 • Windows 10 Home/Pro
Affinity Photo for iPad 1.10 • Designer for iPad 1.10 • iPadOS 15.6.1 (iPad Air 2)

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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>

 

☛ Affinity Designer 1.10.5 ◆ Affinity Photo 1.10.5 ◆ OSX El Capitan

Link to comment
Share on other sites

  • 1 year later...

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.

Link to comment
Share on other sites

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>

 

Microsoft Windows 10 Home, Intel i7-9750H CPU @ 2.60GHz, 16 GB RAM, 500GB SSD, 1TB Whirlygig, NVIDIA GeForce RTX 2060
Affinity Photo - 24/05/20, Affinity Publisher - 06/12/20, KTM Superduke - 27/09/10

Link to comment
Share on other sites

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 ...

firmware.jpg.f0097a565fc6c2ab6eac68a6e18972b2.jpg

<?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>

 

☛ Affinity Designer 1.10.5 ◆ Affinity Photo 1.10.5 ◆ OSX El Capitan

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...

Important Information

Please note there is currently a delay in replying to some post. See pinned thread in the Questions forum. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.