mntone / SvgForXaml

Draw SVG image with Win2D

Svg for Xaml Library

Draw images from svg file with Win2D.

Tokyo railmaps

Thanks to railmaps

Requirement

• Win2D

Usage

xaml with binding

Binding content type is SvgDocument.

<svg:SvgImage Content="{Binding ...}" />

Renderer a raster image from svg image

var svg = SvgDocument.Parse(...);
var uri = new Uri("ms-appdata:///local/filename.jpg");
var file = await StorageFile.GetFileFromApplicationUriAsync(uri);
await SvgImageRenderer.RendererImageAsync(file, new SvgImageRendererSettings()
{
	Document = svg,
	Format = SvgImageRendererFileFormat.Jpeg,
	Scaling = 10.0F,
	Quality = 0.8F,
});

Rendering in Win2D ecosystem

var svg = SvgDocument.Parse(...);

var width = 24.0F;
var height = 24.0F;
var scaling = 3.0F;
var device = CanvasDevice.GetSharedDevice();
using (var offScreen = new CanvasRenderTarget(device, width, height, scaling * 96.0F))
using (var renderer = new Win2dRenderer(offScreen, svg))
using (var session = offScreen.CreateDrawingSession())
{
	session.Clear(Colors.Transparent);
	renderer.Renderer(width, height, session); // <- rendering svg content
}

Note

If you build your app for Windows 10 Aniversary Update or later, you should use SVG API on Direct2D.

• Direct2D: https://msdn.microsoft.com/en-us/library/windows/desktop/mt790715.aspx, or
• Win2D: https://microsoft.github.io/Win2D/html/N_Microsoft_Graphics_Canvas_Svg.htm

LICENSE

MIT License

Author

• mntone
  GitHub: https://github.com/mntone
  Twitter: https://twitter.com/mntone (posted in Japanese; however, english is ok)