WPF Query regarding SVG to DrawingImage conversion-CodePudding

I have an SVG input, like this.

<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M45.776 4.30438C47.4711 4.487 49.1511 4.68276 50.8146 4.87554C55.2009 5.38393 58.7008 8.88148 59.1936 13.2695C59.3792 14.9223 59.5662 16.5914 59.7399 18.2757" stroke="black" stroke-width="4.57143" stroke-linecap="round"/><path d="M45.776 59.6855C47.4711 59.5031 49.1511 59.307 50.8146 59.1145C55.2009 58.6062 58.7008 55.1086 59.1936 50.7204C59.3792 49.0674 59.5662 47.3984 59.7399 45.7142" stroke="black" stroke-width="4.57143" stroke-linecap="round"/><path d="M18.2858 4.30438C16.5904 4.487 14.9104 4.68276 13.2469 4.87554C8.86071 5.38393 5.36082 8.88148 4.86821 13.2695C4.68265 14.9223 4.49556 16.5914 4.32166 18.2757" stroke="black" stroke-width="4.57143" stroke-linecap="round"/><path d="M18.2858 59.6855C16.5904 59.5031 14.9104 59.307 13.2469 59.1145C8.86071 58.6062 5.36082 55.1086 4.86821 50.7204C4.68265 49.0674 4.49556 47.3984 4.32166 45.7142" stroke="black" stroke-width="4.57143" stroke-linecap="round"/><path d="M23.292 16.4764L16.3063 16.4764L16.3063 23.3336" stroke="black" stroke-width="4.57143" stroke-linecap="round" stroke-linejoin="round"/><path d="M42.1152 48.9271L49.1008 48.9271L49.1008 42.0699" stroke="black" stroke-width="4.57143" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.5128 33.0606L40.7128 12.268C41.8108 11.5946 42.8575 12.268 42.1872 13.4231L34.1447 28.5684H48.4872C48.4872 28.5684 50.766 28.5684 48.4872 30.3653L23.6894 51.2862C21.9468 52.6981 20.7404 51.928 21.9468 49.746L29.7213 34.9859H15.5128C15.5128 34.9859 13.234 34.9859 15.5128 33.0606Z" fill="black"/></svg>

Whereas, our framework expects a DrawingImage as an input. So, I converted the above SVG to a Geometry Drawing as below (Read somewhere that, Concatenating the Paths would give the whole geometry):

<Geometry x:Key="icon-lightningLogo">M45.776 4.30438C47.4711 4.487 49.1511 4.68276 50.8146 4.87554C55.2009 5.38393 58.7008 8.88148 59.1936 13.2695C59.3792 14.9223 59.5662 16.5914 59.7399 18.2757 M45.776 59.6855C47.4711 59.5031 49.1511 59.307 50.8146 59.1145C55.2009 58.6062 58.7008 55.1086 59.1936 50.7204C59.3792 49.0674 59.5662 47.3984 59.7399 45.7142 M18.2858 4.30438C16.5904 4.487 14.9104 4.68276 13.2469 4.87554C8.86071 5.38393 5.36082 8.88148 4.86821 13.2695C4.68265 14.9223 4.49556 16.5914 4.32166 18.2757 M18.2858 59.6855C16.5904 59.5031 14.9104 59.307 13.2469 59.1145C8.86071 58.6062 5.36082 55.1086 4.86821 50.7204C4.68265 49.0674 4.49556 47.3984 4.32166 45.7142 M23.292 16.4764L16.3063  16.4764L16.3063 23.3336 M42.1152 48.9271L49.1008 48.9271L49.1008 42.0699 M15.5128 33.0606L40.7128 12.268C41.8108 11.5946 42.8575 12.268 42.1872 13.4231L34.1447 28.5684H48.4872C48.4872 28.5684 50.766 28.5684 48.4872 30.3653L23.6894 51.2862C21.9468 52.6981 20.7404 51.928 21.9468 49.746L29.7213 34.9859H15.5128C15.5128 34.9859 13.234 34.9859 15.5128 33.0606Z</Geometry>

The input SVG is:

Whereas the Output is, Observe the arrow kind of symbols and the lines at corners.

I tried converting the SVG as following too:

<Geometry x:Key="icon-lightning-1">M45.776 4.30438C47.4711 4.487 49.1511 4.68276 50.8146 4.87554C55.2009 5.38393 58.7008 8.88148 59.1936 13.2695C59.3792 14.9223 59.5662 16.5914 59.7399 18.2757</Geometry>
<Geometry x:Key="icon-lightning-2">M45.776 59.6855C47.4711 59.5031 49.1511 59.307 50.8146 59.1145C55.2009 58.6062 58.7008 55.1086 59.1936 50.7204C59.3792 49.0674 59.5662 47.3984 59.7399 45.7142</Geometry>
<Geometry x:Key="icon-lightning-3">M18.2858 4.30438C16.5904 4.487 14.9104 4.68276 13.2469 4.87554C8.86071 5.38393 5.36082 8.88148 4.86821 13.2695C4.68265 14.9223 4.49556 16.5914 4.32166 18.2757</Geometry>
<Geometry x:Key="icon-lightning-4">M18.2858 59.6855C16.5904 59.5031 14.9104 59.307 13.2469 59.1145C8.86071 58.6062 5.36082 55.1086 4.86821 50.7204C4.68265 49.0674 4.49556 47.3984 4.32166 45.7142</Geometry>
<Geometry x:Key="icon-lightning-5">M23.292 16.4764L16.3063 16.4764L16.3063 23.3336</Geometry>
<Geometry x:Key="icon-lightning-6">M42.1152 48.9271L49.1008 48.9271L49.1008 42.0699</Geometry>
<Geometry x:Key="icon-lightning-7">M15.5128 33.0606L40.7128 12.268C41.8108 11.5946 42.8575 12.268 42.1872 13.4231L34.1447 28.5684H48.4872C48.4872 28.5684 50.766 28.5684 48.4872 30.3653L23.6894 51.2862C21.9468 52.6981 20.7404 51.928 21.9468 49.746L29.7213 34.9859H15.5128C15.5128 34.9859 13.234 34.9859 15.5128 33.0606Z</Geometry>

<DrawingGroup x:Key="icon-lightning">
    <DrawingGroup Opacity="1">
        <DrawingGroup Opacity="1">
            <GeometryDrawing Brush="#036558" Geometry="{StaticResource icon-lightning-1}">
                <GeometryDrawing.Pen>
                    <Pen LineJoin="Round" StartLineCap="Round" EndLineCap="Round" Thickness="4.57143"/>
                </GeometryDrawing.Pen>
            </GeometryDrawing>
            <GeometryDrawing Brush="#036558" Geometry="{StaticResource icon-lightning-2}">
                <GeometryDrawing.Pen>
                    <Pen LineJoin="Round" StartLineCap="Round" EndLineCap="Round" Thickness="4.57143"/>
                </GeometryDrawing.Pen>
            </GeometryDrawing>
            <GeometryDrawing Brush="#036558" Geometry="{StaticResource icon-lightning-3}">
                <GeometryDrawing.Pen>
                    <Pen LineJoin="Round" StartLineCap="Round" EndLineCap="Round" Thickness="4.57143"/>
                </GeometryDrawing.Pen>
            </GeometryDrawing>
            <GeometryDrawing Brush="#036558" Geometry="{StaticResource icon-lightning-4}">
                <GeometryDrawing.Pen>
                    <Pen LineJoin="Round" StartLineCap="Round" EndLineCap="Round" Thickness="4.57143"/>
                </GeometryDrawing.Pen>
            </GeometryDrawing>
            <GeometryDrawing Brush="#036558" Geometry="{StaticResource icon-lightning-5}" >
                <GeometryDrawing.Pen>
                    <Pen LineJoin="Round" StartLineCap="Round" EndLineCap="Round" Thickness="4.57143"/>
                </GeometryDrawing.Pen>
            </GeometryDrawing>
            <GeometryDrawing Brush="#036558" Geometry="{StaticResource icon-lightning-6}" >
                <GeometryDrawing.Pen>
                    <Pen LineJoin="Round" StartLineCap="Round" EndLineCap="Round" Thickness="4.57143"/>
                </GeometryDrawing.Pen>
            </GeometryDrawing>
            <GeometryDrawing Brush="#036558" Geometry="{StaticResource icon-lightning-7}">
                <GeometryDrawing.Pen>
                    <Pen LineJoin="Round" StartLineCap="Round" EndLineCap="Round" Thickness="4.57143"/>
                </GeometryDrawing.Pen>
            </GeometryDrawing>
        </DrawingGroup>
    </DrawingGroup>
</DrawingGroup>

Nothing worked.

I converted to Canvas, and things worked. But, want to know if there's a way to convert to DrawingImage?

Kindly, help me here. Thanks Prior.

CodePudding user response：

It should be clear that converting an SVG with multiple paths (with different stroke and fill values) into a single Geometry won't work, so you need a DrawingGroup with multiple Drawings.

You did however assign the fill and stroke brushes incorrectly. Instead of assigning the "fill" Brush of the line drawings, you need to assign the "stroke" Brush of the Pen:

<Window.Resources>
    <Geometry x:Key="icon-lightning-1">M45.776 4.30438C47.4711 4.487 49.1511 4.68276 50.8146 4.87554C55.2009 5.38393 58.7008 8.88148 59.1936 13.2695C59.3792 14.9223 59.5662 16.5914 59.7399 18.2757</Geometry>
    <Geometry x:Key="icon-lightning-2">M45.776 59.6855C47.4711 59.5031 49.1511 59.307 50.8146 59.1145C55.2009 58.6062 58.7008 55.1086 59.1936 50.7204C59.3792 49.0674 59.5662 47.3984 59.7399 45.7142</Geometry>
    <Geometry x:Key="icon-lightning-3">M18.2858 4.30438C16.5904 4.487 14.9104 4.68276 13.2469 4.87554C8.86071 5.38393 5.36082 8.88148 4.86821 13.2695C4.68265 14.9223 4.49556 16.5914 4.32166 18.2757</Geometry>
    <Geometry x:Key="icon-lightning-4">M18.2858 59.6855C16.5904 59.5031 14.9104 59.307 13.2469 59.1145C8.86071 58.6062 5.36082 55.1086 4.86821 50.7204C4.68265 49.0674 4.49556 47.3984 4.32166 45.7142</Geometry>
    <Geometry x:Key="icon-lightning-5">M23.292 16.4764L16.3063 16.4764L16.3063 23.3336</Geometry>
    <Geometry x:Key="icon-lightning-6">M42.1152 48.9271L49.1008 48.9271L49.1008 42.0699</Geometry>
    <Geometry x:Key="icon-lightning-7">M15.5128 33.0606L40.7128 12.268C41.8108 11.5946 42.8575 12.268 42.1872 13.4231L34.1447 28.5684H48.4872C48.4872 28.5684 50.766 28.5684 48.4872 30.3653L23.6894 51.2862C21.9468 52.6981 20.7404 51.928 21.9468 49.746L29.7213 34.9859H15.5128C15.5128 34.9859 13.234 34.9859 15.5128 33.0606Z</Geometry>

    <Brush x:Key="fill">#036558</Brush>
    <Pen x:Key="stroke"
         Brush="{StaticResource fill}" Thickness="4.57143"
         LineJoin="Round" StartLineCap="Round" EndLineCap="Round"/>
    
    <DrawingGroup x:Key="icon-lightning">
        <GeometryDrawing Geometry="{StaticResource icon-lightning-1}"
                         Pen="{StaticResource stroke}"/>
        <GeometryDrawing Geometry="{StaticResource icon-lightning-2}"
                         Pen="{StaticResource stroke}"/>
        <GeometryDrawing Geometry="{StaticResource icon-lightning-3}"
                         Pen="{StaticResource stroke}"/>
        <GeometryDrawing Geometry="{StaticResource icon-lightning-4}"
                         Pen="{StaticResource stroke}"/>
        <GeometryDrawing Geometry="{StaticResource icon-lightning-5}"
                         Pen="{StaticResource stroke}"/>
        <GeometryDrawing Geometry="{StaticResource icon-lightning-6}"
                         Pen="{StaticResource stroke}"/>
        <GeometryDrawing Geometry="{StaticResource icon-lightning-7}"
                         Brush="{StaticResource fill}"/>
    </DrawingGroup>
</Window.Resources>
<Canvas>
    <Image>
        <Image.Source>
            <DrawingImage Drawing="{StaticResource icon-lightning}"/>
        </Image.Source>
    </Image>
</Canvas>

Since the six line drawings all use the same Pen, you could combine them into a single GeometryDrawing:

<DrawingGroup x:Key="icon-lightning">
    <GeometryDrawing Pen="{StaticResource stroke}">
        <GeometryDrawing.Geometry>
            <GeometryGroup>
                <StaticResource ResourceKey="icon-lightning-1"/>
                <StaticResource ResourceKey="icon-lightning-2"/>
                <StaticResource ResourceKey="icon-lightning-3"/>
                <StaticResource ResourceKey="icon-lightning-4"/>
                <StaticResource ResourceKey="icon-lightning-5"/>
                <StaticResource ResourceKey="icon-lightning-6"/>
            </GeometryGroup>
        </GeometryDrawing.Geometry>
    </GeometryDrawing>
    <GeometryDrawing Geometry="{StaticResource icon-lightning-7}"
                        Brush="{StaticResource fill}"/>
</DrawingGroup>

Or just concatenate the path strings of icon-lightning-1 to icon-lightning-6:

<Geometry x:Key="icon-lightning-1">M45.776 4.30438C47.4711 4.487 49.1511 4.68276 50.8146 4.87554C55.2009 5.38393 58.7008 8.88148 59.1936 13.2695C59.3792 14.9223 59.5662 16.5914 59.7399 18.2757 M45.776 59.6855C47.4711 59.5031 49.1511 59.307 50.8146 59.1145C55.2009 58.6062 58.7008 55.1086 59.1936 50.7204C59.3792 49.0674 59.5662 47.3984 59.7399 45.7142 M18.2858 4.30438C16.5904 4.487 14.9104 4.68276 13.2469 4.87554C8.86071 5.38393 5.36082 8.88148 4.86821 13.2695C4.68265 14.9223 4.49556 16.5914 4.32166 18.2757 M18.2858 59.6855C16.5904 59.5031 14.9104 59.307 13.2469 59.1145C8.86071 58.6062 5.36082 55.1086 4.86821 50.7204C4.68265 49.0674 4.49556 47.3984 4.32166 45.7142 M23.292 16.4764L16.3063 16.4764L16.3063 23.3336 M42.1152 48.9271L49.1008 48.9271L49.1008 42.0699</Geometry>
<Geometry x:Key="icon-lightning-2">M15.5128 33.0606L40.7128 12.268C41.8108 11.5946 42.8575 12.268 42.1872 13.4231L34.1447 28.5684H48.4872C48.4872 28.5684 50.766 28.5684 48.4872 30.3653L23.6894 51.2862C21.9468 52.6981 20.7404 51.928 21.9468 49.746L29.7213 34.9859H15.5128C15.5128 34.9859 13.234 34.9859 15.5128 33.0606Z</Geometry>

<DrawingGroup x:Key="icon-lightning">
    <GeometryDrawing Geometry="{StaticResource icon-lightning-1}"
                     Pen="{StaticResource stroke}"/>
    <GeometryDrawing Geometry="{StaticResource icon-lightning-2}"
                     Brush="{StaticResource fill}"/>
</DrawingGroup>