How to load SVG images in ImageEditor?
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:
Screen Shot:
