Shotster Posted September 17, 2019 Share Posted September 17, 2019 I thought I understood SVG, but perhaps I need a primer. I thought SVG resulted in smaller file sizes, but my simple icon is 350K+ bytes. When I open the exported SVG in AD, the "head" is rasterized. Why? Is it the gradients which force everything to get rasterized? The attached PNG (500 pixels square) is only 20K (after running the AD export through TinyPNG). Why isn't the SVG even smaller? Quote Link to comment Share on other sites More sharing options...
thomaso Posted September 17, 2019 Share Posted September 17, 2019 23 minutes ago, Shotster said: the "head" is rasterized. Why? Do you assume a known, general bug with "heads"? Not with "hands"? Here is a circle + gradient .svg with 1 KB: circle gradient small.svg Why do you attach a file with no issue – but keep the one which worries you? Quote macOS 10.14.6 | MacBookPro Retina 15" | Eizo 27" | Affinity V1 Link to comment Share on other sites More sharing options...
firstdefence Posted September 17, 2019 Share Posted September 17, 2019 Any of the layer filters will get the object rasterised. Quote iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9 (Please refrain from licking the screen while using this forum) Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions Link to comment Share on other sites More sharing options...
firstdefence Posted September 17, 2019 Share Posted September 17, 2019 Try using coloured shapes and the transparency tool instead of layer FX Quote iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9 (Please refrain from licking the screen while using this forum) Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions Link to comment Share on other sites More sharing options...
Shotster Posted September 17, 2019 Author Share Posted September 17, 2019 3 minutes ago, thomaso said: Do you assume a known, general bug with "heads"? Not with "hands"? No, I didn't "assume" anything. As I said, I opened the SVG file that was exported by AD. The hand is not rasterized (only the gradient highlights), whereas the entire head is rasterized. Quote Link to comment Share on other sites More sharing options...
Shotster Posted September 17, 2019 Author Share Posted September 17, 2019 11 minutes ago, firstdefence said: Any of the layer filters will get the object rasterised. Ahhh, I see! That's helpful! 9 minutes ago, firstdefence said: Try using coloured shapes and the transparency tool instead of layer FX Now that's something to go on. Thanks! I wonder if AD has a simple way to convert effects to layers. I shall consult the docs! Thanks, I appreciate the helpful response! Quote Link to comment Share on other sites More sharing options...
firstdefence Posted September 17, 2019 Share Posted September 17, 2019 What Thomas is probably asking is for you to upload the afdesign file for us to look at, if you'd rather not upload it publicly a mod can give a dropbox space to upload to so they can take a quick look, else just attach it to your next post. Quote iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9 (Please refrain from licking the screen while using this forum) Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions Link to comment Share on other sites More sharing options...
thomaso Posted September 17, 2019 Share Posted September 17, 2019 21 minutes ago, Shotster said: No, I didn't "assume" anything. You were wondering whether the gradient might cause rasterization. That made me wonder whether the hand wouldn't be rasterized, too. If not, then the gradient isn't the reason. As firstdefence mentions it would be useful to be able to take a look into the file which creates the issue to be able to detect what in particular does create it. For that info the attached, healthy png isn't such informative. Quote macOS 10.14.6 | MacBookPro Retina 15" | Eizo 27" | Affinity V1 Link to comment Share on other sites More sharing options...
Shotster Posted September 17, 2019 Author Share Posted September 17, 2019 Thanks for the replies. My query has been sufficiently addressed! Quote Link to comment Share on other sites More sharing options...
Shotster Posted September 18, 2019 Author Share Posted September 18, 2019 Just a quick follow-up with some lessons learned... Aside from @firstdefence's insights about using shapes and gradients in lieu of layer effects, the most important thing I learned for reducing SVG file size is to expand those strokes! After those optimizations and when using the SVG for Web preset, my file size dropped to 15.7K! Wow! Of course, I did more than just expand strokes and eliminate layer effects. I also did some boolean operations to "flatten" the paths. I also removed groups as well as re-implemented highlights as simple gradients. But that leads to a few more questions... I noticed that simply ungrouping layers results in a drop in file size. Is there an advantage / disadvantage to having groups when exporting for the web? Groups are certainly helpful when working on the design. Is there a way to have AD automatically "de-group" when exporting? I saw no such setting, but perhaps I'm missing something. Also, on a related note, I tend to do a lot of parent/child "nesting" of layers - e.g. eye layer contains iris layer which contains pupil layer, etc. This is very useful for decluttering/organizing the layers panel, for clipping, and for moving things around as a "group". However, I noticed that making a simple gradient the child of a solid fill layers results in rasterization - i.e. the "some parts will be rasterized" message when exporting. Anyone have any insights as to why that is? Is there no way to get a fully optimized SVG without sacrificing organizational features like nesting and grouping? Quote 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.