Support gradients

[12people]

Please add support for linear and radial gradients. Flutter supports these through shaders: https://docs.flutter.io/flutter/painting/RadialGradient-class.html, https://docs.flutter.io/flutter/painting/LinearGradient-class.html

[aloisdeniel]

Yes, shouldn't be hard to add.

Just have to specify the way gradients are declared. The SVG declaration is really too verbose to me (https://www.w3schools.com/graphics/svg_grad_linear.asp) ...

Maybe something like :

<circle cx="45.5" cy="42.5" r="15.5" fill="linearGradient([0,1], [1,0], [#C4C4C4, #000000], [0, 1])" />
<circle cx="45.5" cy="42.5" r="15.5" fill="radialGradient([0,1], [1,0], [#C4C4C4, #000000], [0, 1])" />

[aloisdeniel]

After thinking, a best approach would be to also add a resource dictionary :

<vector name="warning" viewBox="0 0 24 24" fill="#231F20">
    <resources>
       <resource key="accent">#C4C4C4</accent>
       <resource key="black">#000000</accent>
       <resource key="gradient">linearGradient([0,1], [1,0], [@accent, @black], [0, 1])</accent>
    </resources>
    <rect x="15" y="14" width="31" height="28" fill="@gradient" />
    <circle cx="45.5" cy="42.5" r="15.5" fill="@accent" />
    <path d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z" />
</vector>

I only have to choose if I stick to a specification that stays near to SVG or not !

[12people]

@aloisdeniel Thanks a ton for the quick reply, and for being open to implement this!

The way I usually work is design something in a vector editor, export it as SVG, then clean up that SVG to match your script requirements. For me, the closer it is to SVG, the better. :)

Your library is a godsend for people that want vector graphics, but not a hefty SVG library in their app -- thanks a ton for making it!