svg manipulation (with user interactions) in flutter

Question

I have built a web based light SVG editor with simple functionalities such as (resize, rotate, dragging, coloring) using HTML canvas and fabricJS. Now just by curiosity i want to create a mobile app to this web based platform. started searching for alternatives or something similar to fabricJS in flutter but i had no luck.

Also searched for many solutions and i have never found something to serve this need in flutter or Native Android nor Swift, But I know it's possible there is canva who made something with the same approach but i couldn't find a way to know there secret sauce.

So, my direct question is if there an html canvas like in flutter and even a canvas-svg (and svg-canvas) parser.

Solution

Flutter doesn’t have SVG support and will never officially support it due to its performance.

Your best bet is to use CustomPaint for rendering the vector, then use SVG.js with js interop when it comes time to export the SVG. Not a simple solution since you’re having to work around lack of official support, but for basic functionality it should be completely feasible.

If you’re wanting to support importing vectors, you might want to check out flutter_svg’s code to take a look at how they handle SVG. This library only supports rendering SVGs, not manipulating or exporting them, but it may have some helpful code to point you in the right direction.