Jump to content
guategeek

How to apply rotation and scale to vector elements

Recommended Posts

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>

 

Share this post


Link to post
Share on other sites

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


Win7 Ultimate x64   |   i5-3570K @ 3.4GHz   |   16 GB RAM   |   120 GB SSD   |   nVidia GTX 660 Ti   |   Huion 1060 Plus

How I make GIFs >>> ScreenToGIF (Windows only, Open Source, Portable, ~600kB)

Share this post


Link to post
Share on other sites
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.


☛ Affinity Designer 1.7.0 ◆ Affinity Photo 1.7.0 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×