Composing SVGs in Flutter

[Chris]

Hi,

we are currently making tests porting our app in flutter.

In our App we have thousands of svg-graphics for creating avatar (head, hear, eye, ... and shadows for all). When painting on avatar in our current app we manipulate each part (coloring, ...) of the specific avatar, add all parts to a "canvas", scale it, crete a bitmap out of it and use that bitmap for displaying. Performance is very important as the images sometimes get rendered in lists with hundreds of entries...

Can anyone give me a hint, howQ to implement that in flutter? 

[Eric Seidel]

There is a basic svg package at https://github.com/dnfield/flutter_svg (there may be others as well).

Its possible to render any part of a Flutter tree into a buffer/image with Picture.toImage().

Those should be some pieces to get you started.  StackOverflow or others on this list may have more in-depth answers.

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Chris]

Okay.. thanks... I am testing with the flutter _svg package but did not find something on composing and manipulating svg graphics in flutter ... or any hints about "how it should be done" (especially with an eye on performance, ...)

Just asking as you are pointing to StackOverflow - this is not the forum for such questions?

[Eric Seidel]

Oh, you can certainly ask questions here. :)  My experience has been that Stack Overflow can be faster/wider audience.  But your milage may vary.

https://medium.com/@parth_jansari/export-your-widget-to-image-with-flutter-dc7ecfa6bafb was also published yesterday, with one approach on how to turn a Widget into pixels.

[dnf...@google.com]

Chris,

The way you're doing it currently isn't going to scale very well - if I'm understanding you correctly, you're creating a vector based `Picture`, then making a raster `Image` from it, and then compositing the rasters.

`flutter_svg`'s most straightforward use cases are to render SVG as a simple image-like widget.  However, you could parse the SVG into a `Picture` with something like this: https://gist.github.com/dnfield/41768387d7c05b47f4552ec62cafd18b

The API isn't super obvious, and some of it may have to change a little bit, but hopefully that's enough to get you started.

[dnf...@google.com]

One other thing to keep in mind is that depending on how your shadows/effects are implemented they may not be supported.  If you're using filter effects in SVG, that's not supported in my library, and it's a little rough in Flutter itself at the moment (but there are some issues open for that).

Also, Text support is really very basic and only covers some pretty simple use cases.

[dnf...@google.com]

One more thing - you can record your Canvas operations using a PictureRecorder, get a Picture from that, and then either keep the Picture for drawing later (probably what you want), or call .toImage on that picture to get a rasterized version of it (useful if you need to send that picture over the network or to disk).