Abinash Mohanty Posted July 11, 2019 Share Posted July 11, 2019 I'm on the latest version of affinity designer, and have created a lot of isometric illustrstions. However, if I export my artwork to svg (web preset), and open them in sketch app, all the gradients are getting converted to images. I switched back to affinity to inspect these gradients, and I found these are just linear gradients without any special filters. If use the same gradients without isometric plane, the svg out retains its vector gradients, but exporting these with the isometric shapes, it's producing raster images. Is it a bug? Any solution to it. Because i have to do a lot of rework in that case. And it's not just sketch, but my front-end guys also showed me the number of images it has. let me know if you have any solution to it. Thanks Quote Link to comment Share on other sites More sharing options...
Staff stokerg Posted July 12, 2019 Staff Share Posted July 12, 2019 Hi Abinash Mohanty, I just tried this on a very basic isometric grid, created a shape and applied a gradient and export to SVG using the same preset. When checking the SVG file itself it gave the code below: <?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 842 596" 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:2;"><path d="M343.425,253.327l-44.548,25.719l34.998,20.206l44.547,-25.72l-34.997,-20.205Z" style="fill:url(#_Linear1);"/><path d="M335.67,247.568l-37.993,-21.935l0,52.138l37.993,21.935l0,-52.138Z" style="fill:url(#_Linear2);"/><path d="M375.853,232.436l-35.439,-20.461l0,43.273l35.439,20.461l0,-43.273Z" style="fill:url(#_Linear3);"/><defs><linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(9.66114,10.7253,-10.7253,9.66114,343.264,266.144)"><stop offset="0" style="stop-color:#ebebeb;stop-opacity:1"/><stop offset="1" style="stop-color:#a3a3a3;stop-opacity:1"/></linearGradient><linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(3.5046,19.9933,-19.9933,3.5046,352.037,230.429)"><stop offset="0" style="stop-color:#ebebeb;stop-opacity:1"/><stop offset="1" style="stop-color:#a3a3a3;stop-opacity:1"/></linearGradient><linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(7.1139,19.0509,-19.0509,7.1139,353.699,227.166)"><stop offset="0" style="stop-color:#ebebeb;stop-opacity:1"/><stop offset="1" style="stop-color:#a3a3a3;stop-opacity:1"/></linearGradient></defs></svg> Unless i'm missing something, that export has produced an SVG without any images inside it. Could you attached your .afdesign file and i'll look into this further. Quote Link to comment Share on other sites More sharing options...
Abinash Mohanty Posted July 13, 2019 Author Share Posted July 13, 2019 @stokerg Sure thing. I'm here with sending 3 files: original .afdesign, exported .svg web file, and a .sketch file where I imported the svg in. Let me know what's going wrong. Also, I tried to open the .svg file on chrome to inspect whether the images are getting produced by .sketch app or affinity. Now check out the screenshot I've attached from chrome inspect. Now just imagine, if I have to remove 80+ images if my artwork has 80+ such gradients gradient.afdesign gradient.sketch gradient.svg Quote Link to comment Share on other sites More sharing options...
R C-R Posted July 13, 2019 Share Posted July 13, 2019 7 hours ago, Abinash Mohanty said: Let me know what's going wrong. What is going wrong is the weird 'sheared' linear gradient thing, which may be a bug. To see it, click on any of the four child layers (they all have it) with the Gradient Tool: To remove this (apparently non-functional) shear, double-click on any of the nodes connected by dotted lines. The Status bar will include the double-click option when your pointer is over one of those nodes. Do that for each of your four child layers & the SVG export should be raster-free. BTW, you do not need to check the file in Chrome or whatever to see that in its original form there would be rasterization. In the File > Export window, it will indicate that: Quote All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 Affinity Photo 1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7 Link to comment Share on other sites More sharing options...
Abinash Mohanty Posted July 13, 2019 Author Share Posted July 13, 2019 Oh cool! Let me try this in the morning, and i will let you know if that works. Quote Link to comment Share on other sites More sharing options...
Abinash Mohanty Posted July 14, 2019 Author Share Posted July 14, 2019 @R C-R tried as you said, but no luck test.afdesign Quote Link to comment Share on other sites More sharing options...
v_kyr Posted July 14, 2019 Share Posted July 14, 2019 Retry to export with "Rasterize: Nothing" under the SVG Export more button options ... gradient.svg test.svg 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 Link to comment Share on other sites More sharing options...
R C-R Posted July 14, 2019 Share Posted July 14, 2019 3 hours ago, Abinash Mohanty said: @R C-R tried as you said, but no luck Did you double-click on one of the gradient nodes connected by a pair of dotted lines for each & every item in your file that has a sheared gradient applied to it? In the sample file you posted, there are 4 of them. Like I said, the Status bar at the bottom of the window should update to show the "Double-Click to reset shear fill" option when the pointer is over one of those 'shear nodes.' On Macs, it looks like this when the pointer is in the right place: Quote All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 Affinity Photo 1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7 Link to comment Share on other sites More sharing options...
Abinash Mohanty Posted July 15, 2019 Author Share Posted July 15, 2019 @R C-RC-R yeah i did so. Let me check again. It's quite frustrating though. Thanks for helping. Quote Link to comment Share on other sites More sharing options...
R C-R Posted July 15, 2019 Share Posted July 15, 2019 4 minutes ago, Abinash Mohanty said: @R C-RC-R yeah i did so. Let me check again. It's quite frustrating though. Thanks for helping. Were you trying with the same file you uploaded in your second post or a different one? When I removed the shear in the 4 gradients of your uploaded file, the SVG export did not include any raster images (& File > Export did not show the 'some parts will be rasterized' message). If you want to upload a different file with this issue, I will see if this method works with it as well. Quote All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 Affinity Photo 1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7 Link to comment Share on other sites More sharing options...
Abinash Mohanty Posted July 15, 2019 Author Share Posted July 15, 2019 @R C-R Yeah, but if I remove the shear, it removes its gradient. The whole point here is gradient in isometric plane. Anyway, the problem got resolved as stated by @v_kyr. I did the following settings while exporting the artwork. Now it doesn't contain any of the images than just pure gradient when I open this file in sketch app. Thanks a lot guys! Sharing my exported svg file + screenshot of my export settings here. I hope it would help others as well. worked.svg Quote Link to comment Share on other sites More sharing options...
R C-R Posted July 15, 2019 Share Posted July 15, 2019 1 minute ago, Abinash Mohanty said: @R C-R Yeah, but if I remove the shear, it removes its gradient. That should not happen. It may change the appearance (because it is no longer sheared along the iso plane) but that is all that should happen. Can you attach an .afdesign version of the file that you used for your worked.svg export? Quote All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 Affinity Photo 1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7 Link to comment Share on other sites More sharing options...
Abinash Mohanty Posted July 15, 2019 Author Share Posted July 15, 2019 @R C-R sure. Here is the .afdesign file test_worked.afdesign Quote Link to comment Share on other sites More sharing options...
R C-R Posted July 15, 2019 Share Posted July 15, 2019 10 minutes ago, Abinash Mohanty said: @R C-R sure. Here is the .afdesign file test_worked.afdesign When I removed the gradient shear by double-clicking on one of the nodes (I guess "stops" is the proper term) connected by dotted lines on each of the 2 objects, I got this test_worked (no shear).afdesign file. Using the 'for web' preset, I got this test_worked (for web).svg file. As you can see, the gradient is a bit different, but it is still there. Abinash Mohanty 1 Quote All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 Affinity Photo 1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7 Link to comment Share on other sites More sharing options...
Abinash Mohanty Posted July 15, 2019 Author Share Posted July 15, 2019 @R C-R oh! Let me test these. Thanks Quote Link to comment Share on other sites More sharing options...
R C-R Posted July 15, 2019 Share Posted July 15, 2019 Just to make sure we are on the same page about this, with the Fill Tool selected, please make sure you are double-clicking as indicated. If it still removes the gradient & you are a Windows user, then I suspect there may be a bug in the Windows version that is not affecting the Mac version. Quote All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 Affinity Photo 1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7 Link to comment Share on other sites More sharing options...
Abinash Mohanty Posted July 15, 2019 Author Share Posted July 15, 2019 @R C-R I'm on Affinity 1.7.1 mac version. Check out the attached video I've recorded by following your same instruction (screenshot), but it still shows * would be rasterized. Quote Link to comment Share on other sites More sharing options...
R C-R Posted July 15, 2019 Share Posted July 15, 2019 21 minutes ago, Abinash Mohanty said: @R C-R I'm on Affinity 1.7.1 mac version. Check out the attached video I've recorded by following your same instruction (screenshot), but it still shows * would be rasterized. Weird. The only thing I can think of that would explain the difference is I am running High Sierra & you might be running a different Mac OS version, but it seems unlikely that a bug would affect just one OS version without affecting the others. Quote All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 Affinity Photo 1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7 Link to comment Share on other sites More sharing options...
Abinash Mohanty Posted July 15, 2019 Author Share Posted July 15, 2019 I swear, and it's weird. I'm running on Mojave. Quote Link to comment Share on other sites More sharing options...
R C-R Posted July 15, 2019 Share Posted July 15, 2019 2 minutes ago, Abinash Mohanty said: I swear, and it's weird. I'm running on Mojave. I think I (finally!) figured it out, thanks to that tiny sliver of the Isometric panel shown in your GIF (which I neglected to test with). I can get the same 'no change' result if I open it & set it as follows: If you try turning off "Edit in plane" you should get the same results I did ... I hope! Quote All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 Affinity Photo 1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7 Link to comment Share on other sites More sharing options...
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.