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

XamSvg for Xamarin.Forms 2.3.3

Vapolia SARL

Use SVG vector images in your Xamarin Forms apps. SVG images autoscale and are nodpi.

XamSvg

Stop using multiple PNG/JPG images !
Use SVG vector images instead. On all target devices.

This package supports the Xamarin.Forms framework on Xamarin iOS, Xamarin Android, Universal Windows and Windows Phone 8.1 projects. It is delivered with a private nuget server (one year access) and full source code (at time of purchase).

Productivity is increased

Adding and updating PNG/JPG images at different sizes and resolutions is a tedious task, which slows down productivity and increases the complexity of the solution. SVG are standard small vector graphic files that autoscale without any stair step artifact on any device resolution and at any size. You can use them for nearly all images in your Xamarin application (native or Forms).

Adobe Photoshop, Illustrator, Sketch, Inkscape ... are graphic softwares commonly used by designers.
They all support exporting to SVG files.

Svg images are shared across projects

Add your SVG images once to your solution, and use them in Android, iOS, and WP/UWP !
Svg files can be added in a PCL portable library project with their "build action" set to "Embedded Resource".
Then the same svg image can be referenced from any project using the "res:" prefix combined with the svg's .NET resource path.

Svg files can also be read from native Android (raw) resources, iOS resources (bundle), strings and generic text streams.

High performance, smaller size

XamSvg has a low performance hit. It uses hardware accelerated graphics functions, and is fully asynchronous by default.
It has been successfully used in infinite listviews (with cell recycling) displaying at 60fps, and in grid layouts.

SVG are xml text files. They are much much smaller than raster images (JPG/PNG) and can drastically decrease the size of your final app.

Memory management is efficient: svg are read in forward mode only.
Optimize your SVG further for XamSvg using our guide.

Same SVG, multiple colors

Change any color to another easily with color mapping. You'll need only one SVG for multiple icon colors !
Supports RRGGBB and AARRGGBB syntaxes.

<svg:SvgImage Svg="res:images.logo" HorizontalOptions="Center" HeightRequest="20" 
              Clicked="OnSvgClicked" ClickedCommand="{Binding SvgClickedCommand}"
              ColorMapping="EAEDF1=494949;FFFFFF=000000;e9f1f7=ffFFFFFE;646464=FFFFFE"
              ColorMappingSelected="EAEDF1=888888;FFFFFF=111111" />

Use the ColorMapping property for normal state, and ColorMappingSelected for pressed state.

Easy to use

This example displays the image logo.svg stored in the /Images folder of your PCL assembly, with its build action set to Embedded Resource.

<svg:SvgImage Svg="res:images.logo" HorizontalOptions="Center" HeightRequest="50" />

All properties are bindable and can be dynamically changed.

<svg:SvgImage Svg="{Binding SvgName}" HorizontalOptions="Center" HeightRequest="50" />

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

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

Supported platforms

  • Android api level 15+ (Android 4.0.3+)
  • iOS 8+ (iOS 7 should work)
  • WP 8.1
  • UWP

Source code

This package includes the full source code of the library and the samples.
You may also browse the samples online

Some SVG icon sources

Customers

This library is already used in these commercial apps :

Get in touch!

Release Notes

  droid: no more blurred svg (removed hardware accel) on android 6+
  droid: preview svg in xamarin designer (alpha)
  uwp: support for SvgImageBuilder
  uwp: breaking change: Source is now a string to overtake the Uri string length limitation
  uwp: missing new System.Console nuget dependency
  uwp: add guards against unknown values crashing ScaleTransform ScaleX setter for a customer (unreproductible)
  uwp: finished adding logs. Add XamSvg.Shared.Config.NativeLogger.TraceEnabled=true to activate solution wide Svg logging
  fix nuget dependencies for netstandard / uw10
  css: fix parsing of exponential values (8.00e-2)
  fix "opacity" attribute not working as expected
  logging architecture
  all(ios,android,wp,win10): fix smooth quadratic curves
  all: fix rotation transform with non 0 center point
  all: added support for % in rect tag
  all: fix elliptic arcs
  uwp: fix partial figure drawings
  compatibility with .net standard 1.1
  all platforms: ILogger interface with default implementation for ios/android
  ios: new IsSelected property, which is a persistent version of 'Highlighted'
  android: fix SvgFactory.GetDrawable can't find svg embedded resources
  android: svg renders fine on api lower 23 if canvas is hardware accelerated. Previously the canvas should never be hardware accelerated on api lower than 23. Note: this is inefficient, disable hw on canvas is much better.
  android forms: fix Command/ClickedCommand seems not to work
  android: fix loading of 'string:' svg
  android: Svg, ColorMapping, ColorMappingSelected properties are now bindable
  android: loading is now much faster, using an async worker thread. Can be disabled by adding local:loadAsync='false' to SvgImageView.
  android: memory footprint is much lower, caching in bitmaps have been removed. SvgBitmapDrawable has been replaced with the new SvgPictureDrawable. Views displaying this drawable must not be hardware accelerated if API is lower than 23. Use SetLayerType(LayerType.Software, null); on your view if required.
  android: detailed logging can be enabled by adding in the layout xml local:traceEnabled="true"
  ios: new property ShouldClearImageWhenUpdating (default true). When false, images are not cleared when a bindable property is changed, and before svg is reloaded in background.
  ios: fix linear and radial gradients mirror/repeat modes
  all: fix object opacity
  all: fix bug loading resources from multiple sources
  all: improve a lot css parsing speed and memory footprint it uses. Css parsing is still a slow operation. Avoid using CSS 'styles' in your svg.
  android: speed up path parsing, better async loading
  android: fix invalidation bug introduced in beta1 with async loading
  android: when local:traceEnabled="true", display the svgId inside the rendered svg
  android: ColorMapping and ColorMappingSelected are now bindable.
  android: loading is now much faster, using an async worker thread. Can be disabled by adding local:loadAsync='false' to SvgImageView.
  android: memory footprint is much lower, caching in bitmaps have been removed. SvgBitmapDrawable has been replaced with the new SvgPictureDrawable. Views displaying this drawable must not be hardware accelerated if API lower than 23. Use SetLayerType(LayerType.Software, null); on your view if required.
  android: loggin can be enabled by adding in the layout xml local:traceEnabled="true"
  android: Svg, ColorMapping, ColorMappingSelected properties are now bindable
  uw/wp81: Fix specific unexpected behaviors
  Fix crash in Universal Windows when svg is used in lists. Built with Xamarin stable.
  Definetly fix a specific case of elliptical arcs on ios. Built with Xamarin beta channel.
  Fix relative elliptical arcs on ios.
  fix regression with bad colors on ios.
  fix short html color decoding, ios: complete elliptical arc drawing

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

Scalable vector graphics for all devices

Write a Review

1 review

Andrei Nitescu rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

As mobile developers we know how important is to have SVG rendering capability in our apps.

Rendering vector graphics is such an indispensable feature, especially when the application is cross platform. XamSvg really does a good job in terms of features and speed.

Posted on: August 5, 2016 / Version: 2.1.0