Export to SVG - code structure

[Chris Hardcastle]

Hi, I'm trying to understand how the SVG code is structured on export from Designer. For example, if I create a rectangle and name it 'Paul' when I copy to SVG (cmd/ctrl + c) and paste into a text editor the code looks like 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 106 108" 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,-302.425,-181.588)">
        <rect id="Paul" x="302.425" y="181.588" width="105.226" height="107.636" style="fill:rgb(235,235,235);"/>
    </g>
</svg>

If I create a second rectangle and copy to svg I get:

<?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 253 127" 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,-302.425,-181.588)">
        <rect id="Paul" x="302.425" y="181.588" width="105.226" height="107.636" style="fill:rgb(235,235,235);"/>
        <rect id="Peter" x="457.696" y="197.683" width="97.294" height="110.312" style="fill:rgb(235,235,235);"/>
    </g>
</svg>

All making sense so far but if I alt + drag either of those rectangles and call the third one 'Jane' the code looks like 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 421 142" 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,-302.425,-181.588)">
        <rect id="Paul" x="302.425" y="181.588" width="105.226" height="107.636" style="fill:rgb(235,235,235);"/>
        <rect id="Peter" x="457.696" y="197.683" width="97.294" height="110.312" style="fill:rgb(235,235,235);"/>
        <g id="Jane" transform="matrix(1,0,0,1,167.459,15.502)">
            <rect x="457.696" y="197.683" width="97.294" height="110.312" style="fill:rgb(235,235,235);"/>
        </g>
    </g>
</svg>

It not clear to me why this action has created a group called Jane (g id="Jane") rather than add another rect id to the list?

Does anyone have any intel on the reasons for this?

Thanks,
Chris

 

[Guest]

I've been pulling my hair out with Affinity's SVG support as it's full of unnecessary groups, matrix transforms, namespaces, etc. I did however find that the export preset 'SVG (digital - small size)' is the cleanest SVG I've been able to get out of Affinity. The ids/names and groups you define are exported without any additional cruft. If would be nice if there was support for document styles (so they weren't all in-line) as well as symbol definitions and links for reuse. The 'copy as SVG' preference has been useless for my needs as I end up spending far too much time having to fix/clean-up the code to use it in other apps.

[Chris Hardcastle]

Thanks Brian, I've been trying to copy from Affinity and paste into Cavalry (disclaimer - I'm part of the team working on Cavalry) and this has been causing us headaches trying to manage copying the ids over as well as maintaining the hierarchy of shapes. I'll check out the export workflow and see if that's any cleaner for us 👍

[Guest]

Ooh, @mainframenorth nice to see you guys are trying to smooth the workflow between Affinity and Cavalry.

[Chris Hardcastle]

👋 Hi Bryan, I'm Chris (can't figure out how to change my profile name (!) - must have signed up originally via Mainframe but I'm also Scene Group, the co. developing Cavalry).

Yes, we're definitely keen to make this workflow easier. Native support obviously the holy grail but SVG's a good universal format for other illustration apps.

[walt.farrell]

3 minutes ago, mainframenorth said:

I'm Chris (can't figure out how to change my profile name (!) -

https://forum.affinity.serif.com/index.php?/settings/username/