Wpf InkCanvas save stokes as svg

Question

Is it possible to save InkCanvas stroke collection to svg image? Only thing I can find is that I can save the strokes as GIF with embedded ISF (Ink Serialized Format) or maybe render them as bitmap. I want to save strokes in vector format that can be interoperable with other platforms (like web).

Answer 1

I figured it out.

Here are the steps

1. Iterate over the StrokeCollection
2. Get PathGeometry of each Stroke by calling GetGeometry function and then calling GetOutlinedPathGeometry.
3. Get Figures out of Geometry. I am doing it by saving the PathGeometry to XAML and then parsing the Figures attribute by XElement.Parse.
4. Then I can just create a svg document and add each path (see code below).

I am using SVG Rendering Library to create 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
               });
           }
       }
}