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>
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>