Designer export to SVG produces different result under V2 compared to V1

[Peter Em]

I have designer project file that I created under v1 (1.10.8), that I export as SVG and import into another program (FWIW Ignition HMI).  I upgraded to V2 (2.3.0) of Designer and this week I went to make some changes to the file, and then export as SVG.  The problem is that using (what I believe are) exactly the same options under V2 as I used under V1 I get a different SVG file with additional transform tags (as well as other changes).  My main questions are:

1. Is it possible to export from V2 to produce the same file as was exported from V1?
2. Are the differences between the versions a real issue?

The V1 exported SVG is 

<?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 284 511" 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 id="BasePlateTest">
        <path d="M283.549,309.677l0.084,0.085l0,117.484l-83.074,83.075l-117.485,-0l-83.074,-83.075l0,-117.484l0.084,-0.085l0,-309.677l283.465,0l-0,309.677Z"/>
        <circle id="Ring" cx="141.817" cy="368.504" r="130.394" style="fill:#b7b7b7;"/>
        <rect id="Inset" x="14.258" y="14.173" width="255.118" height="192.756" style="fill:#fff;"/>
    </g>
    <g id="Text">
        <text id="Text1" x="53.608px" y="51.69px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">T<tspan x="71.608px 91.629px " y="51.69px 51.69px ">ex</tspan>t Line 1</text>
        <text id="Text2" x="53.608px" y="85.29px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">T<tspan x="71.608px 91.629px " y="85.29px 85.29px ">ex</tspan>t Line 2</text>
        <text id="Text3" x="53.608px" y="119.13px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">T<tspan x="71.608px 91.629px " y="119.13px 119.13px ">ex</tspan>t Line 3</text>
        <text id="Text4" x="53.608px" y="152.73px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">T<tspan x="71.608px 91.629px " y="152.73px 152.73px ">ex</tspan>t Line 4</text>
        <text id="Text5" x="53.608px" y="186.33px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">T<tspan x="71.608px 91.629px " y="186.33px 186.33px ">ex</tspan>t Line 5</text>
    </g>
</svg>

But the V2 exported SVG is 

<?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 284 511" 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 id="BasePlateTest">
        <path d="M283.549,309.677l0.084,0.085l0,117.484l-83.074,83.075l-117.485,-0l-83.074,-83.075l0,-117.484l0.084,-0.085l0,-309.677l283.465,0l-0,309.677Z"/>
        <circle id="Ring" cx="141.817" cy="368.504" r="130.394" style="fill:#b7b7b7;"/>
        <rect id="Inset" x="14.258" y="14.173" width="255.118" height="192.756" style="fill:#fff;"/>
    </g>
    <g id="Text">
        <g id="Text1" transform="matrix(36,0,0,36,227.719,51.6895)">
        </g>
        <text x="53.608px" y="51.69px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">T<tspan x="71.608px 91.629px " y="51.69px 51.69px ">ex</tspan>t Line 1</text>
        <g id="Text2" transform="matrix(36,0,0,36,227.719,85.2895)">
        </g>
        <text x="53.608px" y="85.29px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">T<tspan x="71.608px 91.629px " y="85.29px 85.29px ">ex</tspan>t Line 2</text>
        <g id="Text3" transform="matrix(36,0,0,36,227.719,119.13)">
        </g>
        <text x="53.608px" y="119.13px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">T<tspan x="71.608px 91.629px " y="119.13px 119.13px ">ex</tspan>t Line 3</text>
        <g id="Text4" transform="matrix(36,0,0,36,227.719,152.73)">
        </g>
        <text x="53.608px" y="152.73px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">T<tspan x="71.608px 91.629px " y="152.73px 152.73px ">ex</tspan>t Line 4</text>
        <g id="Text5" transform="matrix(36,0,0,36,227.719,186.33)">
        </g>
        <text x="53.608px" y="186.33px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">T<tspan x="71.608px 91.629px " y="186.33px 186.33px ">ex</tspan>t Line 5</text>
    </g>
</svg>

Thus the V2 export has the additional <g> tags with a transform in them, and the ID has been moved from the <text> to the <g> tags.  But I don't know enough about SVG to know if this is an issue or not.

I still have the original SVG exported from V1, and loading up the original project file in V1 still results in the original SVG export.

Note that even though I loaded the V1 project into V2, I never saved it from V2, so it remains as a V1 project.

I've attached the V1 project file

These are the V1 SVG preset options that I am using, and which I also set in V2 when doing the export:

And finally, in the project file there are 3 layers.  I was only exporting the first 2 layers, and ignoring the 3rd layer (which is hidden by the second layer).  Ideally I should delete that layer before uploading here, but I want to use exactly the same file that I created in 2022.

Light-Plate.afdesign

[v_kyr]

2 hours ago, Peter Em said:

Are the differences between the versions a real issue?

Depends on, if any other third party app might have problems then with showing up unrelated SVG text ID transformations or not.

2 hours ago, Peter Em said:

Thus the V2 export has the additional <g> tags with a transform in them, and the ID has been moved from the <text> to the <g> tags.  But I don't know enough about SVG to know if this is an issue or not.

Usually it shouldn't be a problem for SVG capable apps like all webbrowsers and apps like Inkscape etc. But on the other side the code isn't size wise (lines of XML code) as compact any more here then.

2 hours ago, Peter Em said:

These are the V1 SVG preset options that I am using, and which I also set in V2 when doing the export ...

Are you sure you've used the exact same settings here (especially enabling "[x] Flatten transforms")?  -  And does disabling "[ ] Use relative coordinates" changes anything here for v2.3 SVG code generation?

Other than that and as far as you didn't altered the initial ADe file in some strange way, it looks to me like unnecessary (unrelated) added ID transforms here, as the text IDs aren't grouped to the related text. And so on a reimport will get lost, as they are not related/associated to any text entry anymore here then.- So maybe some sort of v2 SVG code export bug.

[Peter Em]

2 hours ago, v_kyr said:

Are you sure you've used the exact same settings here (especially enabling "[x] Flatten transforms")?  -  And does disabling "[ ] Use relative coordinates" changes anything here for v2.3 SVG code generation?

These are the options I used for the v2.3 SVG export

Which resulted in the same file as mentioned previously.  Unchecking "Use relative coordinates" doesn't change anything significant in the v2.3 export.

However, in v2.3 when I simply uncheck the "Flatten Image", I get this in v2.3, where the IDs have been added to an additional <g> group around all the other tags:

<?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 284 511" 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(0.24,0,0,0.24,0.0843791,0)">
        <g id="BasePlateTest">
            <path d="M1181.1,1290.32l0.352,0.351l-0,489.52l-346.143,346.143l-489.52,-0l-346.143,-346.143l0,-489.52l0.352,-0.351l-0,-1290.32l1181.1,0l0,1290.32Z"/>
            <g id="Ring" transform="matrix(2.27325,0,0,2.89764,-1428.1,-3502.11)">
                <ellipse cx="888" cy="1738.5" rx="239" ry="187.5" style="fill:#b7b7b7;"/>
            </g>
            <g id="Inset" transform="matrix(1.73976,0,0,1.31448,-941.306,-799.303)">
                <rect x="575" y="653" width="611" height="611" style="fill:#fff;"/>
            </g>
        </g>
        <g id="Text">
            <g id="Text1" transform="matrix(1,0,0,1,-85.9863,-2345.63)">
                <g transform="matrix(150,0,0,150,1034.46,2561)">
                </g>
                <text x="309px" y="2561px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:150px;">T<tspan x="384px 467.423px " y="2561px 2561px ">ex</tspan>t Line 1</text>
            </g>
            <g id="Text2" transform="matrix(1,0,0,1,-85.9863,-2205.63)">
                <g transform="matrix(150,0,0,150,1034.46,2561)">
                </g>
                <text x="309px" y="2561px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:150px;">T<tspan x="384px 467.423px " y="2561px 2561px ">ex</tspan>t Line 2</text>
            </g>
            <g id="Text3" transform="matrix(1,0,0,1,-85.9863,-2064.63)">
                <g transform="matrix(150,0,0,150,1034.46,2561)">
                </g>
                <text x="309px" y="2561px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:150px;">T<tspan x="384px 467.423px " y="2561px 2561px ">ex</tspan>t Line 3</text>
            </g>
            <g id="Text4" transform="matrix(1,0,0,1,-85.9863,-1924.63)">
                <g transform="matrix(150,0,0,150,1034.46,2561)">
                </g>
                <text x="309px" y="2561px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:150px;">T<tspan x="384px 467.423px " y="2561px 2561px ">ex</tspan>t Line 4</text>
            </g>
            <g id="Text5" transform="matrix(1,0,0,1,-85.9863,-1784.63)">
                <g transform="matrix(150,0,0,150,1034.46,2561)">
                </g>
                <text x="309px" y="2561px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:150px;">T<tspan x="384px 467.423px " y="2561px 2561px ">ex</tspan>t Line 5</text>
            </g>
        </g>
    </g>
</svg>

 

And if I do the same thing (uncheck flatten image) in V1.10, I get this SVG file, which also has the ID attached to a surrounding group <g> tag (but I have no idea why the matrix transform popped into existance):

<?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 284 511" 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(0.24,0,0,0.24,0.0843791,0)">
        <g id="BasePlateTest">
            <path d="M1181.1,1290.32l0.352,0.351l-0,489.52l-346.143,346.143l-489.52,-0l-346.143,-346.143l0,-489.52l0.352,-0.351l-0,-1290.32l1181.1,0l0,1290.32Z"/>
            <g id="Ring" transform="matrix(2.27325,0,0,2.89764,-1428.1,-3502.11)">
                <ellipse cx="888" cy="1738.5" rx="239" ry="187.5" style="fill:#b7b7b7;"/>
            </g>
            <g id="Inset" transform="matrix(1.73976,0,0,1.31448,-941.306,-799.303)">
                <rect x="575" y="653" width="611" height="611" style="fill:#fff;"/>
            </g>
        </g>
        <g id="Text">
            <g id="Text1" transform="matrix(1,0,0,1,-85.9863,-2345.63)">
                <text x="309px" y="2561px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:150px;">T<tspan x="384px 467.423px " y="2561px 2561px ">ex</tspan>t Line 1</text>
            </g>
            <g id="Text2" transform="matrix(1,0,0,1,-85.9863,-2205.63)">
                <text x="309px" y="2561px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:150px;">T<tspan x="384px 467.423px " y="2561px 2561px ">ex</tspan>t Line 2</text>
            </g>
            <g id="Text3" transform="matrix(1,0,0,1,-85.9863,-2064.63)">
                <text x="309px" y="2561px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:150px;">T<tspan x="384px 467.423px " y="2561px 2561px ">ex</tspan>t Line 3</text>
            </g>
            <g id="Text4" transform="matrix(1,0,0,1,-85.9863,-1924.63)">
                <text x="309px" y="2561px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:150px;">T<tspan x="384px 467.423px " y="2561px 2561px ">ex</tspan>t Line 4</text>
            </g>
            <g id="Text5" transform="matrix(1,0,0,1,-85.9863,-1784.63)">
                <text x="309px" y="2561px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:150px;">T<tspan x="384px 467.423px " y="2561px 2561px ">ex</tspan>t Line 5</text>
            </g>
        </g>
    </g>
</svg>

Personally I am thinking export bug, but I am not experienced enough with either Affinity or SVG to conclusively say this.

 

Edited December 18, 2023 by Peter Em

[v_kyr]

1 hour ago, Peter Em said:

Personally I am thinking export bug, but I am not experienced enough with either Affinity or SVG to conclusively say this.

You can easily find out that the following exported SVG file from your initial posting has an odd behavior ...

5 hours ago, Peter Em said:

But the V2 exported SVG is 

<?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 284 511" 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 id="BasePlateTest">
        <path d="M283.549,309.677l0.084,0.085l0,117.484l-83.074,83.075l-117.485,-0l-83.074,-83.075l0,-117.484l0.084,-0.085l0,-309.677l283.465,0l-0,309.677Z"/>
        <circle id="Ring" cx="141.817" cy="368.504" r="130.394" style="fill:#b7b7b7;"/>
        <rect id="Inset" x="14.258" y="14.173" width="255.118" height="192.756" style="fill:#fff;"/>
    </g>
    <g id="Text">
        <g id="Text1" transform="matrix(36,0,0,36,227.719,51.6895)">
        </g>
        <text x="53.608px" y="51.69px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">T<tspan x="71.608px 91.629px " y="51.69px 51.69px ">ex</tspan>t Line 1</text>
        <g id="Text2" transform="matrix(36,0,0,36,227.719,85.2895)">
        </g>
        <text x="53.608px" y="85.29px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">T<tspan x="71.608px 91.629px " y="85.29px 85.29px ">ex</tspan>t Line 2</text>
        <g id="Text3" transform="matrix(36,0,0,36,227.719,119.13)">
        </g>
        <text x="53.608px" y="119.13px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">T<tspan x="71.608px 91.629px " y="119.13px 119.13px ">ex</tspan>t Line 3</text>
        <g id="Text4" transform="matrix(36,0,0,36,227.719,152.73)">
        </g>
        <text x="53.608px" y="152.73px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">T<tspan x="71.608px 91.629px " y="152.73px 152.73px ">ex</tspan>t Line 4</text>
        <g id="Text5" transform="matrix(36,0,0,36,227.719,186.33)">
        </g>
        <text x="53.608px" y="186.33px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">T<tspan x="71.608px 91.629px " y="186.33px 186.33px ">ex</tspan>t Line 5</text>
    </g>
</svg>

Namely, since your ADe file initially has defined text layer names (Text1, Text2, Text3 ...) which on a SVG export should be exported in a way, that they are preserved in SVG code as --> id="Text1",  id="Text2", id="Text3" ... etc. - But in/for the above shown SVG code they aren't preserved, since if you reopen (import) that by v2 generated SVG code in ADe again (via File -> Open...) you will recognize that for that V2 SVG file all those layer text IDs (ADe text layer names) are gone, meaning the text layers don't contain them anymore.

That's what I meant previously with unrelated/unassociated IDs here. That these group transforms here ...

Quote

<g id="Text1" transform="matrix(36,0,0,36,227.719,51.6895)">
 </g>

... stand alone on their own (without included text content) don't make much sense at all. - And that looks like a SVG export BUG to me!

V1 exported SVG reloaded into ADe ...

 

V2 exported SVG reloaded into ADe ...

 

 

 

[Peter Em]

55 minutes ago, v_kyr said:

And that looks like a SVG export BUG to me!

So it looks like I'm going back to V1 for my current round of editing (which is more than just this single file).  Fortunately I still have all the original files untouched by V2.

[lacerto]

In context of this singular case (though without having seen the source document structure), it seems as if SVG export/import had weakened, but if objects are actually given names in Affinity apps (shown non-grayed in the Layers palette), they do get exported with ids, including additional serif-ids, even if typically buried in (at least seemingly) superfluous containers.

a) Original Designer source with auto-names, explicit text layer names, explicit Layer containers, and named Group containers:

b) Exported to SVG and opened back:

c) In SVG Code (viewed in Notepad ++)

In light of this example, it seems that the most effective way to organize a complex design is to simply just give Affinity objects (regular layers) names, instead of grouping and organizing them in Layer layers. At least if exchanging data via SVG.

[NathanC]

I'm not sure why this particular SVG Code/Formatting on export has changed in between app versions but i've now replicated and logged this with the developers for further review.