How to apply rotation and scale to vector elements

[guategeek]

I have started to author SVG elements for web design using affinity designer, but the svg code it outputs is quite heavy and messy (using copy as svg option in preferences).

In this case I think its because I have an object that is rotated 180 degrees, so its running transformations on my paths and groups in the SVG code. Is there any way to "bake" the transforms in designer. So say I move, rotate, and scale an object, then I would like to bake its transforms so that the shape is rewritten (svg code wise) as not rotated or scaled, in essence applying my modifications to the objects underlying definition. This is a very common practice in 3D modeling.

<svg
  width="100%"
  height="100%"
  viewBox="0 0 1152 150"
  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:1.41421;">
    <g transform="matrix(1,0,0,1,-4757,-100)">
        <g id="Header-Shape" serif:id="Header Shape" transform="matrix(-0.848306,-1.03888e-16,1.26688e-16,-1.03448,5909,5615.86)">
            <path d="M1358,5187C1131.5,5217.42 905.5,5235.33 679,5235.33C452.833,5235.33 226.167,5217.47 0,5187.13L0,5332L1358,5332L1358,5187Z" style="fill:url(#_Linear1);"/>
        </g>
        <g id="Header-border" serif:id="Header border" transform="matrix(1,0,0,1,-843,-237)">
            <path d="M6752,486.861C6560.14,455.482 6367.86,437 6176,437C5983.86,437 5792.14,455.529 5600,487L5600,486C5792.14,454.529 5983.86,436 6176,436C6367.86,436 6560.14,454.482 6752,485.861L6752,486.861Z" style="fill:rgb(46,46,46);"/>
        </g>
        <g id="Header-border1" serif:id="Header border" transform="matrix(1,0,0,1,-843,-238)">
            <path d="M6752,486.861C6560.14,455.482 6367.86,437 6176,437C5983.86,437 5792.14,455.529 5600,487L5600,486C5792.14,454.529 5983.86,436 6176,436C6367.86,436 6560.14,454.482 6752,485.861L6752,486.861Z" style="fill:rgb(56,56,56);"/>
        </g>
    </g>
    <defs>
        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-3.24818e-14,-145,176.823,-2.66361e-14,1358,5332)"><stop offset="0" style="stop-color:rgb(64,64,64);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(51,51,51);stop-opacity:1"/></linearGradient>
    </defs>
</svg>

This is what I get right now as output, but I would like to not have any of the "Transform=" and "gradientTransform=" attributes, more like the follwoing striped down code, which dousn't work because of how Affinity outputting the code:

<svg
  width="100%"
  height="100%"
  viewBox="0 0 1152 150"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg">
    <g>
      <path style="fill:url(#a);" d="M1358,5187C1131.5,5217.42 905.5,5235.33 679,5235.33C452.833,5235.33 226.167,5217.47 0,5187.13L0,5332L1358,5332L1358,5187Z"/>
      <path style="fill:rgb(46,46,46);" d="M6752,486.861C6560.14,455.482 6367.86,437 6176,437C5983.86,437 5792.14,455.529 5600,487L5600,486C5792.14,454.529 5983.86,436 6176,436C6367.86,436 6560.14,454.482 6752,485.861L6752,486.861Z"/>
      <path style="fill:rgb(56,56,56);" d="M6752,486.861C6560.14,455.482 6367.86,437 6176,437C5983.86,437 5792.14,455.529 5600,487L5600,486C5792.14,454.529 5983.86,436 6176,436C6367.86,436 6560.14,454.482 6752,485.861L6752,486.861Z"/>
    </g>
    <defs>
      <linearGradient id="a" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse">
        <stop offset="0" style="stop-color:rgb(64,64,64);stop-opacity:1"/>
        <stop offset="1" style="stop-color:rgb(51,51,51);stop-opacity:1"/>
      </linearGradient>
    </defs>
</svg>

 

[Aammppaa]

Do you get the same result if you export as SVG rather than copy paste? 

[v_kyr]

2 hours ago, Aammppaa said:

Do you get the same result if you export as SVG rather than copy paste? 

That just influences a worser SVG code formating (aka no well formed indents) than anything else SVG code generation wise. - Only one or two SVG export "more button options" do slightly influence the way SVG code is generated.

[guategeek]

Well, one thing in the SVG export that did help was the "flatten transforms" option, that fixed the transforms on paths and such. I then can use SVGO's Missing GUI to clean things up more. Unfortunately, the gradient transforms stay after that, so I then often rewrite the gradient code and clean up a bunch of other things by hand. It's not an easy or fun process, for sure and affinity is always exporting a ton of extra junk.

It's really too bad that I can't just use copy and paste and get nice clean code like when I tried the sketch free trial. I need to use the tools I have though, and sketch is not cross-platform which Designer is.