Xamarin Forms FFImageLoading SVG Is blending possible without SkiaSharp?

Question

Is it possible to blend SVG images that use FFImageLoadingSVG.

I need to blend a SVG image that I loaded to make up a whole image but I cannot use Opacity as it doesn't do what I need it to do. Blending is required and I don't think this is possible.

Is there a way to combine Blending from Skia sharp and FFImageLoading together inside XAML so I do not have to write any back code and have a re-usable XAML code for this?

Current XAML code.

<svg:SvgCachedImage Source="resource://uCue_Silver.Resources.SVGs.star_m.svg"
                    WidthRequest="200"
                    HeightRequest="200"
                    HorizontalOptions="CenterAndExpand"
                    VerticalOptions="CenterAndExpand"
                    BackgroundColor="Transparent"
                    Scale="1">
    <svg:SvgCachedImage.Transformations>
        <fftransformations:TintTransformation HexColor="#FFFFFF"
                                                EnableSolidColor="True" />
    </svg:SvgCachedImage.Transformations>
</svg:SvgCachedImage>
<svg:SvgCachedImage Source="resource://uCue_Silver.Resources.SVGs.star_m.svg"
                    WidthRequest="200"
                    HeightRequest="200"
                    HorizontalOptions="CenterAndExpand"
                    VerticalOptions="CenterAndExpand"
                    BackgroundColor="Transparent"
                    Scale="0.8">
    <svg:SvgCachedImage.Transformations>
        <fftransformations:TintTransformation HexColor="#FFFF00"
                                                EnableSolidColor="True" />
    </svg:SvgCachedImage.Transformations>
</svg:SvgCachedImage>
<svg:SvgCachedImage Source="resource://uCue_Silver.Resources.SVGs.s2.svg"
                    WidthRequest="200"
                    HeightRequest="200"
                    HorizontalOptions="CenterAndExpand"
                    VerticalOptions="CenterAndExpand"
                    BackgroundColor="Transparent"
                    ScaleX="-0.8"
                    ScaleY="0.8">
    <svg:SvgCachedImage.Transformations>
        <fftransformations:TintTransformation HexColor="#FFFFFF"
                                                EnableSolidColor="True" />
    </svg:SvgCachedImage.Transformations>
</svg:SvgCachedImage>

score 0 · Answer 1 · answered Jan 26 '23 at 14:18

Unfortunately, I do not believe there's a way to achieve this in Xamarin.

However, you could use Illustrator, or even a free software like gimp, to open your multiple path/svg images, and then combine then into a single path (Merge Visible Paths).

At that point you could then have multiple svg in your Xamarin app of the separate svg, and the combined one as well.

Xamarin Forms FFImageLoading SVG Is blending possible without SkiaSharp?

1 Answers1