Flutter svg animation and manipulation

Question

I have an SVG asset of a map, in which I have to change the color of some cities depending on the results of a network call. On the web, one normally would add a class to each path, give it some CSS, and toggle that class using JavaScript. How can I achieve the same effect in flutter?

Solution

This can be done with the new version of jovial_svg. It supports embedded stylesheets, so you can use CSS exactly as suggested. Of course, you'd need to re-parse the SVG whenever there's a change, but that's not a big deal here.

Alternately, if it's just one set of cities, you could use SVG's currentColor, and set that value in the appropriate ScalableImage factory. But for your use case, CSS seems like the better way to go.

NOTE: At this exact moment, CSS support is in pre-release, but it should be formally released as 1.1.4 within a couple of days. In the meantime, see https://pub.dev/packages/jovial_svg/versions/1.1.4-rc.3