How to use Svg image with multiple paths

Question

For a test, I used InkScape to create following svg file that correctly displays the the image TEX in all major browsers (IE, Chrome, Edge, FireFox etc.). Now I want to display this as an icon for a button on a WPF app. AS you may have noticed the svg file has multiple paths. I tried to used those multiple paths in WPF button as follows but it does not show the image TEX . Question : How do we use multiple Paths of an svg image in a WPF app. How the following svg file can be used to display an icon of a button in a WPF app?

WPF Button [does not display the svg icon]

<Button Width="36" Height="36" ToolTip="Test for svg image">
    <Viewbox>
       <Grid>
            <Path Data="M 65.210466,41.41868 H 62.80752 V 47.625 h -1.984369 v -6.20632 h -2.402946 v -1.488276 h 6.790261 z"/>
            <Path Data="m 71.969722,47.625 h -5.565534 v -7.694596 h 5.565534 v 1.488276 h -3.591501 v 1.32808 h 3.33312 v 1.488277 h -3.33312 v 1.901686 h 3.591501 z"/>
            <Path Data="M 80.609994,47.625 H 78.315568 L 76.65676,45.092863 74.966946,47.625 h -2.191074 l 2.728507,-3.87572 -2.671663,-3.818876 h 2.289258 l 1.601965,2.397779 1.648473,-2.397779 h 2.196241 l -2.687166,3.741362 z"/>
       </Grid>
    </Viewbox>
</Button>

svg file :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="22.189789mm"
   height="7.6945963mm"
   viewBox="0 0 22.189789 7.6945963"
   version="1.1"
   id="svg45"
   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
   sodipodi:docname="drawing-1_plain_Path.svg">
  <defs
     id="defs39" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="-307.94363"
     inkscape:cy="409.08194"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     inkscape:document-rotation="0"
     showgrid="false"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0"
     inkscape:window-width="1366"
     inkscape:window-height="705"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata42">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-58.420205,-39.930404)">
    <g
       aria-label="TEX"
       id="text49"
       style="font-weight:bold;font-size:10.5833px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';stroke-width:0.264583"
       inkscape:export-xdpi="96"
       inkscape:export-ydpi="96">
      <path
         d="M 65.210466,41.41868 H 62.80752 V 47.625 h -1.984369 v -6.20632 h -2.402946 v -1.488276 h 6.790261 z"
         style="stroke-width:0.264583"
         id="path60" />
      <path
         d="m 71.969722,47.625 h -5.565534 v -7.694596 h 5.565534 v 1.488276 h -3.591501 v 1.32808 h 3.33312 v 1.488277 h -3.33312 v 1.901686 h 3.591501 z"
         style="stroke-width:0.264583"
         id="path62" />
      <path
         d="M 80.609994,47.625 H 78.315568 L 76.65676,45.092863 74.966946,47.625 h -2.191074 l 2.728507,-3.87572 -2.671663,-3.818876 h 2.289258 l 1.601965,2.397779 1.648473,-2.397779 h 2.196241 l -2.687166,3.741362 z"
         style="stroke-width:0.264583"
         id="path64" />
    </g>
  </g>
</svg>

Answer 1

You can use tool named SvgToXaml to convert svg to xaml and you can use the resource in xaml generated by SvgToXaml.

The genereated xaml and codes use it is attached below:

<Button>
        <Button.Resources>
            <Geometry x:Key="iconGeometry1">F1 M22.189789,7.6945963z M0,0z M65.210466,41.41868L62.80752,41.41868 62.80752,47.625 60.823151,47.625 60.823151,41.41868 58.420205,41.41868 58.420205,39.930404 65.210466,39.930404z</Geometry>
            <Geometry x:Key="iconGeometry2">F1 M22.189789,7.6945963z M0,0z M71.969722,47.625L66.404188,47.625 66.404188,39.930404 71.969722,39.930404 71.969722,41.41868 68.378221,41.41868 68.378221,42.74676 71.711341,42.74676 71.711341,44.235037 68.378221,44.235037 68.378221,46.136723 71.969722,46.136723z</Geometry>
            <Geometry x:Key="iconGeometry3">F1 M22.189789,7.6945963z M0,0z M80.609994,47.625L78.315568,47.625 76.65676,45.092863 74.966946,47.625 72.775872,47.625 75.504379,43.74928 72.832716,39.930404 75.121974,39.930404 76.723939,42.328183 78.372412,39.930404 80.568653,39.930404 77.881487,43.671766z</Geometry>
            <DrawingGroup x:Key="iconDrawingGroup" ClipGeometry="M0,0 V7.6945963 H22.189789 V0 H0 Z">
                <DrawingGroup Opacity="1" Transform="1,0,0,1,-58.420205,-39.930404">
                    <DrawingGroup Opacity="1">
                        <GeometryDrawing Brush="#FF000000" Geometry="{StaticResource iconGeometry1}" />
                        <GeometryDrawing Brush="#FF000000" Geometry="{StaticResource iconGeometry2}" />
                        <GeometryDrawing Brush="#FF000000" Geometry="{StaticResource iconGeometry3}" />
                    </DrawingGroup>
                </DrawingGroup>
            </DrawingGroup>
        </Button.Resources>
        <Image>
            <Image.Source>
                <DrawingImage Drawing="{StaticResource iconDrawingGroup}" />
            </Image.Source>
        </Image>
    </Button>

Answer 2

Your SVG contains an outer group with a transform attribute:

<g
   inkscape:label="Layer 1"
   inkscape:groupmode="layer"
   id="layer1"
   transform="translate(-58.420205,-39.930404)">

Without using this transformation for your WPF content, the paths are simply outside the viewable area.

Resolving the transform in Inkscape is a bit tricky, because the Inkscape UI hides this group, renaming it a "layer". You need to

• make sure in Preferences that Behavior -> Transforms -> Store transformation: Optimized is selected
• open the XML editor
• select the <svg:g> element with id="layer1"
• delete the attribute inkscape:groupmode
• then, in the grafical UI you can ungroup the selected group (two times, to also ungroup the inner group)

This will rewrite the individual paths applying the translation so you can use them in your WPF button.