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
               });
           }
       }
}