Embedded Files
Converting Graphics For Windows XAML Usage
Converting Graphics For Windows XAML Usage
Step One: Prepare Your Graphics
Step One: Prepare Your Graphics
Clean Up Your Shapes and Layers
Clean Up Your Shapes and Layers
You want to get your layers as simple as possible.
If you have letters as part of your glyph, you need to convert them to a shape or outlines.
Any basic shapes like a rectangle or ellipse need to be flattened or they won't be converted correctly.
Colors don't matter at this point. The glyph color should be set in code and not hardcoded into the graphic. There are very few exceptions to this
IMPORTANT: Your glyph should be contained inside an artboard all by itself and the artboard should be the size you want the bounding box to be in Camtasia or Snagit. If you don't do this the alignment of the glyph inside the bounding box when exported to XAML will be way off.
In these bottom images you can see that the artboards have only two shapes, even though 7 shapes were used to create the base of the microphone.
There also isn't a containing group. This isn't essential but if your glyph is in an artboard without anything else, this is the cleanest way to export. The group adds unnecessary clutter to the SVG for conversion.
Sketch
Sketch
Figma
Figma
Step Two: Export as SVG
Step Two: Export as SVG
Sketch
Sketch
Figma
Figma
Verify that the SVG is clean and XAML ready in the conversion tool below. Also, make sure the SVG is using PATH tags (i.e. instead of RECT tags)--the union and combine/flatten action in the drawing tools usually take care of this.
Step Three: Convert SVG to XAML
Step Three: Convert SVG to XAML
The main purpose for the SVG to XAML conversion tool is to get the path data for each shape. By default, the app will export all shapes as a DrawingImage with GeometryDrawings. We do not use DrawingImages for glyphs and this raw data should not be handed over to development. The exception to this is when we have complex illustrations with very unique applications. An example of this is the illustration used on the splash screen of the installer or Snagit and Camtasia.
Glyphs should be as clean as possible for extensibility, consistency and reusability reasons.
Open SVGtoXAML
Drag and drop your SVG file to the empty area
Preview XAML
What you are looking for in the XAML is that each shape that you can see visually is represented by one GeometryDrawing. If you see multiple Geometry Drawings for something that should be one shape visually, that means you haven't combined your images properly in your graphics editor.
If you see a rectangle, ellipse or other shape defined instead of a GeometryDrawing, that means you haven't flattened your shapes in your graphics editor.
This tool has been proven to be fairly reliable. If the preview doesn't show anything and the XAML is weird or empty, then there is something wrong with the SVG. You are either doing non-basic stuff or the glyph was exported incorrectly. (Some apps don't export clean SVG and that can mess up the conversion).
Tip: Ignore the ClipGeometry
Tip2: You can also open a folder in the tool, then export them all into one XAML file with one DrawingImage per glyph.
Correct
Incorrect
Step Four: Create Reusable Glyph Template
Step Four: Create Reusable Glyph Template
Last step. Now you have to take the Geometry data from the shapes above and paste them into the template that we use across Snagit and Camtasia. Here is the simple template for a glyph with a single path:
<ControlTemplate x:Key="NAMEOFGLYPH">
<Path Data="PASTE DATA HERE"
Stretch="Uniform"
Fill="{TemplateBinding Foreground}" />
</ControlTemplate>
Here is the template for a more complex glyph with multiple paths:
<ControlTemplate x:Key="NAMEOFGLYPH">
<Grid>
<Path Data="PASTE DATA HERE"
Stretch="Uniform"
Fill="{TemplateBinding Foreground}" />
<Path Data="PASTE DATA HERE"
Stretch="Uniform"
Fill="{TemplateBinding Foreground}" />
</Grid>
</ControlTemplate>
The complex glyph template can be expanded upon with more Paths.
Example Converted XAML Code
Example Converted XAML Code
<DrawingImage x:Key="glyph_microphoneDrawingImage">
<DrawingImage.Drawing>
<DrawingGroup ClipGeometry="M0,0 V32 H32 V0 H0 Z">
<GeometryDrawing Brush="#FFD8DEE3" Geometry="F1 M32,32z M0,0z M12,6.5C12,4.01472 14.0147,2 16.5,2 18.9853,2 21,4.01472 21,6.5L21,15.5C21,17.9853 18.9853,20 16.5,20 14.0147,20 12,17.9853 12,15.5L12,6.5z" />
<GeometryDrawing Geometry="F1 M32,32z M0,0z M25.2769,19.1355C25.7543,17.9829,26,16.7476,26,15.5L23.0787,15.5C23.0787,16.3639 22.9085,17.2194 22.5779,18.0176 22.2473,18.8157 21.7627,19.5409 21.1518,20.1518 20.5409,20.7627 19.8157,21.2473 19.0176,21.5779 18.2194,21.9085 17.3639,22.0787 16.5,22.0787 15.6361,22.0787 14.7806,21.9085 13.9824,21.5779 13.1843,21.2473 12.4591,20.7627 11.8482,20.1518 11.2373,19.5409 10.7527,18.8157 10.4221,18.0176 10.0915,17.2194 9.92132,16.3639 9.92132,15.5L7,15.5C7,16.7476 7.24572,17.9829 7.72314,19.1355 8.20056,20.2881 8.90033,21.3354 9.78249,22.2175 10.6646,23.0997 11.7119,23.7994 12.8645,24.2769 13.5519,24.5616 14.2687,24.7639 15,24.8808L15,28 10,28 10,30 23,30 23,28 18,28 18,24.8808C18.7313,24.7639 19.4481,24.5616 20.1355,24.2769 21.2881,23.7994 22.3354,23.0997 23.2175,22.2175 24.0997,21.3354 24.7994,20.2881 25.2769,19.1355z">
<GeometryDrawing.Brush>
<SolidColorBrush Color="#FFD8DEE3" Opacity="0.25" />
</GeometryDrawing.Brush>
</GeometryDrawing>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
Example Prepared Glyph Template
<ControlTemplate x:Key="MicrophoneOnGlyph">
<Grid>
<Path Data="F1 M32,32z M0,0z M12,6.5C12,4.01472 14.0147,2 16.5,2 18.9853,2 21,4.01472 21,6.5L21,15.5C21,17.9853 18.9853,20 16.5,20 14.0147,20 12,17.9853 12,15.5L12,6.5z"
Stretch="Uniform"
Fill="{TemplateBinding Foreground}" />
<Path Data="F1 M32,32z M0,0z M25.2769,19.1355C25.7543,17.9829,26,16.7476,26,15.5L23.0787,15.5C23.0787,16.3639 22.9085,17.2194 22.5779,18.0176 22.2473,18.8157 21.7627,19.5409 21.1518,20.1518 20.5409,20.7627 19.8157,21.2473 19.0176,21.5779 18.2194,21.9085 17.3639,22.0787 16.5,22.0787 15.6361,22.0787 14.7806,21.9085 13.9824,21.5779 13.1843,21.2473 12.4591,20.7627 11.8482,20.1518 11.2373,19.5409 10.7527,18.8157 10.4221,18.0176 10.0915,17.2194 9.92132,16.3639 9.92132,15.5L7,15.5C7,16.7476 7.24572,17.9829 7.72314,19.1355 8.20056,20.2881 8.90033,21.3354 9.78249,22.2175 10.6646,23.0997 11.7119,23.7994 12.8645,24.2769 13.5519,24.5616 14.2687,24.7639 15,24.8808L15,28 10,28 10,30 23,30 23,28 18,28 18,24.8808C18.7313,24.7639 19.4481,24.5616 20.1355,24.2769 21.2881,23.7994 22.3354,23.0997 23.2175,22.2175 24.0997,21.3354 24.7994,20.2881 25.2769,19.1355z"
Stretch="Uniform"
Fill="{TemplateBinding Foreground}"
Opacity="0.3" />
</Grid>
</ControlTemplate>
Note the use of the "Opacity" tag for the second path.
Report abuse