Exporting as SVG: Pixelating when zooming in - What am I doing wrong?

[DenalB]

Actually I'm in my trial period of "Affinity Design" and want to modify an SVG file. I got this SVG file from a designer as a banner for my website.

Some weeks ago I used "InkScape" to add a shadow to the image and exported it again as an SVG file. It is 15 KB in size and doesn't pixelate when zooming in.

Now I want to try the same with "Affinity Designer" and I'm wondering that this seems not to work.

I opened the original SVG file and put a shadow on it.

After that everything looks good and I save this file as an afdesign-file. Here I can zoom in without pixelating.

Now I want to export this as an SVG file for using it on my website. The only profile that doesn't pixelate is "Digital - High Qualitiy" with 300 dpi.

But as you can see the file size is 2 MB. This SVG file I'm able to zoom in perfectly in "Affinity Designer" or browser.

When exporting using the profile "Digital - Small Size" with 72 dpi zooming in is pixelating in "Affinity Designer" or browser. And the size of this file is 300 KB.

I could change dpi to 144 but still there is a little pixelating when zooming in and the file size is 760 KB.

What could be the problem? Am I doing something wrong? I don't understand why I have to export with 300 dpi or more to prevent pixelating and get such a big file size. Any help?

Edited October 25, 2020 by DenalB

[DenalB]

I know that a lot could be added with the help of css. Actually I'm using the svg with shadows created with "InkScape". It must be possible to include the shadows into the svg. But how can I do this in "Affinity Designer"?

48 minutes ago, BofG said:

The shadow effect requires rasterisation on export.

How can I do this?

[DenalB]

13 minutes ago, BofG said:

Designer isn't that great at authoring SVG, it falls back to the raster image approach on a number of things that SVG can natively support like blending modes and shadows.

That's a pity. I thought that I could switch to "Affinity Designer".

 

15 minutes ago, BofG said:

<h1 style="color:#FFF;text-shadow:1px 4px 10px #000">WAY</h1>

If you want to use the svg, create it without the shadow, with the text as curves and you can then target those paths with css and use box-shadow.

Thanks a lot. I will try and see if this is working for me. 👍

[DenalB]

Thank you very much!