2

I have been searching on the web of a way to set a svg as a source of an image as the simplest way possible, so far i have tried a lot of different methods and anyone has worked for me.

I had my svg file converted to a xaml file, then tried to save it as a ResourceDictionary but didnt work... I also tried to use this answer but i couldnt find out the supported ContentControl for my svg file...

If you can tell me the detailed step by step to how to set a svg in to my wpf c# project i would be very thankful. Here is my png picture and all the other tries i made.

enter image description here

I used this link to convert png to svg. Then i turned the resulted svg to xaml using Inkscape

Here is my code:

<Grid Background="#FFFFC000">
                <Viewbox Stretch="Uniform">
                    <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Name="svg3336" Width="150" Height="96">
                        <Canvas.RenderTransform>
                            <TranslateTransform X="0" Y="0"/>
                        </Canvas.RenderTransform>
                        <Canvas.Resources/>
                        <Canvas Name="g3340">
                            <Canvas.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform ScaleX="0.100000" ScaleY="-0.100000"/>
                                    <TranslateTransform X="0.000000" Y="96.000000"/>
                                </TransformGroup>
                            </Canvas.RenderTransform>
                            <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path3342" Fill="White" Data="M10 479 l0 -472 168 6 c313 12 573 94 797 252 104 73 272 246 339 349 61 92 126 216 126 239 0 7 4 17 9 23 4 5 13 24 19 42 l11 32 -735 0 -734 0 0 -471z m242 445 l178 -6 -52 -47 c-60 -54 -68 -58 -68 -36 0 29 -27 45 -74 45 -60 0 -72 -18 -68 -99 5 -80 22 -69 22 15 l0 64 50 0 c48 0 50 -1 50 -28 0 -23 -20 -46 -110 -127 -60 -54 -112 -105 -115 -113 -6 -18 20 -61 42 -69 9 -3 24 -1 34 6 18 11 19 5 19 -141 0 -192 -3 -188 125 -188 103 0 105 1 105 68 0 75 7 83 64 80 l51 -3 3 -60 c2 -32 8 -65 14 -72 15 -18 191 -18 206 0 7 8 12 74 13 169 l1 157 24 -11 c21 -10 28 -8 50 12 14 14 24 33 22 45 -2 12 -77 83 -184 175 l-180 155 479 3 c264 1 482 1 484 -1 8 -9 -60 -157 -108 -237 -244 -402 -679 -640 -1179 -644 l-115 -1 -3 435 c-1 239 0 440 2 446 5 14 12 14 218 8z m244 -59 c24 -20 49 -41 56 -48 7 -7 70 -61 141 -120 70 -60 127 -111 127 -115 -1 -10 -26 -42 -34 -42 -4 0 -73 57 -154 128 -81 70 -155 133 -164 141 -16 12 -33 1 -155 -105 -76 -65 -150 -129 -165 -143 -27 -24 -28 -24 -48 -6 -11 10 -19 22 -18 26 2 4 43 42 93 85 127 108 204 175 240 206 16 15 32 28 34 28 2 0 23 -16 47 -35z m88 -198 l129 -112 1 -167 1 -168 -93 0 -93 0 2 73 2 72 -81 3 -82 3 0 -76 0 -75 -90 0 -90 0 0 168 0 167 108 92 c59 50 116 100 127 112 11 11 22 20 25 20 3 0 63 -50 134 -112z"/>
                        </Canvas>
                    </Canvas>
                </Viewbox>
            </Grid>

As you can see, i added the whole xaml file to my code instead of just call it...

Community
  • 1
  • 1
Fernando Santiago
  • 2,128
  • 10
  • 44
  • 75
  • start with some simple img and post your actual code here. As a result the most important data you have is the mini-path data which can be set to some `PathGeometry's Figures, this may be already included in the converted xaml. – Hopeless Oct 09 '15 at 03:02

1 Answers1

1

You can convert this code into a DrawingBrush. (Blend has a command for it in the TOOLS MENU.) You can then reference it wherever you like.

Here's the resulting code:

<DrawingBrush x:Key="svg3336" Viewbox="0,0,150,96" ViewboxUnits="Absolute">
        <DrawingBrush.Drawing>
            <DrawingGroup>
                <GeometryDrawing Brush="White" Geometry="M10,479L10,7 178,13C491,25 751,107 975,265 1079,338 1247,511 1314,614 1375,706 1440,830 1440,853 1440,860 1444,870 1449,876 1453,881 1462,900 1468,918L1479,950 744,950 10,950 10,479z M252,924L430,918 378,871C318,817 310,813 310,835 310,864 283,880 236,880 176,880 164,862 168,781 173,701 190,712 190,796L190,860 240,860C288,860 290,859 290,832 290,809 270,786 180,705 120,651 68,600 65,592 59,574 85,531 107,523 116,520 131,522 141,529 159,540 160,534 160,388 160,196 157,200 285,200 388,200 390,201 390,268 390,343 397,351 454,348L505,345 508,285C510,253 516,220 522,213 537,195 713,195 728,213 735,221 740,287 741,382L742,539 766,528C787,518 794,520 816,540 830,554 840,573 838,585 836,597 761,668 654,760L474,915 953,918C1217,919 1435,919 1437,917 1445,908 1377,760 1329,680 1085,278 650,40 150,36L35,35 32,470C31,709 32,910 34,916 39,930 46,930 252,924z M496,865C520,845 545,824 552,817 559,810 622,756 693,697 763,637 820,586 820,582 819,572 794,540 786,540 782,540 713,597 632,668 551,738 477,801 468,809 452,821 435,810 313,704 237,639 163,575 148,561 121,537 120,537 100,555 89,565 81,577 82,581 84,585 125,623 175,666 302,774 379,841 415,872 431,887 447,900 449,900 451,900 472,884 496,865z M584,667L713,555 714,388 715,220 622,220 529,220 531,293 533,365 452,368 370,371 370,295 370,220 280,220 190,220 190,388 190,555 298,647C357,697 414,747 425,759 436,770 447,779 450,779 453,779 513,729 584,667z"/>
            </DrawingGroup>
        </DrawingBrush.Drawing>
    </DrawingBrush>
Dax Pandhi
  • 843
  • 4
  • 13