Designer SVG export (empty groups)

[Juc1]

Hi all I have attached a simple file as an example - in Designer 2 I have three layers with font text, one layer with a rectangle and no groups. When I export the file to SVG it seems that I have an empty group for each text layer. The SVG file displays ok in the browser but I don't want useless clutter in my SVG files. Can anyone please tell me why am I getting these empty groups or how can I stop them?

<?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 400 200" 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;">
    <rect x="50" y="20" width="50" height="50" style="fill:rgb(13,202,242);"/>
    <g transform="matrix(50,0,0,50,310.289,181.133)">
    </g>
    <text x="124.058px" y="181.133px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:50px;">Houston</text>
    <g transform="matrix(50,0,0,50,249.972,116.383)">
    </g>
    <text x="94.308px" y="116.383px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:50px;">Boston</text>
    <g transform="matrix(50,0,0,50,257.422,55.791)">
    </g>
    <text x="46.191px" y="55.791px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:50px;">New <tspan x="159.204px 187.964px 215.771px " y="55.791px 55.791px 55.791px ">Yor</tspan>k</text>
</svg>

 

text-test-261122.afdesign

[Old Bruce]

I am not sure what you mean by empty text layers. You have the words New York and Boston and Houston in the SVG file.

[Juc1]

1 minute ago, Old Bruce said:

I am not sure what you mean by empty text layers. You have the words New York and Boston and Houston in the SVG file.

I mean the g (group) elements are empty see below for example - the group opens and then closes with nothing inside it - also as you can see in my AD screenshot I have no groups in the layers panel so where are these groups coming from?

<g transform="matrix(50,0,0,50,310.289,181.133)">
    </g>

[Palatino]

29 minutes ago, Juc1 said:

so where are these groups coming from?

[Brian_J]

@Palatino When I save the file with Flatten transforms disabled, I still get empty groups.

[François R]

Just now, Brian_J said:

@Palatino When I save the file with Flatten transforms disabled, I still get empty groups.

Yep:

[Juc1]

Just now, Brian_J said:

@Palatino When I save the file with Flatten transforms disabled, I still get empty groups.

Yes you can see in my original screenshot above that "Flatten transforms" is already checked.

[Palatino]

1 minute ago, Juc1 said:

Yes you can see in my original screenshot above that "Flatten transforms" is already checked.

Yes, I overlooked that. Designer V1:

<?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 400 200" 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;">
    <rect x="50" y="20" width="50" height="50" style="fill:rgb(13,202,242);"/>
    <text x="124.058px" y="181.133px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:50px;">Houston</text>
    <text x="94.308px" y="116.383px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:50px;">Boston</text>
    <text x="46.191px" y="55.791px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:50px;">New <tspan x="159.204px 187.963px 215.771px " y="55.791px 55.791px 55.791px ">Yor</tspan>k</text>
</svg>

 

[Juc1]

5 minutes ago, Palatino said:

Yes, I overlooked that. Designer V1:

<?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 400 200" 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;">
    <rect x="50" y="20" width="50" height="50" style="fill:rgb(13,202,242);"/>
    <text x="124.058px" y="181.133px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:50px;">Houston</text>
    <text x="94.308px" y="116.383px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:50px;">Boston</text>
    <text x="46.191px" y="55.791px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:50px;">New <tspan x="159.204px 187.963px 215.771px " y="55.791px 55.791px 55.791px ">Yor</tspan>k</text>
</svg>

 

Yeah that is how I would expect the SVG file to look - so it looks like a V2 bug ?

[Palatino]

1 minute ago, Juc1 said:

so it looks like a V2 bug ?

Yes. The transformation is resolved correctly, but then the transformation group is not deleted.

[Brian_J]

I agree... bug. I created a new file, saved it in Designer v1 and v2, and got the same results as @Palatino — v1 code is clean, v2 has the empty groups.

[Palatino]

18 minutes ago, Brian_J said:

v1 code is clean,

Well, it could be a bit nicer: 😉

<?xml version="1.0" encoding="utf-8"?>
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
    <rect fill="#0dcaf2" height="50" width="50" x="50" y="20"/>
    <g font-family="ArialMT, Arial, sans-serif" font-size="50">
        <text x="124.06" y="181.13">Houston</text>
        <text x="94.308" y="116.383">Boston</text>
        <text x="46.191" y="55.791">New York</text>
    </g>
</svg>

 

[Brian_J]

2 minutes ago, Palatino said:

Well, it could be a bit nicer: 😉

Indeed! 👍 Let me rephrase that... The v1 code doesn't have empty groups, but still needs some work. 🙂 

[Juc1]

On a side note re my original screenshot above why does Designer break up words like "New York" into "New", "Yor" and "k" - which then need multiple x y coordinates? I know this can be turned off in svg export options with longer text spans but what is the benefit / point of doing it, why is breaking up words even an option? why would anyone want words broken up in their SVG?

[Old Bruce]

19 hours ago, Juc1 said:

On a side note re my original screenshot above why does Designer break up words like "New York" into "New", "Yor" and "k" - which then need multiple x y coordinates? 

Could be due to some kerning applied in the original.

[GarryP]

This thread got a bit ‘off track’ near the end, before I 'resurrected' it, but I’m wondering if this needs a bug report creating for it.

I’ve noticed that I sometimes find ‘superfluous’ groups with transform attributes in the exported SVGs.

For example, in Designer, I can create a new document, add some Artistic Text, move the text and then export the document to SVG.

When I do this I get the following SVG:

<?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 1920 1080" 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,609.969,481.812)">
        <g transform="matrix(385.309,0,0,385.309,1175.72,428)">
        </g>
        <text x="191px" y="428px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:385.309px;">TEXT</text>
    </g>
</svg>

Note the group which contains a transform attribute but has no contents.

If I set “Flatten Transforms” ON in the export settings (Export Dialog) I get this:

<?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 1920 1080" 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(385.309,0,0,385.309,1785.69,909.812)">
    </g>
    <text x="800.969px" y="909.812px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:385.309px;">TEXT</text>
</svg>

...which still has a strange ‘transformed but empty' group.

I think this needs reporting as a bug, which I can do if necessary, unless someone can give a good explanation for what’s happening.
 

[Juc1]

@GarryP yeah that is the same problem I mentioned above = creating garbage / phantom HTML so yeah I would call it a bug.

[v_kyr]

1 hour ago, Juc1 said:

@GarryP yeah that is the same problem I mentioned above = creating garbage / phantom HTML so yeah I would call it a bug.

That's XML code (XML format) so not to mixup with HTML. No Affinity app generates HTML code so far.

2 hours ago, GarryP said:

but I’m wondering if this needs a bug report creating for it.

That is already known very long time and thus possibly might have an internal bug or tracking number! - But in order to get sure it get's looked after, I would report it (even again).

[Juc1]

51 minutes ago, v_kyr said:

That's XML code (XML format) so not to mixup with HTML. No Affinity app generates HTML code so far.

OK thanks so SVG is an HTML tag but the content of the SVG tag / file (ie as seen on the page source of a web page) is XML.

[v_kyr]

1 hour ago, Juc1 said:

OK thanks so SVG is an HTML tag but the content of the SVG tag / file (ie as seen on the page source of a web page) is XML.

Yes, as can be also seen by/in the SVG header generated by Affinity apps...

Quote

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

Note however, that there are several ways to embed SVG into HTML, seven of those are shown here (you may have to use a web translator in order to translate this in german written site entry) ...

• Sieben Wege, SVG in HTML-Seiten zu setzen  (german)
• Seven ways to put SVG in HTML pages (translated to english)

[GarryP]

Reported as a bug here: https://forum.affinity.serif.com/index.php?/topic/198524-svg-export-can-contain-‘superfluous’-transformed-but-empty-groups/

[Juc1]

14 hours ago, v_kyr said:

Yes, as can be also seen by/in the SVG header generated by Affinity apps...

Note however, that there are several ways to embed SVG into HTML, seven of those are shown here (you may have to use a web translator in order to translate this in german written site entry) ...

• Sieben Wege, SVG in HTML-Seiten zu setzen  (german)
• Seven ways to put SVG in HTML pages (translated to english)

Ah interesting - I mostly use #3 Write SVG directly into the HTML markup - so I can target for animation.