SVG Primer?

[Shotster]

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?

[thomaso]

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?

[firstdefence]

Any of the layer filters will get the object rasterised.

[firstdefence]

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

[Shotster]

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.

[Shotster]

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!

[firstdefence]

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.

[thomaso]

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.

[Shotster]

Thanks for the replies. My query has been sufficiently addressed!

[Shotster]

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?