is it possible to use svg images for sfButton?

[Emil]

xamarin.forms button support svg images using like ffimageloadingsvg now using xamarin.forms 4.x version. Does SfButton support using svg? is there any plan for it? 

[Hemalatha Marikumar]

Hi Emil, 

 

Greetings from Syncfusion. 

  

Query: Does SfButton support using svg? 

 

Yes, SfButton supports svg image format using its Content property, which is used to load a custom view. With the help of SkiaSharp, we can draw the SVG path and make it as View by using SKCanvasView as per in below code snippet. 

  

Code snippet [XAML]: 

<buttons:SfButton > 

    <buttons:SfButton.Content> 

        <Grid BackgroundColor="#ff5500"> 

            <Grid.ColumnDefinitions> 

                <ColumnDefinition Width="50"/> 

                <ColumnDefinition Width="*"/> 

            </Grid.ColumnDefinitions> 

            <local:Icon /> 

            <Label Text="Connect with Strava" 

                   Grid.Column="1" 

                   HorizontalTextAlignment="Center" 

                   VerticalTextAlignment="Center" 

                   TextColor = "#ffffff"/> 

        </Grid> 

    </buttons:SfButton.Content> 

</buttons:SfButton> 

  

Code snippet[C#]: 

public class Icon : Frame 

{ 

    private readonly SKCanvasView canvasView = new SKCanvasView(); 

  

    public Icon() 

    { 

        Padding = new Thickness(0); 

        BackgroundColor = Color.Transparent; 

        HasShadow = false; 

        Content = canvasView; 

        canvasView.PaintSurface += CanvasViewOnPaintSurface; 

    } 

  

    private void CanvasViewOnPaintSurface(object sender, SKPaintSurfaceEventArgs args) 

    { 

        SKCanvas canvas = args.Surface.Canvas; 

        canvas.Clear(); 

  

        if (string.IsNullOrEmpty("SimpleSample.level2.svg")) 

            return; 

  

        using (Stream stream = GetType().Assembly.GetManifestResourceStream("SimpleSample.level2.svg")) 

        { 

            SKSvg svg = new SKSvg(); 

            svg.Load(stream); 

  

            SKImageInfo info = args.Info; 

            canvas.Translate(info.Width / 2f, info.Height / 2f); 

  

            SKRect bounds = svg.ViewBox; 

            float xRatio = info.Width / bounds.Width; 

            float yRatio = info.Height / bounds.Height; 

  

            float ratio = Math.Min(xRatio, yRatio); 

  

            canvas.Scale(ratio); 

            canvas.Translate(-bounds.MidX, -bounds.MidY); 

  

            canvas.DrawPicture(svg.Picture); 

        } 

    } 

} 

  

Please download the sample from the below link. 

Sample  - https://www.syncfusion.com/downloads/support/forum/148753/ze/148753-sample49558967.zip 

  

Please get back to us if you need any further assistance on this. 

 

Regards, 

Hemalatha M.