Exporting Artboards to SVG always create a clipPath

[CTKJOSE]

Let me just get it out I just really hate the Export Persona!

Im working in some icons for a webfont, this time I decided to use Artboards instead of slices.

When I export (using the export persona or the Export menu option) the SVG generated always include a clipPath even when the dartboard is the same size of the document and the layer only has a single curve (flatten).

Is there any way to avoid this?

 

[v_kyr]

Not sure how you exported from the Export Persona, during my tryout with ADe V1 and a simple Artboard, there's no clipPath generated on export.

<?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 1400 580" 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 id="Artboard1" x="0" y="0" width="1400" height="580" style="fill:none;"/>
    <g id="Artboard11" serif:id="Artboard1">
        <ellipse cx="262" cy="230" rx="164" ry="143" style="fill:rgb(182,52,52);"/>
        <rect x="623" y="219" width="332" height="287" style="fill:rgb(52,78,182);"/>
    </g>
</svg>

 

[CTKJOSE]

@v_kyr Indeed when I tried with a new document and simple shapes it works, so I tried to recreate the clipping issue and this is what I notice:

(PS: Im on Affinity Designer 2.0.4)

1. I have a particular curve in the artboard when exported by itself the svg is OK.

<svg width="100%" height="100%" viewBox="0 0 16 16" 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 id="person-ok" x="0" y="0" width="16" height="16" style="fill:none;"/>
    <g id="person-ok1" serif:id="person-ok">
        <path id="shape-made-solid" d="M8,8C9.646,8 11,6.646 11,5C11,3.354 9.646,2 8,2C6.354,2 5,3.354 5,5C5,6.646 6.354,8 8,8ZM14,13C14,14 13,14 13,14L3,14C3,14 2,14 2,13C2,12 3,9 8,9C13,9 14,12 14,13Z" style="fill-rule:nonzero;"/>
    </g>
</svg>

2. When I add another shape/curve to the artboard the exported svg creates the clippath:

<svg width="100%" height="100%" viewBox="0 0 16 16" 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 id="person-clipping" x="0" y="0" width="16" height="16" style="fill:none;"/>
    <clipPath id="_clip1">
        <rect id="person-clipping1" serif:id="person-clipping" x="0" y="0" width="16" height="16"/>
    </clipPath>
    <g clip-path="url(#_clip1)">
        <path id="shape-made-solid" d="M7.999,8.023C9.644,8.023 10.999,6.669 10.999,5.023C10.999,3.377 9.644,2.023 7.999,2.023C6.353,2.023 4.999,3.377 4.999,5.023C4.999,6.669 6.353,8.023 7.999,8.023ZM13.999,13.023C13.999,14.023 12.999,14.023 12.999,14.023L2.999,14.023C2.999,14.023 1.999,14.023 1.999,13.023C1.999,12.023 2.999,9.023 7.999,9.023C12.999,9.023 13.999,12.023 13.999,13.023Z" style="fill-rule:nonzero;"/>
        <path d="M10.004,1.47L10.009,3.018L5.989,3.011L5.989,1.486L3.972,0.982L8.015,-0L12.025,0.953L10.004,1.47Z"/>
    </g>
</svg>

3. If I flatten the two curves using "Geometry => Add" the export svg still includes the clippath.

<svg width="100%" height="100%" viewBox="0 0 16 16" 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 id="person-flatten" x="0" y="0" width="16" height="16" style="fill:none;"/>
    <clipPath id="_clip1">
        <rect id="person-flatten1" serif:id="person-flatten" x="0" y="0" width="16" height="16"/>
    </clipPath>
    <g clip-path="url(#_clip1)">
        <path id="bad-has-clippath" d="M5.989,2.804L5.989,1.486L3.972,0.982L8.015,-0L12.025,0.953L10.004,1.47L10.008,2.803C10.615,3.354 10.999,4.147 10.999,5.023C10.999,6.669 9.644,8.023 7.999,8.023C6.353,8.023 4.999,6.669 4.999,5.023C4.999,4.147 5.382,3.354 5.989,2.804ZM13.999,13.023C13.999,14.023 12.999,14.023 12.999,14.023L2.999,14.023C2.999,14.023 1.999,14.023 1.999,13.023C1.999,12.023 2.999,9.023 7.999,9.023C12.999,9.023 13.999,12.023 13.999,13.023Z"/>
    </g>
</svg>

4. If I re-import the merged SVG I will see the clippath, I delete the clippath, then the shape will export fine.

test_svg_clipping.afdesign

[CTKJOSE]

PS: The exact same drawing exported using slices works as expected with the added bonus that you do not get the extra "<rect>" from the artboard.

[v_kyr]

4 hours ago, CTKJOSE said:

2. When I add another shape/curve to the artboard the exported svg creates the clippath:

Hmm not in my case with V1 here. - Though I've used the drawings from your SVG file since ADe V1 can't open ADe V2 .afdesign files.

<?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 16 16" 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 id="Artboard1" x="0" y="0" width="16" height="16" style="fill:none;"/>
    <g id="Artboard11" serif:id="Artboard1">
        <g id="shape-made-solid" transform="matrix(1,0,0,1,0.001,1)">
            <path d="M7.999,8.023C9.644,8.023 10.999,6.669 10.999,5.023C10.999,3.377 9.644,2.023 7.999,2.023C6.353,2.023 4.999,3.377 4.999,5.023C4.999,6.669 6.353,8.023 7.999,8.023ZM13.999,13.023C13.999,14.023 12.999,14.023 12.999,14.023L2.999,14.023C2.999,14.023 1.999,14.023 1.999,13.023C1.999,12.023 2.999,9.023 7.999,9.023C12.999,9.023 13.999,12.023 13.999,13.023Z" style="fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(1,0,0,1,0.001,1)">
            <path d="M10.004,1.47L10.009,3.018L5.989,3.011L5.989,1.486L3.972,0.982L8.015,-0L12.025,0.953L10.004,1.47Z"/>
        </g>
    </g>
</svg>

 

4 hours ago, CTKJOSE said:

3. If I flatten the two curves using "Geometry => Add" the export svg still includes the clippath.

Can't reproduce that either ...

And when exporting just the Artboard as SVG (as before) with the Export Persona ...

<?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 16 16" 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 id="Artboard1" x="0" y="0" width="16" height="16" style="fill:none;"/>
    <g id="Artboard11" serif:id="Artboard1">
        <path id="added-curves" d="M14,14.023C14,15.023 13,15.023 13,15.023L3,15.023C3,15.023 2,15.023 2,14.023C2,13.023 3,10.023 8,10.023C13,10.023 14,13.023 14,14.023ZM5.99,3.804L5.99,2.486L3.973,1.982L8.016,1L12.026,1.953L10.005,2.47L10.009,3.803C10.616,4.354 11,5.147 11,6.023C11,7.669 9.645,9.023 8,9.023C6.354,9.023 5,7.669 5,6.023C5,5.147 5.383,4.354 5.99,3.804Z" style="fill-rule:nonzero;"/>
    </g>
</svg>

 

Maybe somebody else, who also uses ADe V2 has to retry here, if it is possibly related to V2 SVG code generation in this case now!

[stokerg]

On 2/21/2023 at 4:50 PM, CTKJOSE said:

PS: The exact same drawing exported using slices works as expected with the added bonus that you do not get the extra "<rect>" from the artboard.

Can you just try moving the two objects down slightly, so they aren't right on the edge of the artboard and then export to SVG again and let me know if you have the clipPath present.  This is the code i got when i moved it down

<?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 16 16" 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 id="person-clipping" x="0" y="0" width="16" height="16" style="fill:none;"/>
    <g id="person-clipping1" serif:id="person-clipping">
        <g id="shape-made-solid" transform="matrix(1,0,0,1,-0.0014336,0.260216)">
            <path d="M8,8C9.646,8 11,6.646 11,5C11,3.354 9.646,2 8,2C6.354,2 5,3.354 5,5C5,6.646 6.354,8 8,8ZM14,13C14,14 13,14 13,14L3,14C3,14 2,14 2,13C2,12 3,9 8,9C13,9 14,12 14,13Z" style="fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(1,0,0,1,0,0.237104)">
            <path d="M10.004,1.47L10.009,3.018L5.989,3.011L5.989,1.486L3.972,0.982L8.015,-0L12.025,0.953L10.004,1.47Z"/>
        </g>
    </g>
</svg>