Jump to content

Recommended Posts

v2.4.0.2256

Hello everyone,

I've identified an issue with exporting text containing characters with a coloured background. The resulting SVG file has inappropriate conversion of superfluous <tspan> tags and even incongruous grouping, as illustrated, the attachment and source code provided below.

In some cases, the file size is 10 times larger than it should be. This anomaly does have a significant impact on the size of the file generated and slows down its display considerably.

<?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 320 84" 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,0.466667,0,2.84217e-14)">
        <g transform="matrix(1,0,0,2.14286,0,0)">
            <rect x="38.895" y="32.423" width="2.223" height="8.938" style="fill:#e43a30;"/>
            <rect x="72.691" y="32.423" width="2.223" height="8.938" style="fill:#e43a30;"/>
            <rect x="98.918" y="32.423" width="2.223" height="8.938" style="fill:#e43a30;"/>
            <rect x="120.711" y="32.423" width="2.223" height="8.938" style="fill:#e43a30;"/>
            <rect x="162.066" y="32.423" width="2.223" height="8.938" style="fill:#e43a30;"/>
            <rect x="191.855" y="32.423" width="2.223" height="8.938" style="fill:#e43a30;"/>
            <rect x="214.977" y="32.423" width="2.223" height="8.938" style="fill:#e43a30;"/>
            <rect x="223.426" y="32.423" width="2.223" height="8.938" style="fill:#e43a30;"/>
            <rect x="249.652" y="32.423" width="2.223" height="8.938" style="fill:#e43a30;"/>
            <rect x="293.234" y="32.423" width="2.223" height="8.938" style="fill:#e43a30;"/>
            <rect x="312.797" y="32.423" width="2.223" height="8.938" style="fill:#e43a30;"/>
            <rect x="22.441" y="42.823" width="2.223" height="8.938" style="fill:#e43a30;"/>
            <rect x="60.242" y="42.823" width="2.223" height="8.938" style="fill:#e43a30;"/>
            <rect x="83.367" y="42.823" width="2.223" height="8.938" style="fill:#e43a30;"/>
            <rect x="92.262" y="42.823" width="2.223" height="8.938" style="fill:#e43a30;"/>
            <rect x="129.621" y="42.823" width="2.223" height="8.938" style="fill:#e43a30;"/>
            <rect x="150.52" y="42.823" width="2.223" height="8.938" style="fill:#e43a30;"/>
            <rect x="173.641" y="42.823" width="2.223" height="8.938" style="fill:#e43a30;"/>
            <rect x="182.09" y="42.823" width="2.223" height="8.938" style="fill:#e43a30;"/>
        </g>
        <g transform="matrix(1,0,0,2.14286,0,0)">
            <text x="14px" y="39.665px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:8px;fill:#101820;">Nullam hendrerit viverra dolor<tspan x="118.488px 120.711px 122.934px 127.828px 132.277px " y="39.665px 39.665px 39.665px 39.665px 39.665px ">. Ves</tspan>tibulum fringilla, lectus id viverra malesuada, enim</text>
            <g transform="matrix(8,0,0,8,201.648,50.0652)">
            </g>
            <text x="14px" y="50.065px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:8px;fill:#101820;">mi adipiscing ligula, et bibendum lacus lectus id sem.</text>
        </g>
    </g>
</svg>

svg-bug.png.9d6765241a6603d985d4976ba26ccf7f.png

I have also noticed many times, in production with version 2.3.1.2217, similar malfunctions with the management of multiple spaces, but I have not managed to reproduce them conclusively in this report.

svg-bug.afpub

6 cœurs, 12 processus - Windows 11 pro - 4K - DirectX 12 - Suite universelle Affinity (Affinity  Publisher, Affinity Designer, Affinity Photo).

Mais je vous le demande, peut-on imaginer une police sans sérifs ?

Link to comment
Share on other sites

9 hours ago, Pyanepsion said:

... In some cases, the file size is 10 times larger than it should be. This anomaly does have a significant impact on the size of the file generated and slows down its display considerably. ...

This has always been like that and so inefficient with the Affinity SVG Generator. For large SVG files with a lot of text, this has an impact on the overall size of the produced SVG file and may therefore also have an unpleasant effect on later slower web loading times.

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

In order to make it easier to understand the problems encountered and to speed up the process of resolving bugs and improvements, I would, of course, be happy to share privately with the development team the 16-page AFPUB file I used to create the 16 SVG images for a web page, along with the optimized result expected. I hope that this sharing will help:

  • Provide a more complete overview of a real situation.
  • Highlight-specific problem areas.
  • Clearly show the expected results.
  • Save time by pointing out a large proportion of the problems encountered.

6 cœurs, 12 processus - Windows 11 pro - 4K - DirectX 12 - Suite universelle Affinity (Affinity  Publisher, Affinity Designer, Affinity Photo).

Mais je vous le demande, peut-on imaginer une police sans sérifs ?

Link to comment
Share on other sites

  • Staff

Hi Pyanepsion,

I don't think the coloured spaces are causing the text spans at all. It is the multiple highlights on the spaces that are causing it. As I understand it SVG doesn't allow for highlighted text, so to make it work we have to draw a rectangle for every space using a highlighted colour. This is why you have that massive block of rectangles.

So to ensure that wasn't causing the increased text spans I did an export with all of them set to no fill.
SVG export with coloured spaces (attached Highlight Spaces.svg):

<g transform="matrix(1,0,0,2.14286,0,0)">
	<text x="14px" y="39.665px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:8px;fill:rgb(16,24,32);">Nullam hendrerit viverra dolor<tspan x="118.488px 120.711px 122.934px 127.828px 132.277px " y="39.665px 39.665px 39.665px 39.665px 39.665px ">. Ves</tspan>tibulum fringilla, lectus id viverra malesuada, enim</text>
	<g transform="matrix(8,0,0,8,201.648,50.0652)">
	</g>
	<text x="14px" y="50.065px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:8px;fill:rgb(16,24,32);">mi adipiscing ligula, et bibendum lacus lectus id sem.</text>
</g>

SVG export without coloured spaces (attached Non highlight spaces.svg)

<g>
	<text x="14px" y="39.665px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:8px;fill:rgb(16,24,32);">Nullam hendrerit viverra dolor<tspan x="118.488px 120.711px 122.934px 127.828px 132.277px " y="39.665px 39.665px 39.665px 39.665px 39.665px ">. Ves</tspan>tibulum fringilla, lectus id viverra malesuada, enim</text>
	<g transform="matrix(8,0,0,8,201.648,50.0652)">
	</g>
	<text x="14px" y="50.065px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:8px;fill:rgb(16,24,32);">mi adipiscing ligula, et bibendum lacus lectus id sem.</text>
</g>

Notice how the spans are in exactly the same place? The spans are used to try to ensure objects are placed to match what you see in Affinity as closely as possible. Obviously this isn't always what people want, which is why we added the 'Longer Text Spans' option inside the Export Settings. This should do exactly what you want and remove those two text spans.

I took the above two examples and exported them with 'Longer Text Spans' enabled and get this:

SVG export with coloured spaces using longer text spans (Highlight Longer Text Spans.svg)

<g transform="matrix(1,0,0,2.14286,0,0)">
    <text x="14px" y="39.665px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:8px;fill:rgb(16,24,32);">Nullam hendrerit viverra 
    <g transform="matrix(8,0,0,8,201.648,50.0652)">
    </g>
    <text x="14px" y="50.065px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:8px;fill:rgb(16,24,32);">mi adipiscing ligula, et 
</g>

SVG export without coloured spaces using longer text spans (Non Highlight spaces Longer Text Spans.svg)

<g>
    <text x="14px" y="39.665px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:8px;fill:rgb(16,24,32);">Nullam hendrerit viverra 
    <g transform="matrix(8,0,0,8,201.648,50.0652)">
    </g>
    <text x="14px" y="50.065px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:8px;fill:rgb(16,24,32);">mi adipiscing ligula, et 
</g>

 

So to summarize, I don't think there is an issue here, but it does sound like 'Longer Text Spans' will be what you need. You can also look at further minimizing the file size by using 'Use Hex Colours', 'Flatten Transforms' and also disabling 'Use Line Breaks'.


Highlight Spaces.svgNon Highlight spaces Longer Text Spans.svgHighlight Longer Text Spans.svgNon highlight spaces.svg

Link to comment
Share on other sites

Hi, @Sean P,

Your explanation is pertinent. However, I can’t help thinking that there’s a bug when the text:

Quote

profonde, Vers l’an 1000,

produce this <tspan> which seems incongruous on ‘er’:
 

<text x="14" y="50.065" style="font-family:'ArialMT','Arial',sans-serif;font-size:8px;fill:#101820">profonde. V<tspan x="54.922px 59.371px" y="50.065px 50.065px">er</tspan>s l’</text>

I should point out that there is no spacing on ‘er’ here. I’ve found many errors of this type and others in the new AFPUB file that I was proposing to share.

6 cœurs, 12 processus - Windows 11 pro - 4K - DirectX 12 - Suite universelle Affinity (Affinity  Publisher, Affinity Designer, Affinity Photo).

Mais je vous le demande, peut-on imaginer une police sans sérifs ?

Link to comment
Share on other sites

  • Staff

Thanks for that - after looking into it I believe it is the font's kerning pairs that are causing the text spans to appear. For example Arial has a kerning pairs on the following Aw, Av, Ve and Vi - but not on Ar, An, Vj or Vm. If you place the caret between these two characters and check the Character Panel you will see a kerning value of something other than zero in brackets. The brackets mean the value is automatically set, with the value in the brackets.

It is this that is causing the text spans to appear, so the behaviour does seem to be intentional to counter the changes a font is making to the spacing. Again enabling Longer Text Spans will stop this from happening.

That said, it appears as though many SVG renderers automatically apply this spacing anyways, so the text spans that get added appear to be superfluous. I found this by manually setting the kerning myself to zero in the Character Panel to force the the text spans not to export (without using 'Longer Text Spans: On) and found that whilst this was happening, the kerning was still being applied, as noted by a copy of the (zero kerned) text converted to curves below.

This can be seen in the attached 'Auto Kern' file.

  1. Open the attached afdesign
    • In the blue rectangle the Ay pair as an Auto Kern value of -18.1‰ set (noted by the value in the brackets). This has then been converted to curves and coloured green (the AutoKernPos group)
    • In the pink rectangle the Ay pair has an overridden kerning value of 0‰ set (the value is not in brackets, so it has been overridden from Auto). This has then been converted to curves and coloured green (the ZeroKernPos group)
  2. Now export this to SVG (for Export) ensuring Longer text spans are disabled
  3. Open the resulting SVG (also attached) in a browser (I used Chrome, but found Inkscape rendered it the same)
    • Inside the SVG the Ay that has auto kern applied (in the blue box) now has the text span applied, and matches the same as in-app, because there is no green visible from the curve copy underneath it
    • However now note that the Ay that has the overridden kerning value (in the pink box) has been exported out with the text spans, but they're still being applied, because the copy that was converted to curves underneath it in green is now visible.
       

So in summary, it looks like the behaviour needs to be reversed. When Auto Kerning is applied, no text spans should be included, when any overridden kerning (even if its zero) is applied, then it should output with text spans. I will get this logged with development.

Hopefully, this makes sense to you? Thanks for your perseverance! 


 

AutoKern.svg AutoKern.afdesign ArialKerningPairs.afpub

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.