guategeek Posted May 23, 2019 Posted May 23, 2019 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> Quote
Aammppaa Posted May 23, 2019 Posted May 23, 2019 Do you get the same result if you export as SVG rather than copy paste? Quote Win10 Home x64 | AMD Ryzen 7 2700X @ 3.7GHz | 48 GB RAM | 1TB SSD | nVidia GTX 1660 | Wacom Intuos Pro
v_kyr Posted May 24, 2019 Posted May 24, 2019 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. Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2
guategeek Posted May 24, 2019 Author Posted May 24, 2019 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. Quote
Recommended Posts
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.