[Improved SVG Exports for Web Design]

8 hours ago, VIPStephan said:

Guys, make sure to check the SVG export presets, especially the “reduce transformations” checkbox. As to your 800×600 rect element, @gafvert, this is because apparently you exported the whole artboard. Try to select just the objects you want to export, then do File → Export and there is a select field towards the bottom of the export dialog where you should select “selection without background” as export area.

Alternatively, create a slice from your objects in the export persona and export only this slice, not the whole artboard.

@VIPStephan thanks for the tip regarding the reduce transformations checkbox, but I'm having trouble finding it. The only option I can find in the export dialog is "flatten transforms" – is this the same thing?

[Improved SVG Exports for Web Design]

This would be a big plus for me too.

I made a burger icon (basically two lines) and was looking for the output to be something like:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
  <g fill="none" stroke="#000">
    <line y1="12.5" x2="36" y2="12.5"/>
    <line y1="23.5" x2="36" y2="23.5"/>
  </g>
</svg>

Here's the output from Affinity (minus the extra tags/properties I would strip out anyway):

<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
    <rect id="Burger" x="0" y="0" width="36" height="36" style="fill:none;"/>
    <clipPath id="_clip1">
        <rect id="Burger1" serif:id="Burger" x="0" y="0" width="36" height="36"/>
    </clipPath>
    <g clip-path="url(#_clip1)">
        <g transform="matrix(1,0,0,1,3,12.5)">
            <path d="M0,0L30,0" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2px;"/>
        </g>
        <g transform="matrix(1,0,0,1,3,23.5)">
            <path d="M0,0L30,0" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2px;"/>
        </g>
    </g>
</svg>

Just way more complex than it needs to be. Would love to see an improvement on this.