XamaRed.Forms.Svg is simple SVG viewer control for Xamarin Forms. It is based on SkiaSharp.
- Display simple SVG files directly from a PCL project
- Stretching options
- Horizontal and vertical alignment of the SVG inside its canvas
This control is available as a Nuget package :
- SVG files must be located in a PCL assembly, with
Embedded Resourcebuild action.
- The resource identifier of the file must be provided.
Namespace declaration :
Simple image display :
<svg:SvgView ResourceId="MyProject.Assets.myfile.svg" />
Image display with custom stretch mode and alignment :
<svg:SvgView ResourceId="MyProject.Assets.myfile.svg" VerticalAligment="Middle" HorizontalAligment="Middle" Stretch="UniformToFill" />
About stretch mode and alignment
The stretch modes are the same as in WPF :
Uniform: uniform stretch the SVG as much as possible while keeping the SVG fully visible
UniformToFill: uniform stretch the SVG as much as possible until the parent is fully filled with the SVG. Some parts of the SVG will probably be hidden
Fill: stretch the SVG so it matches its parent width and height. The SVG will probably look distorted.
None: no stretch. Uses the SVG viewbox dimensions.
The alignment values match the ones in Xamarin Forms :
Stretch and Horizontal/Vertical alignments should be used together in order to obtain the intended rendering.
|Stretch||Horizontal alignment||Vertical alignment||Result example|
Please check the included samples for more examples.
More advanced features
The assembly containing the SVG files will default to the Xamarin Forms application assembly. It is possible to override this behavior by setting the
MainPclAssembly static property.
In order to simplify the resource identifiers, it is also possible to set a default prefix which will be added in front of all identifiers of all
SvgView instances. This is done through the
ResourceIdsPrefix static property.
SvgView.ResourceIdsPrefix = "XamaRed.Forms.Svg.Tests.Assets."; SvgView.MainPclAssembly = typeof(EnsurePictureTests).Assembly;
<svg:SvgView ResourceId="inkscape.svg" />
The SVG support of Skia is currently limited to basic features. Advanced SVG files may not render correctly.