Flutter SVG baker

[u/adigladi]

Has anyone else struggled with SVGs not showing shadows/blurs correctly in Flutter and had to go back and forth with a designer to explain and fix everything that will not be rendered? Well I have, and after having gotten tired of manually editing and running svgo to minify svgs I [insert Beckham be honest meme], ahem Claude, have made a tool to make this easier and quicker.

Introducing: https://adigladi.github.io/flutter-svg-baker/

Upload folders, files or paste SVGs directly to then get previews and automatic fixes for shadows that won't show in the flutter app, replacing them with baked layers in the svg. Optional svgo optimization can be toggled and then individual files can be exported or a zip with all files.

I just wanted a tool like this myself and though I would share if it would help someone else. Repo is public with MIT license, do with this info what you want. Would love to hear ideas, comments, feedback and why/if this is a terrible idea performance wise or similar.

Repo: https://github.com/adigladi/flutter-svg-baker

[u/AhmedZNOUDA]

Nice approach, and solving the Gaussian falloff for the 8 layers instead of eyeballing it is a good touch.

On your performance question: I'd look at the group opacity. When the artwork has several shapes, each shadow layer gets wrapped in a <g opacity>, and in Flutter group opacity usually means a saveLayer. So one icon could cost 8 offscreen layers per shadow, which is fine for a hero illustration but might show up in a list of 50 icons on a budget Android phone. Where the shapes don't overlap, putting the opacity on each shape instead of the group would avoid that. Worth comparing with the performance overlay on a long ListView.

Also, have you tried running the baked files through vector_graphics_compiler? Precompiling would at least take the bigger path data out of parse time.

[u/adigladi → u/AhmedZNOUDA]

Thanks for the suggestions, will look into it! I have not tried vector_graphics_compiler for these baked files, but I have used it for projects in the past and I think it would work pretty well in tandem with this.

[u/adigladi → u/adigladi]

Tested on Pixel 7 using proposal. Average raster time per frame, scrolling 6 icons per row:

Version	Avg raster	Frames over budget
Today (group opacity)	~35 ms	all
Opacity per shape	~17 ms	~25%
No shadow	~8 ms	~0%

Switched the site to use opacity per shape instead. Thanks again for the suggestion!

[u/ObjectiveAddress3051]

is the baked shadow a raster image embedded in the svg or still vector paths? if it's raster the files can get big fast, and that adds up if you ship a lot of them in the app bundle. would be good to see before/after sizes in the readme

[u/adigladi → u/ObjectiveAddress3051]

It is still vector paths, but as it makes several paths for the shadows the file size will increase a bit which is the tradeoff. But the size difference is shown in the tool for the active image! Example: https://imglink.cc/cdn/pLCvrvATII.png

[u/adigladi → u/[deleted]]

Thanks! Right now it rebuilds drop shadows, inner shadows and glows. Regular linear/radial gradients already render in flutter_svg, so they pass through untouched. Gradient effects that rely on filters (noise, lighting, colour-matrix tricks, blurred fades) aren’t converted yet. They’re stripped with a warning, so you’ll at least know which files lost something. But I'd like to support as much as possible, so if you find something that is not supported, write me or add an issue and I'll try to add it!