Wpf InkCanvas save stokes as svg

Question

Can I save an InkCanvas stroke collection to an svg image? The only thing I can find is that I can save strokes as GIFs with built-in ISF (Ink Serialized Format) or maybe make them bitmap. I want to save strokes in vector format, which can be compatible with other platforms (for example, on the Internet).

Answer 1

I get it.

Following are the steps

• StrokeCollection over StrokeCollection
• Get the PathGeometry each Stroke by calling the GetGeometry function and then calling GetOutlinedPathGeometry .
• Get Figures from Geometry . I do this by storing PathGeometry in XAML and then parsing the Figures attribute on XElement.Parse .
• Then I can just create an svg document and add each path (see code below).

I am using the SVG Rendering Library to create an SVG document.

 var svg = new SvgDocument(); var colorServer = new SvgColourServer(System.Drawing.Color.Black); var group = new SvgGroup {Fill = colorServer, Stroke = colorServer}; svg.Children.Add(group); foreach (var stroke in InkCanvas.Strokes) { var geometry = stroke.GetGeometry(stroke.DrawingAttributes).GetOutlinedPath‌​Geometry(); var s = XamlWriter.Save(geometry); if (s.IsNotNullOrEmpty()) { var element = XElement.Parse(s); var data = element.Attribute("Figures")?.Value; if (data.IsNotNullOrEmpty()) { group.Children.Add(new SvgPath { PathData = SvgPathBuilder.Parse(data), Fill = colorServer, Stroke = colorServer }); } } }