Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Convert Multipath SVG to Geometry to WPF

Tags:

c#

wpf

svg

I have got some Icons I want to use in my WPF Application, however I need them to be Geometry objects, how would I go about converting the SVG to Geometry, or does Geometry not allow for multiple Paths which make up complex shapes?

This is the SVG Data, so you can see what i'm working with:

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="438.529px" height="438.528px" viewBox="0 0 438.529 438.528" style="enable-background:new 0 0 438.529 438.528;"
     xml:space="preserve">
<g>
    <g>
        <path d="M433.109,23.694c-3.614-3.612-7.898-5.424-12.848-5.424c-4.948,0-9.226,1.812-12.847,5.424l-37.113,36.835
            c-20.365-19.226-43.684-34.123-69.948-44.684C274.091,5.283,247.056,0.003,219.266,0.003c-52.344,0-98.022,15.843-137.042,47.536
            C43.203,79.228,17.509,120.574,5.137,171.587v1.997c0,2.474,0.903,4.617,2.712,6.423c1.809,1.809,3.949,2.712,6.423,2.712h56.814
            c4.189,0,7.042-2.19,8.566-6.565c7.993-19.032,13.035-30.166,15.131-33.403c13.322-21.698,31.023-38.734,53.103-51.106
            c22.082-12.371,45.873-18.559,71.376-18.559c38.261,0,71.473,13.039,99.645,39.115l-39.406,39.397
            c-3.607,3.617-5.421,7.902-5.421,12.851c0,4.948,1.813,9.231,5.421,12.847c3.621,3.617,7.905,5.424,12.854,5.424h127.906
            c4.949,0,9.233-1.807,12.848-5.424c3.613-3.616,5.42-7.898,5.42-12.847V36.542C438.529,31.593,436.733,27.312,433.109,23.694z"/>
        <path d="M422.253,255.813h-54.816c-4.188,0-7.043,2.187-8.562,6.566c-7.99,19.034-13.038,30.163-15.129,33.4
            c-13.326,21.693-31.028,38.735-53.102,51.106c-22.083,12.375-45.874,18.556-71.378,18.556c-18.461,0-36.259-3.423-53.387-10.273
            c-17.13-6.858-32.454-16.567-45.966-29.13l39.115-39.112c3.615-3.613,5.424-7.901,5.424-12.847c0-4.948-1.809-9.236-5.424-12.847
            c-3.617-3.62-7.898-5.431-12.847-5.431H18.274c-4.952,0-9.235,1.811-12.851,5.431C1.807,264.844,0,269.132,0,274.08v127.907
            c0,4.945,1.807,9.232,5.424,12.847c3.619,3.61,7.902,5.428,12.851,5.428c4.948,0,9.229-1.817,12.847-5.428l36.829-36.833
            c20.367,19.41,43.542,34.355,69.523,44.823c25.981,10.472,52.866,15.701,80.653,15.701c52.155,0,97.643-15.845,136.471-47.534
            c38.828-31.688,64.333-73.042,76.52-124.05c0.191-0.38,0.281-1.047,0.281-1.995c0-2.478-0.907-4.612-2.715-6.427
            C426.874,256.72,424.731,255.813,422.253,255.813z"/>
    </g>
</g>
</svg>

This is an example of the Geometry shape definition i'm currently using:

<Geometry x:Key="RefreshIcon">
        M19.85228,12.08996L12.093,19.849201 24.242323,31.997846 12.094,44.145998 19.852051,51.904958 32.001186,39.756277 44.150543,51.904958 51.909,44.145994 39.760246,31.997501 51.909,19.849201 44.15049,12.08996 32.001431,24.238849z M32,0C49.671021,3.1599484E-07 64,14.329407 64,31.998501 64,49.677606 49.671021,63.997003 32,63.997003 14.328003,63.997003 0,49.677606 0,31.998501 0,14.329407 14.328003,3.1599484E-07 32,0z
    </Geometry>
like image 627
Martyn Ball Avatar asked Jan 20 '16 18:01

Martyn Ball


1 Answers

I personally use Inkscape to open up SVG's and simply save them as Microsoft .XAML. I tried it with yours, it gave me PathGeometry definitions:

<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path7" Fill="#000000">
      <Path.Data>
        <PathGeometry Figures="M433.109 23.694c-3.614-3.612-7.898-5.424-12.848-5.424c-4.948 0-9.226 1.812-12.847 5.424l-37.113 36.835             c-20.365-19.226-43.684-34.123-69.948-44.684C274.091 5.283 247.056 0.003 219.266 0.003c-52.344 0-98.022 15.843-137.042 47.536             C43.203 79.228 17.509 120.574 5.137 171.587v1.997c0 2.474 0.903 4.617 2.712 6.423c1.809 1.809 3.949 2.712 6.423 2.712h56.814             c4.189 0 7.042-2.19 8.566-6.565c7.993-19.032 13.035-30.166 15.131-33.403c13.322-21.698 31.023-38.734 53.103-51.106             c22.082-12.371 45.873-18.559 71.376-18.559c38.261 0 71.473 13.039 99.645 39.115l-39.406 39.397             c-3.607 3.617-5.421 7.902-5.421 12.851c0 4.948 1.813 9.231 5.421 12.847c3.621 3.617 7.905 5.424 12.854 5.424h127.906             c4.949 0 9.233-1.807 12.848-5.424c3.613-3.616 5.42-7.898 5.42-12.847V36.542C438.529 31.593 436.733 27.312 433.109 23.694z" FillRule="NonZero"/>
      </Path.Data>
    </Path>
    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path9" Fill="#000000">
      <Path.Data>
        <PathGeometry Figures="M422.253 255.813h-54.816c-4.188 0-7.043 2.187-8.562 6.566c-7.99 19.034-13.038 30.163-15.129 33.4             c-13.326 21.693-31.028 38.735-53.102 51.106c-22.083 12.375-45.874 18.556-71.378 18.556c-18.461 0-36.259-3.423-53.387-10.273             c-17.13-6.858-32.454-16.567-45.966-29.13l39.115-39.112c3.615-3.613 5.424-7.901 5.424-12.847c0-4.948-1.809-9.236-5.424-12.847             c-3.617-3.62-7.898-5.431-12.847-5.431H18.274c-4.952 0-9.235 1.811-12.851 5.431C1.807 264.844 0 269.132 0 274.08v127.907             c0 4.945 1.807 9.232 5.424 12.847c3.619 3.61 7.902 5.428 12.851 5.428c4.948 0 9.229-1.817 12.847-5.428l36.829-36.833             c20.367 19.41 43.542 34.355 69.523 44.823c25.981 10.472 52.866 15.701 80.653 15.701c52.155 0 97.643-15.845 136.471-47.534             c38.828-31.688 64.333-73.042 76.52-124.05c0.191-0.38 0.281-1.047 0.281-1.995c0-2.478-0.907-4.612-2.715-6.427             C426.874 256.72 424.731 255.813 422.253 255.813z" FillRule="NonZero"/>
      </Path.Data>
    </Path>

Edit I'm not sure if you absolutely require Geometry objects (PathGeometry is type of Geometry that's for more complex shapes), but I think for the shapes for your refresh arrows you need PathGeometry objects.

Edit2 Thanks to Clemens, you can apparently concat the two PathGeometry strings from above:

            <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="#000000">
                <Path.Data>
                    <PathGeometry Figures="M433.109 23.694c-3.614-3.612-7.898-5.424-12.848-5.424c-4.948 0-9.226 1.812-12.847 5.424l-37.113 36.835             c-20.365-19.226-43.684-34.123-69.948-44.684C274.091 5.283 247.056 0.003 219.266 0.003c-52.344 0-98.022 15.843-137.042 47.536             C43.203 79.228 17.509 120.574 5.137 171.587v1.997c0 2.474 0.903 4.617 2.712 6.423c1.809 1.809 3.949 2.712 6.423 2.712h56.814             c4.189 0 7.042-2.19 8.566-6.565c7.993-19.032 13.035-30.166 15.131-33.403c13.322-21.698 31.023-38.734 53.103-51.106             c22.082-12.371 45.873-18.559 71.376-18.559c38.261 0 71.473 13.039 99.645 39.115l-39.406 39.397             c-3.607 3.617-5.421 7.902-5.421 12.851c0 4.948 1.813 9.231 5.421 12.847c3.621 3.617 7.905 5.424 12.854 5.424h127.906             c4.949 0 9.233-1.807 12.848-5.424c3.613-3.616 5.42-7.898 5.42-12.847V36.542C438.529 31.593 436.733 27.312 433.109 23.694zM422.253 255.813h-54.816c-4.188 0-7.043 2.187-8.562 6.566c-7.99 19.034-13.038 30.163-15.129 33.4             c-13.326 21.693-31.028 38.735-53.102 51.106c-22.083 12.375-45.874 18.556-71.378 18.556c-18.461 0-36.259-3.423-53.387-10.273             c-17.13-6.858-32.454-16.567-45.966-29.13l39.115-39.112c3.615-3.613 5.424-7.901 5.424-12.847c0-4.948-1.809-9.236-5.424-12.847             c-3.617-3.62-7.898-5.431-12.847-5.431H18.274c-4.952 0-9.235 1.811-12.851 5.431C1.807 264.844 0 269.132 0 274.08v127.907             c0 4.945 1.807 9.232 5.424 12.847c3.619 3.61 7.902 5.428 12.851 5.428c4.948 0 9.229-1.817 12.847-5.428l36.829-36.833             c20.367 19.41 43.542 34.355 69.523 44.823c25.981 10.472 52.866 15.701 80.653 15.701c52.155 0 97.643-15.845 136.471-47.534             c38.828-31.688 64.333-73.042 76.52-124.05c0.191-0.38 0.281-1.047 0.281-1.995c0-2.478-0.907-4.612-2.715-6.427             C426.874 256.72 424.731 255.813 422.253 255.813z" FillRule="NonZero"/>
                </Path.Data>
            </Path>
like image 173
Rowbear Avatar answered Oct 05 '22 18:10

Rowbear