Jump to content

Recommended Posts

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?

1738347421_IconProgressPal.png.3ea45d91d32ce7ce4673d139eef9140c.png

Share this post


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


macOS 10.12.6,  Macbook Pro 15" + Eizo 24"

Share this post


Link to post
Share on other sites

Any of the layer filters will get the object rasterised.


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Share this post


Link to post
Share on other sites

Try using coloured shapes and the transparency tool instead of layer FX


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

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.


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Share this post


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


macOS 10.12.6,  Macbook Pro 15" + Eizo 24"

Share this post


Link to post
Share on other sites

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?

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

×

Important Information

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.