garuma / xamsvg

SVG Parser for Xamarin.Android

XamSvg

XamSvg is a library to parse and render SVG images with Xamarin.Android

It's mainly a rough port of AndEngine SVG plugin with added sugar for normal Android development.

Usage

Preparing your SVG

First and foremost, this library is not meant to be a full blown SVG parser. Rather the idea is to support a small subset of the format to allow scalable shapes to be used on Android. This means that path, shapes, color and gradients are supported but basically nothing else (e.g. pretty much no SVG effects).

It's also possible that some higher-level SVG constructs used by graphic softwares don't meddle well with the parser. In that case, you should try to export the image in a "lower-compatibility" or "simplified" mode. The excellent (and free) Inkscape SVG editor for instance supports saving pictures in a "Optimized SVG" format that is more suitable to be consummed by the library.

Basic

The most straightforward way to use the library is through SvgFactory.

// Get a bitmap from resources (also raw SVG string, TextReader and Stream)
var bmp = SvgFactory.GetBitmap (Activity.Resources, Resource.Raw.ic_svg, 48, 48);

// Get a drawable that will automatically scale with the drawer bounds
var drawable = SvgFactory.GetDrawable (Activity.Resources, Resource.Raw.ic_svg);

If you are using the Drawable factory method, know that you should specify some bounds first. If you are using an ImageView, this can be simply done by specifying it like this in XML:

<ImageView
	android:layout_width="14dp"
	android:layout_height="9dp"
	android:scaleType="fitXY" />

Note that we also use the fitXY value for scale type to avoid any canvas transformation.

In that case, the drawable will automatically generate a bitmap representation of your SVG at the right size and density.

Color mapper

Every factory method supports an optional color mapper parameter that let you dynamically change the color of the SVG being parsed. This is useful if you want to reuse the same SVG multiple time with a different tint color.

You can create a mapper by implementing the ISvgColorMapper interface or directly create one with a Func<Color, Color> using the SvgColorMapperFactory.FromFunc method.

Low-level, directly using SvgParser

If you want to have directly access to the parsed SVG representation, you can use the methods of the SvgParser class which return a Svg instance.

That instance has a Picture property returning (surprise) a Picture object that contains all the drawing calls necessary to render the SVG.

Bigger example

Moyeu uses this library for pretty much all of its icon. Since it's also available under an open-source license, it's a good way to see how the library can be used.

License

This work is placed under the Apache 2.0 license.

xamsvg's Issues

Sanitize double.Parse for non-english language

Good old French comma-instead-of-dot floating numbers.

Exception when assigning Drawable

Hi there,

just testing out the library, but I get the following Exception when doing:

var bksvLogo = view.FindViewById<ImageView>(Resource.Id.bksvImageView);
using(var drawable = SvgFactory.GetDrawable(Activity.Resources, Resource.Raw.bk_logo))
    bksvLogo.SetImageDrawable(drawable);

    <ImageView
        android:id="@+id/bksvImageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:scaleType="fitXY" />

I am certain that the Resource.Raw.bk_logo is an SVG, and it opens fine in Inkscape, GIMP and browsers.

09-19 14:59:58.510 I/MonoDroid(31854): UNHANDLED EXCEPTION:
09-19 14:59:58.570 I/MonoDroid(31854): System.NotSupportedException: Unable to activate instance of type XamSvg.PictureBitmapDrawable from native handle 9f100019 ---> System.MissingMethodException: No constructor found for XamSvg.PictureBitmapDrawable::.ctor(System.IntPtr, Android.Runtime.JniHandleOwnership) ---> Java.Interop.JavaLocationException: Exception of type 'Java.Interop.JavaLocationException' was thrown.
09-19 14:59:58.570 I/MonoDroid(31854): Java.Lang.Error: Exception of type 'Java.Lang.Error' was thrown.
09-19 14:59:58.570 I/MonoDroid(31854):   --- End of managed exception stack trace ---
09-19 14:59:58.570 I/MonoDroid(31854): java.lang.Error: Java callstack:
09-19 14:59:58.570 I/MonoDroid(31854):  at xamsvg.PictureBitmapDrawable.n_onBoundsChange(Native Method)
09-19 14:59:58.570 I/MonoDroid(31854):  at xamsvg.PictureBitmapDrawable.onBoundsChange(PictureBitmapDrawable.java:59)
09-19 14:59:58.570 I/MonoDroid(31854):  at android.graphics.drawable.Drawable.setBounds(Drawable.java:149)
09-19 14:59:58.570 I/MonoDroid(31854):  at android.widget.ImageView.configureBounds(ImageView.java:872)
09-19 14:59:58.570 I/MonoDroid(31854):  at android.widget.ImageView.setFrame(ImageView.java:850)
09-19 14:59:58.570 I/MonoDroid(31854):  at android.view.View.layout(View.java:14070)
09-19 14:59:58.570 I/MonoDroid(31854):  at android.widget.RelativeLayout.onLayout(RelativeLayout.java:948)
09-19 14:59:58.575 I/MonoDroid(31854):  at android.view.View.layout(View.java:14072)
09-19 14:59:58.575 I/MonoDroid(31854):  at android.view.ViewGroup.layout(ViewGroup.java:4607)
09-19 14:59:58.575 I/MonoDroid(31854):  at android.widget.FrameLayout.onLayout(FrameLayout.java:448)
09-19 14:59:58.575 I/MonoDroid(31854):  at android.view.View.layout(View.java:14072)
09-19 14:59:58.575 I/MonoDroid(31854):  at android.view.ViewGroup.layout(ViewGroup.java:4607)
09-19 14:59:58.575 I/MonoDroid(31854):  at android.widget.FrameLayout.onLayout(FrameLayout.java:448)
09-19 14:59:58.575 I/MonoDroid(31854):  at android.view.View.layout(View.java:14072)
09-19 14:59:58.575 I/MonoDroid(31854):  at android.view.ViewGroup.layout(ViewGroup.java:4607)
09-19 14:59:58.575 I/MonoDroid(31854):  at android.widget.FrameLayout.onLayout(FrameLayout.java:448)
09-19 14:59:58.575 I/MonoDroid(31854):  at android.view.View.layout(View.java:14072)
09-19 14:59:58.575 I/MonoDroid(31854):  at android.view.ViewGroup.layout(ViewGroup.java:4607)
09-19 14:59:58.575 I/MonoDroid(31854):  at android.widget.FrameLayout.onLayout(FrameLayout.java:448)
09-19 14:59:58.575 I/MonoDroid(31854):  at android.view.View.layout(View.java:14072)

I am using the latest alpha, haven't tested with anything else.

Microsoft Visual Studio Ultimate 2013
Version 12.0.30723.00 Update 3
Microsoft .NET Framework
Version 4.5.51641

Xamarin 3.6.245.0 (49abddaaec0a8be4cb890b8cddefed81727bbe6c)
Visual Studio extension to enable development for Xamarin.iOS and Xamarin.Android.

Xamarin.Android 4.16.0.17 (2a7b68212b17c903160fbd8e0106babb299d1be3)
Visual Studio plugin to enable development for Xamarin.Android.

Xamarin.iOS 8.0.52.0 (b38baf1c655f9fe816fee25cbd7ac78225def3e9)
Visual Studio extension to enable development for Xamarin.iOS.

Xamsvg doesn't display my svg assets

Xamsvg doesn't display my svg assets. It just crashes. I've made those with Inkscape, and saved as "plain svg".

You can download an .svg test file of my buttons from here: http://goo.gl/m7TbmM

This is a preview of some of my SVG buttons:

Can you make a port for Xamarin.Monotouch?

Can you port this library for Xamarin.Monotouch too? I'm working on a multiplatform application (both Android and iOS) and it would be useful to have this library with the same API for both Xamarin Android and Monotouch.