Jump to content
You must now use your email address to sign in [click for more info] ×

[AD 1.7.3] Exporting text to SVG gets erroneous <tspan> elements


F_Kal

Recommended Posts

I've been having an issue where I export a paragraph of text into SVG (without converting it to curves but relying on the system fonts) and some characters render differently in the browser (tested on both on the latest desktop firefox and the latest android samsung browser) as seen in the image below:

120793278_ScreenShot2019-12-10at17_52_02.png.3a16850f9765d08d4568c470ae82f847.png

On closer inspection it seems that the SVG adds certain tags to certain characters, isolating them - without an apparent reason however.

 

it is easy to reproduce:

  1. create a new document
  2. use the type text tool
  3. type "Other All" as text (using Arial font) (for some reason the issue appears if there is another word before the word All! Other tested strings that produce the fluff are "A All B" and the "Unlock All Features" string)
  4. export to SVG

The SVG should have isolated the Al characters into an unnecessary <tspan> element:

<g id="Artboard11" serif:id="Artboard1">
        <text x="209.036px" y="520.05px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Other <tspan x="307.087px 331.099px " y="520.05px 520.05px ">Al</tspan>l</text>
    </g>

 

Link to comment
Share on other sites

  • 5 months later...

I have the same problem. I also see <tspan> tags that don't seem to be required when exporting text to a SVG file. The text is "HS4711". Here is what is exported by Affinity Designer:

<text x="435.512px" y="246.326px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;fill:white;">HS471<tspan x="495.18px " y="246.326px ">1</tspan></text>

There is another thing I found: When I export the text "Affinity" in a SVG file, the following comes out:

<text x="441.147px" y="246.326px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;fill:white;">Anity</text>

The 3 letters "ffi" in Affinity are replace by a single letter "ffi" that I have never seen before. Can I change this behaviour by changing a setting? I dont't want the software to change the letters.

Link to comment
Share on other sites

  • Staff
16 hours ago, Thomas Schmidt said:

The 3 letters "ffi" in Affinity are replace by a single letter "ffi" that I have never seen before. Can I change this behaviour by changing a setting? I dont't want the software to change the letters.

These are known as Standard ligatures that are defined in the font. They are automatically applied to suitable letters to make the font look better visually. If you would rather not use these then you can select the text and disable 'Standard Ligatures' from the Typography section of the Character Panel. With that said I'm not actually entirely sure they should be exported in the text - I will get that questioned with development.

Link to comment
Share on other sites

Concerning the <tspan> problem I found out that when I enable the option "Longer text spans" in the "Export Settings" for a SVG file then even longer text is exported as expected.

With "Longer text spans" activated:
<text x="211.647px" y="281.101px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:30.997px;fill:#fff;">This is a longer text to show the difference.</text>

With "Longer text spans" de-activated:
<text x="211.647px" y="281.101px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:30.997px;fill:#fff;">This is a longer text to show the dif<tspan x="688.327px 696.939px " y="281.101px 281.101px ">fe</tspan>rence.</text>

I hope this helps to solve the problem.

Longer text spans.png

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...
×
×
  • Create New...

Important Information

Terms of Use | 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.