I cannot export SVG with Blur

Share an issue
1
  • Sketch version: Version 2025.2.1 (205181)
  • macOS version: 15.6 (24G84)

SCR-20250901-oavo
SCR-20250901-oavo2094Ă—801 263 KB

3

Hello Jakub!

The SVG export itself will include the blur information, if you open the SVG with a text editor, you’ll see the blur in there. However, many applications (including Sketch, in fact) can’t fully interpret or re-render all complex SVG filters and effects when reading the file.

Some apps that just read and show the SVG will show it well since these import them as rasterized elements, which are not truly editable in a vector-based app if you reopen the file.

For that reason I’d like to know: what’s the reason you need an SVG format as an output in this case? Do you need to open the output on another app to edit it in any capacity?

Perhaps you could consider a different format for your output file, or change the workflow to include blurs later on in the process. Let me know!

4

I export this as SVG for a website, but I just checked that I would use optimised PNG instead of SVG I would get much smaller file size. (200kb vs 50kb) I need to look into this more closely. :grinning_face_with_smiling_eyes: I also planned to do some animations on the SVG in the final stage but it’s just an idea. :upside_down_face:

PS
I fixed this by setting the blur on all the individual layers, instead of using the rectangle with the blur effect on top of the layers, then I got this blur effect showed on Chrome.

5

That is great, Jakub! bitmaps sound like a better output for that type of asset all in all. I’m happy to see I could be of some help!

1 Like
7

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.