New version of ReaderSvg improved support for Inkscape and adds many other new features

by abenedik 25. March 2015 20:39

I am happy to announce that the ViewerSvg (svg to xaml converter) and the ReaderSvg library have been greatly improved.

After some great customer feedback I spent some time in Inkscape. It is really a great vector drawing application with very good svg files support. The reason for checking Inkscape was that I wanted to check how custom rotate point in Inkscape is saved into svg file. The trick is that standard svg file does not support saving custom rotate point. To preserve data about custom rotate point Inkscape saves that into its custom attribute: inkscape:transform-center-x and inkscape:transform-center-y.

When drawings from svg files are shown, the custom rotate points is not important. But when the parts of the drawing are animated, the custom rotate point is very important.

Therefore I am happy to inform you that ReaderSvg has been improved so that the custom rotate center is read into the RenderTransformOrigin WPF property. This way quite tricky to implement because Inkscape saves the custom rotate center in absolute coordinates, but RenderTransformOrigin requires values to be in relative coordinates. Anyway, this works very well now.

After that improvement I have invested some additional time and added the following improvements and fixes to ReaderSvg:

  • Added possibility to set the WPF name of the objects from the Inkscape's Label (inkscape:label attribute).
  • Changed reading transformations from svg files so that the type of transformation is preserved (rotate transform is read as RotateTransform and not as MatrixTransform as before). Added new property to ReaderSvg to control this behavior: ConvertTransformationsToMatrixTransform. You can set it to true for backward compatibility.
  • Fixed reading text that is rendered with outlines.
  • Improved using viewBox attribute.
  • Improved using svg and use elements when they use clipPath, transform and viewBox.
  • Improved TrueTransform when transforming LinearGradient and RadialGradient brushes.
  • Improved support for clipping when converting shapes to geometry.
  • Added "preview Images" option to ViewerSvg. Fixing some bugs in ViewerSvg application.
  • Improved transforming object's position and size to simplify creating XAML from parts of svg file.
  • Removed setting some default values on TextBlock element: FontStyle="Normal" FontWeight="Normal" HorizontalAlignment="Center" VerticalAlignment="Bottom" (this creates cleaner XAML).
  • Improved clipping behavior with adding support for UserSpaceOnUse value in svg clipPathUnits attribute.
  • Changing the way names are set to objects when a new Canvas is created to host the object's transformation. Now the object gets the original svg name. The created transformation Canvas gets the name that has "_transform" suffix. This behavior can be controlled by SetSvgNameToParentTransformCanvas and TransformCanvasNameFormatString properties.


For example for the following svg file:

<rect id="rect1" x="20" y="10" transform="matrix(-1 0 0 1 0 0)" />

ReaderSvg creates the following XAML:

<Canvas Name="rect1_transform" RenderTransform="-1 0 0 1 0 0" >
    <Rectangle Name="rect1" Canvas.Left="20" Canvas.Top="10" />

This way all the data from the svg file are preserved – x and y are converted into Canvas.Left and Canvas.Top, matrix transform is converted into RenderTransform.

To preserve the values we also need to create a new Canvas that contains the RenderTransform. If RenderTransform would be added to the Rectangle, than the Rectangle would be rendered at the wrong location because the Canvas.Left and Canvas.Top would not be transformed with RenderTransform matrix (Canvas position is applied after the transformation).


Already the most accurate svg reader has been improved. And I have also shown that the product is still actively developed. So if you find a svg file that is not imported correctly, just upload it with using the Feedback panel.