16 ratings
  • 1
  • 2
  • 3
  • 4
  • 5
5 star 8
4 star 3
3 star 5
2 star 0
1 star 0
Compatible with
  • iOS
  • Android
  • Windows

XamSvg 2.1.0

Vapolia SARL

Use standard SVG autoscaling vector images in your Xamarin apps.

XamSvg

Stop adding PNG or JPG image files at different resolutions to support all devices !

Use SVG image files instead. SVG are standard small vector graphic files that autoscale to the device resolution and to any size without any stair step artifact. You can use them for nearly all images in your Xamarin application (native or Forms).

Because XamSvg uses only hardware accelerated graphics functions, it has no performance hit.

This package supports Xamarin Forms (iOS+Android+WP81), Xamarin iOS, Xamarin Android, and Windows Phone 8.1 projects. It is delivered with a private nuget server and full source code.

Important: svg images that don't have any color set will not display as default color is transparent. This changes from other svg renderers where the default color is black.

Svg Control

The package provides a ready and easy to use SvgImage control on all platforms.

Xamarin Forms xaml

<svg:SvgImage Svg="res:images.hand" HorizontalOptions="Center" HeightRequest="20" 
              Clicked="OnSvgClicked" ClickedCommand="{Binding SvgClickedCommand}"
              ColorMappingSelected="ffffff=00ff00" />

All properties are bindable and can be dynamically changed.

Native iOS

        var svgImage = new UISvgImageView()

Native Android in axml (also available in code)

        <XamSvg.SvgImageView
            local:svg="@raw/hand"
            android:layout_width="wrap_content"
            android:layout_height="27dp" />

Windows Phone xaml

<svg:Svg Source="ms-appx:///Assets/svg/images.hand.svg" HorizontalAlignment="Stretch" VerticalAlignment="Center" />

Usage

Svg image files can be stored either as .NET resources in a PCL library, or as native Android / iOS resources, or can be fetched from strings or streams.

The control respects the aspect ratio of the svg bounding box if you set only one of the dimensions.

Xamarin Forms

This example displays the image hand.svg stored in the /Images folder of your PCL assembly.

<svg:SvgImage Svg="res:images.hand" HorizontalOptions="Center" HeightRequest="20" />


This example displays the image hand.svg stored in the /Assets/Images folder of your PCL assembly.
When pressed, white color (#FFFFFF) is replaced by green (#00FF00) and black color (#000000) is replaced by dark grey (#333333).
When tapped, the OnSvgClicked handler is invoked.

<svg:SvgImage Svg="res:assets.images.hand" HorizontalOptions="Center" HeightRequest="20"
                Clicked="OnSvgClicked" ColorMappingSelected="ffffff=00ff00;000000=333333" />


This example uses the same hand.svg file but with other colors. It dynamically update the colors when loading the file.

<svg:SvgImage Svg="res:images.hand" HorizontalOptions="Center" HeightRequest="20"
                ColorMapping="ffffff=00ff00;000000=333333" />


This example invokes the YourCommand command when the image is tapped. See chapter From Data Bindings to MVVM for more information.

<svg:SvgImage Svg="res:images.hand" HorizontalOptions="Center" HeightRequest="20"
                ClickedCommand="{Binding YourCommand}" />

Native Android

  • Display myimage.svg:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:local="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
            <XamSvg.SvgImageView
                local:svg="@raw/myimage"
                android:layout_width="wrap_content"
                android:layout_height="50dp" />
    </RelativeLayout>
    

If layout_width or layout_height is not specified or is equal to wrap_content, then its value is computed from the other dimension and the svg bounding box ratio.

This is the recommanded way to use the widget: specify only one dimension and set the other to wrap_content. The svg image will fill the available space and keep its aspect ratio.

  • Display myimage.svg in another color:

    <XamSvg.SvgImageView
        local:svg="@raw/myimage"
        local:colorMapping="EAEDF1=494949;FFFFFF=000000;e9f1f7=ffFFFFFE;646464=FFFFFE"
        android:layout_width="wrap_content"
        android:layout_height="50dp" />
    

In this example the color EAEDF1, expressed as RRGGBB, is replaced by color 494949.

Native iOS

  • Replace the standard back button with cross.svg in ViewDidLoad:

    var btnBackImage = new UISvgImageView("vectors/cross.svg", fillHeightPixels: NavigationController.NavigationBar.Bounds.Height - 20);
    var backButton = new UIBarButtonItem(btnBackImage);
    NavigationItem.LeftBarButtonItem = backButton;
    
  • Use a color mapping:

    var hands = new UISvgImageView("vectors/hands.svg", fillHeightPixels: 80, colorMapper: SvgColorMapperFactory.FromDic(new Dictionary<string, string> { { "000000", "2471B2" } }));
    

Complete example projects and NuGet support

Complete example projects with source code are provided. Open and try them, they are easy to understand !

Very easy to use

Simply add the widget markup to you axml layout in Android, or some lines of code in iOS.

This package contains a nuget script so you can deploy the library as a nuget package on your private nuget server.

Mvvmcross binding support

Use the new "Svg" virtual property ! Add the MvxImageViewSvgDrawableTargetBinding file to your project, and register it from your mvvmcross Setup class:

    public class Setup : MvxAndroidSetup
    {
        ...

        protected override void FillTargetFactories(IMvxTargetBindingFactoryRegistry registry)
        {
            base.FillTargetFactories(registry);
            MvxImageViewSvgDrawableTargetBinding.Register(registry);
        }
    }

Android

    <XamSvg.SvgImageView
        local:MvxBind="Svg MyStringProperty"
        android:layout_width="wrap_content"
        android:layout_height="50dp" />

iOS

    set.Bind(icon).For("Svg").To(vm => vm.MyStringProperty);

Optimizing SVG image files

You can use the free svg image editor Inkscape to modify and generate optimized svg files, to change the bounding box (which changes the aspect ratio), or to simplify the SVG if it is not displayed correctly.

You can then use Internet Explorer to verify if your optimized svg still appears correctly.

Note that XamSvg does not set a default color if none is specified in the svg file. So either set a color, or use a color mapping from #00000000 (transparent) to something non transparent.

SVg files can also be exported from Photoshop and Illustrator, as long as they don't contain bitmaps. Bitmap extensions of svg will not render. You can check for bitmap data in a svg file by opening it and looking for tons of raw bytes.

Features

The idea behind XamSvg was to include only svg features that can draw fast on all platforms. This matches most svg files. Some uncommon or non-native svg features are not implemented: svg containing bitmaps are not rendered (they can not scale smoothly). If you are not sure if your svg file contains a bitmap, open it in any text editor and check for raw bytes data.

The svg images can be loaded from .NET embedded resources (see the Xamarin Forms chapter in this document), the resource bundle on iOS, the raw resource folder on Android, or a string.

Performance

Svg parsing performance is good (svg files are very small), and the svg drawing code is very fast: it uses exclusively the native Path object which is hardware accelerated on all platforms.

Additionally, the Android version includes a thread safe cache of the rendered SVGs. This appears to be a good feature at start, but is in fact unnecessary. You can disable the cache by adding local:useCache="false". The cache is also disabled if both the width and height are 0 (native size).

Supported platforms

Android api level 15+ (Android 4.0.3+)
iOS 7+ with ios 64bits projects
WP 8.1

The library requires PCL (Portable Class Library) support available from Visual Studio 2012 or Xamarin Studio.

iOS versions supports AutoLayout and storyboards (storyboard support is unofficial though).

Source code

This package includes the full source code of the library and the samples.

Get in touch!

Testimonials

This library is already used in these commercial apps :

Release Notes

- Bunch of new features

Supports Universal Windows 10 ! You can now use XamSvg on all plaforms supporting universal windows, including Windows Store apps. New FillMode property, which is set to Fit by default. You can set it to Fill and the svg will not respect its aspect ratio. New ResourceAssemblies property, if you have more than one assemblies containing svg linked to your app. Full asynchronous loading (and cancelling on rebind) on a worker thread. Can be disabled. This is very useful when an svg is included into a reusable cell of a list or collection: the list will scroll smoothly. Supports CSS in svg files.

- Lots of fixes

The core engine has been simplified to offer the same experience on all platforms. Fix some rare crashes and inconsistencies among which:

  • ios: incorrect color displayed
  • scaling, scaling, scaling. It does work in nearly all situations and parameter combinations on all plaforms.

- Breaking changes

Xamarin.Forms support has been moved into another component Asynchronous loading does change the aviability of the Image property. If you relied on the content of the Image property immediatly after creating the svg, you have 2 solutions: await on the Task which is exposed in the svg object, or set the async flag to false in the constructor.

A private nuget server is available as an alternative to this component after your purchase.

Scalable vector graphics for all devices

Write a Review

7 reviews

Jason C. HandUber rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

The XAML and API is slick. I bought this when it was ~$100. Now at $295 it seems very expensive. That said, if you don't mind the price tag it is a handy library and I do think Xamarin/Microsoft should buy this component and make it part of the standard Xamarin API. The documentation leaves much to be desired, it's scattered (between 3 websites and the email you get when you sign up) and not up to date (especially for UWP).

Posted on: December 18, 2016 / Version: 1.5.0
johan franzen rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

The component is ok but make sure not to be too critical to the supplier because then the support is "not in the mood" to help you.

Posted on: June 30, 2016 / Version: 2.1.0
Nik Velinov rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

Great tool! I am still learning how to work with SVG and am working my way through some Windows Phone binding issues, but this is a must for good apps!

Thanks for the support!

Posted on: May 23, 2016 / Version: 2.1.0
Cristiano Ruisi rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

Great SVG tool, it deserve every single $.

A must buy, for every cross-Platform app.

Posted on: May 16, 2016 / Version: 2.1.0
jiang zhiyi

I buy xamsvg just now 2016-3-5 11:00 at china,the XamSvg 2.0.12 is released,but why I download the 1.5 version???

Posted on: March 5, 2016 / Version: 1.5.0
Ariel Unanue rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

This is an awesome component, saves me a lot of time. I have many common images used on several Apps and now I can have all of them in a shared library thanks to the "ResourceAssembly".

The ColorMapping is also a great feature.

Now I don't have to bother about having different resolutions & colors in my images.

There are some minor issues but the support is great, they send you a new package with the fix right away.

Posted on: July 1, 2015 / Version: 1.3
Grisha Vinevich rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

I bought this package recently and I think it is very good. I have the smaller app and I don't need to bother about different resolutions in my icons - definitely worth the price.

Overall, svg is much flexible format. I can present the same icon in different colors to support multiple themes very easily. I can read the svg code into string and make some manipulations on it dynamically before loading, which was very important for me. Another important thing - when I found some (minor) bug in the package, the support team was fast and effective. It took them less than 24 hours to release updated nuget. Well done!

Posted on: May 28, 2015 / Version: 1.2