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? 


Win10 Home x64   |   AMD Ryzen 7 2700X @ 3.7GHz   |   16 GB RAM   |   1TB SSD   |   nVidia GTX 1660   |   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.3 ◆ Affinity Photo 1.7.3 ◆ 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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Please note the Annual Company Closure section in the Terms of Use. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.