SVG Hierarchy, relative x y coordinates?

[Patrick C]

So I'm not sure if I'm missing something.

When I export a file with layers and groups into SVG and have "relative coordinates" checked, it seems that the coordinates of the elements within a group are not relative to the parent at all?

My goal is to have a hierarchy of all my layers and have their x y coordinates be relative to their parent object. Right now it seems as though the x y coordinates are always relative to the 'canvas'
I am only mildly familiar with the SVG code structure so I may be misunderstanding what I am reading, but a lot of the x y values I am reading do not seem relative to their parents. 

I will try to provide an example soon. I am currently unable to access AD at the moment and I just wanted to see if some knowledgeable folk would know why "relative coordinates" are not exactly relative?

Thanks,

[v_kyr]

If it's always like that reproducable, it might be they overlooked to change and add groups and nested layers etc. also then into the chain of SVG code generation. In the past there were some things fixed done for SVG export with "relative coordinates" but maybe not taken into account under all circumstances then. - See:

• SVG Relative Coordinates not quite relative

BTW an interesting read in relation to SVG and relative positioning is this here.

 

[Patrick C]

Thanks for the reply v_kyr. I saw that thread. 
I'd be kinda surprised if it was overlooked and nobody noticed but I guess there may not be a lot of people using AD SVG exports.

38 minutes ago, v_kyr said:

BTW an interesting read in relation to SVG and relative positioning is this here.

I took a look at that page earlier; seems like exactly what I want but I'm not sure how I would go about making certain layers or groups be treated as SVGs within the export SVG. 

[v_kyr]

1 hour ago, Dclone2 said:

I'm not sure how I would go about making certain layers or groups be treated as SVGs within the export SVG

No chance, it doesn't support this. - Also when loading a file with nested SVG contents it won't position it correctly related to the parent (nested in SVG) coordinate system here, as you can try out with that above article's final bird-nest example.

[Patrick C]

So experimenting a bit yielded this. This is using relative transforms and the coordinates are clearly not "relative"

Structure:

- LVL1(Rect) SVG has  x=63.11 y=6.023 and is correct
- - LVL1_2(Grp) Seems groups don't get coordinates! Oh well

- - - LVL 1(Rect) SVG has x=63.11 y=6.023 and should be x=0 y=0

- - - - LVL1_2(Grp) Seems groups don't get coordinates! Oh well

- - - - - LVL 1(Rect) SVG has x=63.11 y=6.023 and should be x=0 y=0

- LVL2(Grp) Seems groups don't get coordinates! Oh well
- - LVL2_1(Grp) Seems groups don't get coordinates! Oh well

- - - LVL 2_3(Rect) Seems groups don't get coordinates! Oh well

 

Even though all boxes are aligned, top-left corner, and nested, somehow all boxes have the same x y coordinates. The nested ones should definitely have x=0 y=0 coordinates if they should be relative to their parents. If I'm misunderstanding what the use of "use relative coordinates" is, please let me know :/

SVGTester.afdesign

[v_kyr]

Looks to always writes out absolute initial coordinate positions then instead. I don't think it takes parents coordinates into account at all.

[firstdefence]

Just to give a comparison, this is how sketch writes to SVG, I've tried to mirror your test doc.

<?xml version="1.0" encoding="UTF-8"?>
<svg width="630px" height="400px" viewBox="0 0 630 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
    <title>Untitled</title>
    <desc>Created with Sketch.</desc>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="LVL1-Group" fill-rule="nonzero" stroke="#979797">
            <g id="LVL1_2">
                <g id="LVL1_3">
                    <rect id="LVL1_3-Rectangle" x="0.5" y="0.5" width="79" height="79"></rect>
                </g>
                <rect id="LVL_1_2-Rectangle" x="0.5" y="0.5" width="159" height="159"></rect>
            </g>
            <rect id="LVL1-Rectangle" x="0.5" y="0.5" width="399" height="399"></rect>
        </g>
        <g id="LVL2" transform="translate(470.000000, 0.000000)" fill-rule="nonzero" stroke="#979797">
            <g id="LVL2_1">
                <rect id="LVL2_3-Rectangle-" x="0.5" y="0.5" width="159" height="159"></rect>
            </g>
        </g>
    </g>
</svg>

 

[Patrick C]

Thanks @firstdefence. I wish Sketch was on Windows! I would totally use that for my purposes...

I'm hoping there are plans to "fix" SVG settings in later versions. Stuff like Symbols and embedded images are also broken  

[v_kyr]

Well, Sketch isn't overall that much better here, it just performs a translate transform move and keeps initial object coordinate positions. See also ...

• The Best Way to Export an SVG from Sketch

Further it seems too to have SVG problems ...

• Exploring ways to export clean .svg

An interesting read about SVG coordinate systems is this series here ...

• Understanding SVG Coordinate Systems & Transformations (Part 1) – The viewport, viewBox, and preserveAspectRatio
• Understanding SVG Coordinate Systems & Transformations (Part 2) – The transform Attribute
• Understanding SVG Coordinate Systems & Transformations (Part 3) – Establishing New Viewports

For inspecting and determining SVG contents etc., sometimes also tools like MacSVG can be handy and of help.