Thanks for downloading XamSvg!
If you haven't already, check out the Getting Started documentation for XamSvg here.
Stop using multiple PNG/JPG images !
Use SVG vector images instead. On all target devices.
This package supports 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).
Xamarin Forms: use the XamSvg for Xamarin Forms component instead, which includes this component.
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.
<XamSvg.SvgImageView app:svg="res:svgimages.logo" app:colorMapping="EAEDF1=494949;FFFFFF=000000;e9f1f7=ffFFFFFE;646464=FFFFFE" app:colorMappingSelected="EAEDF1=888888;FFFFFF=111111" android:layout_width="wrap_content" android:layout_height="50dp" />
Use the ColorMapping property for normal display, and ColorMappingSelected for pressed display (selected on some platforms).
Easy to use
Native iOS (also available in storyboards, base type is UIImageView)
var svgImage = new UISvgImageView("res:svgimages.logo")
Native Android (also available in code)
<XamSvg.SvgImageView app:svg="res:svgimages.logo" android:layout_width="wrap_content" android:layout_height="30dp" />
<XamSvg.SvgImageView app:svg="@raw/logo" app:fillMode="fit" android:layout_width="wrap_content" android:layout_height="30dp" />
Xaml (Universal Windows / Windows 8.1)
<svg:Svg Source="res:svgimages.logo" HorizontalAlignment="Stretch" VerticalAlignment="Center" />
All properties are bindable and can be dynamically changed.
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.
- Android api level 15+ (Android 4.0.3+)
- iOS 8+ (iOS 7 should work)
- WP 8.1
Use the XamSvg for Xamarin Forms component instead, which includes this component.
This package includes the full source code of the library and the samples.
You may also browse the samples online
Some SVG icon sources
This library is already used in these commercial apps :
- VfrTracks Flight Recorder (Axel Charpentier)
- KVMR Radio (Matt Harrington)
- Radios Zen
- plus lots more B2B apps
Get in touch!
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