We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

is it possible to use svg images for sfButton?

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? 

1 Reply

HM Hemalatha Marikumar Syncfusion Team November 4, 2019 09:17 AM UTC

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. 
  
Please get back to us if you need any further assistance on this. 
 
Regards, 
Hemalatha M. 


Loader.
Live Chat Icon For mobile
Up arrow icon