Click here to Skip to main content
15,896,606 members
Articles / Desktop Programming / WPF

Convert XAML Vector Graphic to PNG

Rate me:
Please Sign up or sign in to vote.
4.87/5 (11 votes)
23 Oct 2012CPOL12 min read 74.5K   6.8K   43  
An introduction to the usage of vector graphics as a source of bitmap graphics.
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas Canvas.Left="-0.950088683685728" Canvas.Top="-0.121889782408612">
    <Canvas>
      <Canvas>
        <Path Data="M357.30937,339.46468C332.31429,287.57239 324.68971,243.5222 335.65111,223.54059 346.34609,204.04464 399.40546,229.01949 419.15716,196.80675 438.62758,165.05275 387.49541,2.95653 204.61791,2.00424 24.25842,1.06506 -9.71082,169.06068 5.08734,197.75583 19.63005,225.95563 68.80993,204.99052 88.60372,220.0734 108.3975,235.15629 93.71562,303.60115 73.26822,343.88413 53.07448,383.66737 148.67313,393.8462 220.30776,392.90352 291.9424,391.96085 381.57646,389.84556 357.30937,339.46468z" Fill="#FFEEEEEC" Stroke="#FF2E3436" StrokeThickness="12" StrokeLineJoin="Round" StrokeMiterLimit="4" />
        <Path Data="M319.09375,237.97598C234.53834,245.87996 174.65282,243.85048 110.09375,241.60098 111.13608,271.07774 100.17892,316.55043 84.78125,349.28125 83.311208,352.40612 83.39338,353.84867 83.625,354.90625 83.85662,355.96383 84.45461,357.27004 86.65625,359.25 91.05953,363.20992 101.74293,368.11413 115.8125,371.53125 143.95164,378.36549 184.97982,380.68166 220.15625,380.21875 255.91836,379.74814 295.91828,378.70679 321.75,372.375 334.66586,369.2091 343.41037,364.43428 346.46875,360.78125 349.52713,357.12822 350.59997,354.77827 345.875,344.96875 345.84338,344.91689 345.81213,344.86481 345.78125,344.8125 326.81089,303.79266 318.50922,266.02178 319.09375,237.97598z" Fill="{x:Null}" Stroke="#FFFFFFFF" StrokeThickness="12" StrokeMiterLimit="4" />
        <Path Data="M357.30937,285.90674C332.31429,234.01445 324.68971,243.5222 335.65111,223.54059 346.34609,204.04464 399.40546,229.01949 419.15716,196.80675 438.62758,165.05275 387.49541,2.95653 204.61791,2.00424 24.25842,1.06506 -9.71082,169.06068 5.08734,197.75583 19.63005,225.95563 68.80993,204.99052 88.60372,220.0734 108.3975,235.15629 93.71562,250.04321 73.26822,290.32619 53.07448,330.10943 144.15037,305.2369 215.785,304.29422 287.41964,303.35155 381.57646,336.28762 357.30937,285.90674z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.55128204">
          <Path.Fill>
            <RadialGradientBrush Center="436.7251,537.52686" RadiusX="212.51822" RadiusY="212.51822" GradientOrigin="436.7251,537.52686" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FF000000" Offset="0" />
                <GradientStop Color="#00000000" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="1.22787000123026E-07,0.178724005818367,-0.995621025562286,6.84013002683059E-07,748.632019042969,140.009002685547" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
        </Path>
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="0.55611789226532,0,0,1,94.3331909179688,0" />
        </Canvas.RenderTransform>
      </Canvas>
      <Canvas>
        <Path Data="M303.54551,227.31772C343.85843,222.49375 399.40546,229.01949 419.15716,196.80675 438.62758,165.05275 387.49541,2.95653 204.61791,2.00424 24.25842,1.06506 -9.71082,169.06068 5.08734,197.75583 19.63005,225.95563 79.97133,227.94803 116.93219,229.51622 153.86104,231.08306 263.85315,232.06743 303.54551,227.31772z" Stroke="#FF780000" StrokeThickness="12" StrokeLineJoin="Round" StrokeMiterLimit="4">
          <Path.Fill>
            <RadialGradientBrush Center="276.81726,314.04971" RadiusX="212.51822" RadiusY="212.51822" GradientOrigin="276.81726,314.04971" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FFEF2929" Offset="0" />
                <GradientStop Color="#FFCC0000" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="0,0.881223022937775,-1.82334995269775,0,707.908996582031,-204.77099609375" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
        </Path>
        <Path Data="F1M72.617135,124.50024C67.842233,139.17389 56.741026,148.71825 47.826244,145.81442 38.911461,142.91058 35.56138,128.65897 40.344934,113.98813 45.119835,99.314482 56.221042,89.77012 65.135825,92.673955 74.050607,95.577791 77.400689,109.82941 72.617135,124.50024L72.617135,124.50024z" Fill="#FFFFFFFF" Stroke="{x:Null}" StrokeThickness="1" />
        <Path Data="F1M145.63855,80.870526C136.18635,91.328847 121.38151,93.559127 112.57682,85.851113 103.77213,78.143099 104.30414,63.41776 113.76489,52.966921 123.21709,42.5086 138.02192,40.27832 146.82662,47.986334 155.63131,55.694348 155.0993,70.419687 145.63855,80.870526L145.63855,80.870526z" Fill="#FFFFFFFF" Stroke="{x:Null}" StrokeThickness="1" />
        <Path Data="F1M282.76254,129.10723C288.23572,143.48776 277.94002,157.38299 259.77047,160.13766 241.60092,162.89233 222.44291,153.46254 216.98737,139.07934 211.51419,124.69881 221.80989,110.80357 239.97944,108.04891 258.14899,105.29424 277.307,114.72403 282.76254,129.10723L282.76254,129.10723z" Fill="#FFFFFFFF" Stroke="{x:Null}" StrokeThickness="1" />
        <Path Data="F1M306.81263,38.724345C318.01599,47.542747 317.74863,55.773255 306.21555,57.104468 294.68248,58.435682 276.25417,52.363135 265.062,43.543441 253.85863,34.725039 254.12599,26.494532 265.65907,25.163318 277.19215,23.832104 295.62046,29.904651 306.81263,38.724345L306.81263,38.724345z" Fill="#FFFFFFFF" Stroke="{x:Null}" StrokeThickness="1" />
        <Path Data="F1M374.03383,167.8066C369.39053,181.58678 357.94982,185.18336 348.48476,175.83838 339.0197,166.4934 335.11711,147.74815 339.76959,133.97705 344.4129,120.19687 355.85361,116.60029 365.31867,125.94527 374.78373,135.29025 378.68632,154.0355 374.03383,167.8066L374.03383,167.8066z" Fill="#FFFFFFFF" Stroke="{x:Null}" StrokeThickness="1" />
        <Path Data="F1M167.41983,169.44296C173.6889,185.0436 166.88896,202.76543 152.2344,209.01882 137.57984,215.27222 120.62403,207.68744 114.36918,192.08073 108.1001,176.4801 114.90004,158.75827 129.5546,152.50487 144.20916,146.25147 161.16498,153.83625 167.41983,169.44296L167.41983,169.44296z" Fill="#FFFFFFFF" Stroke="{x:Null}" StrokeThickness="1" />
        <Path Data="F1M213.40405,73.158806C211.8638,79.698668 204.77884,84.58201 197.58214,84.064135 190.38543,83.546261 185.80418,77.823421 187.35143,71.284061 188.89168,64.744198 195.97664,59.860857 203.17334,60.378731 210.37005,60.896606 214.95129,66.619445 213.40405,73.158806L213.40405,73.158806z" Fill="#FFFFFFFF" Stroke="{x:Null}" StrokeThickness="1" />
        <Path Data="F1M331.06911,87.891332C331.92546,94.184205 328.14649,97.810945 322.63002,95.990455 317.11355,94.169966 311.95007,87.592125 311.09907,81.301018 310.24272,75.008145 314.0217,71.381405 319.53816,73.201895 325.05463,75.022385 330.21812,81.600225 331.06911,87.891332L331.06911,87.891332z" Fill="#FFFFFFFF" Stroke="{x:Null}" StrokeThickness="1" />
        <Path Data="M204.5625,14.625C118.30625,14.175841 69.604334,53.07901 42.3125,95.59375 28.666583,116.85112 20.681329,139.1323 17.0625,157.375 13.443671,175.6177 15.814651,191.00337 16.3125,191.96875 20.379977,199.856 34.941425,207.30697 55.03125,211.25 75.121075,215.19303 98.926225,216.11952 117.46875,216.90625 153.55622,218.43739 265.27039,219.18017 302.03125,214.78125 323.535,212.20804 347.35967,212.63684 367.3125,209.84375 387.26533,207.05066 401.48657,201.50394 408.40625,190.21875 409.48496,188.4595 411.78884,174.08755 407.3125,156.15625 402.83616,138.22495 393.23925,116.34263 377.65625,95.40625 346.49025,53.533482 292.27745,15.081754 204.5625,14.625z" Fill="{x:Null}" Stroke="#A9FFFFFF" StrokeThickness="12" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.66239313" />
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="0.889221608638763,0,0,1,23.5424613952637,0" />
        </Canvas.RenderTransform>
      </Canvas>
      <Canvas.RenderTransform>
        <MatrixTransform Matrix="0.11912240087986,0,0,0.11912240087986,-1.43067967891693,0.598341584205627" />
      </Canvas.RenderTransform>
    </Canvas>
  </Canvas>
</Canvas>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Germany Germany
The Windows Presentation Foundation (WPF) and C# are among my favorites and so I developed Edi

and a few other projects on GitHub. I am normally an algorithms and structure type but WPF has such interesting UI sides that I cannot help myself but get into it.

https://de.linkedin.com/in/dirkbahle

Comments and Discussions