)
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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to load SVG images in ImageEditor?

Platform: Xamarin.Forms |
Control: SfImageEditor |
Published Date: June 27, 2018 |
Last Revised Date: June 25, 2019

SfImageEditor allows you to load SVG image as annotation on image.

 

Step 1: Create image editor sample with all necessary assemblies.

 

Please refer the below link to create a simple SfImageEditor sample along with the ways to configure it.

https://help.syncfusion.com/xamarin/sfimageeditor/getting-started

 

Step 2: To load SVG image in all the Xamarin platforms. For this, you need to implement a DependencyService which is implemented across all the platform specific projects.

For adding the DependencyService, first you need to add an interface in the PCL project as in the below code snippet:

C#

public interface ICustomViewDependencyService
    {
        object GetCustomView(string imageName, object context);
    }

Now, you have to implement and register the DependencyService in the assembly based on platform specific. This can be done as follows:

Android

C#

[assembly: Dependency(typeof(CustomRenderer))] 
class CustomRenderer : ICustomViewDependencyService
    {
        public object GetCustomView(string imageName, object context)
        {
            ImageView view = new ImageView(context);
            view.LayoutParameters = new ViewGroup.LayoutParams(200, 200);
            if (imageName == "Typogy1")
                view.SetImageResource(Resource.Drawable.Typogy1);
            else if (imageName == "Typogy2")
                view.SetImageResource(Resource.Drawable.Typogy2);
            return view;
        }
    }

 

iOS

C#

[assembly: Dependency(typeof(CustomRenderer))] 
class CustomRenderer: ICustomViewDependencyService
    {
        public object GetCustomView(string imageName, object context)
        {
            CustomWebView webView = new CustomWebView()
            {
                Frame = new CGRect(0, 0, 150, 150),
            };
            var path = NSBundle.MainBundle.PathForResource(imageName, "svg");
            var url = new NSUrl(path);
            var urlreq = new NSUrlRequest(url);
            webView.LoadRequest(urlreq);
            return webView;
        }
    }

 

UWP

C#

[assembly: Dependency(typeof(CustomRenderer))] 
public class CustomRenderer : ICustomViewDependencyService
    {
        public object GetCustomView(string imageName, object context)
        {
            Windows.UI.Xaml.Controls.Image svgimage = new Windows.UI.Xaml.Controls.Image()
            { Height = 200, Width = 200 };
            svgimage.Source = new SvgImageSource(new Uri("ms-appx:///Assets/" + imageName + ".svg", UriKind.Absolute));
            return svgimage;
        }
    }

 

Step 3: Get the custom view from DependencyService method call and add this view in AddCustomView method.

C#

object view = DependencyService.Get<ICustomViewDependencyService>().GetCustomView("Typogy1", this);
ImageEditor.AddCustomView(view);

 

Sample Link:

http://www.syncfusion.com/downloads/support/directtrac/general/ze/ImageEditor_LoadSVGImage-124290280575036211.zip

Screen Shot:

 

Load SVG images using xamarin SfImageEditor

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon