SVG Export Missing Gradients, Shadows

[superduperdude]

I've downloaded Affinity Designer Trial to see if I can get it to export an SVG of a purely vector design. For this project, it's incredibly important that the final product be an SVG that has zero rasterized elements in there so it can scale to multiple screen resolutions.

 

The problem is that, while I've got the design looking good (well, as good as I can get it, being a programmer and not a designer!), when I export to SVG **without rasterizing unsupported effects** -- which I thought SVG supported shadows and gradients on a transparent background, right? -- the file has neither of those.

 

I've attached the afdesign doc and a resulting SVG. Tried reading said SVG in Chrome and Firefox as well as Apple's Quick Look (which I believe uses Preview's built in magic magicness) and the shapes and colors are fine, just no drop shadow, no gradient, no transparency.

 

Input appreciated. Thanks all.

 

SVG Looks like this in quicklook: 

Postal Logo (Affinity) 2.svg

Postal Logo 2.afdesign

[Lee D]

Hi Superduperdude,

 

Welcome to the forums.

 

So that your export is as close to your original design, some unsupported elements are rasterised during export. In your designs case it's the outer shadows and gradient overlay effects that need to be rasterised.

[MattP]

Hi Superduperdude,

 

The main problem you're facing is that Layer Effects are pixel-based effects so require rasterisation. The gradient overlay effects that you've used could simply be replaced with just dragging a gradient on your objects using the Gradient Tool (G) and this would go straight out to SVG without rasterisation - gradient overlays are very similar but not quite the same and they require rasterisation (they work in the same way as PhotoShop's gradient overlay layers for compatibility). SVG doesn't support shadows per-se, but it does support groups of effects that you can chain together to make something akin to a shadow - we import these and create our shadows from them, but we do not currently export them, although we will do...

 

If you replace your gradient overlay layer effects with just using the Gradient Tool, then you will only be left with rasterised shadows - which we will hopefully be able to resolve in the not-too-distant future :)

 

Thanks,

Matt

[paul25c12]

Hi all,

I just got Affinity Designer and really loving it except that I have come across this issue.

I know this is an old post but I'm having the same issue when exporting to SVG where outer / inner shadows are rasterized. Is there really no way to export to SVG with effects? how can I export to SVG with shadows without rasterization? Any suggestion as to how to create that shadow effect to be exported to a non-rasterized SVG will greatly be appreciated. I hope I have explained well the matter at hand.

Thanks, Paul

[gdenby]

Hi, paul25c12,

MattP's explanation from '15 is accurate. The SVG format supports gradients and transparencies that are scalable. Bit-maps can be included in the file, but will end up showing pixel artifacts.

Some fx, such as shadows and simple specular highlights are easy to make using only gradients and transparencies. Fancier stuff like 3D can be lots of work. Sometimes, quick and dirty rasterization is the way to go.