Using the “Copy Xaml” feature in Expression Design to create HTML5 SVG Path Data.

Aug 4 2011

Introduction

One of the things that I recently had someone show me was using the “Copy Xaml” feature in Expression Design to create HTML5 SVG Path Data. I later found out that this was demoed at MIX11 in a session called HTML5 for Silverlight Developers. So with that said, I don’t take credit for discovering this, just documenting it for others to use.

If you want to see the final product then click here. Go ahead and right click on the page and you will see it’s just path data (no image – just straight up html).

Let’s Get Started

1) Fire up Microsoft Expression Design 4

2) Create a New Document (Hitting CTRL-N)

3) Draw Something Cool. (Yes, I’m a big fan of the Dark Knight)

4) Hit CTRL-A to select Everything

5) Click Edit-> Copy Xaml.

6) Go ahead and open something like Notepad2 and paste what is in your clipboard.

7) You now want to clean this up a bit. The only parts we are interested in keeping is the path data starting with M as shown below. Go ahead and remove everything else in Red.

8) And ending with the Z from the Path Statement. Again, remove the part in Red below.

9) Now that we have one continuous line of points, let’s drop that into the path of a HTML5 SVG as shown below:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Expression Web and HTML5</title>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg">

    <path fill="black" d="M 218.806,168.146C 218.02,167.674 217.049,168.699 216.14,168.812C 215.258,168.922 214.362,168.812 
    213.473,168.812C 208.585,168.812 203.667,169.352 198.808,168.812C 184.373,167.208 168.511,159.798 160.813,147.482C 152.479,134.146 145.963,119.41 
    142.149,104.154C 141.28,100.678 141.685,96.9641 140.816,93.4883C 140.594,92.5995 140.263,91.731 140.149,90.822C 140.039,89.9401 140.259,89.0376 
    140.149,88.1556C 139.766,85.0927 138.546,79.7737 135.483,80.1566C 131.418,80.6648 129.048,85.2586 126.151,88.1556C 121.053,93.254 117.974,100.039 
    114.152,106.153C 106.638,118.177 97.8295,129.467 91.4886,142.149C 86.3243,152.477 86.098,164.668 84.8227,176.145C 83.2401,190.388 81.0727,204.563 
    79.4901,218.806C 77.0578,240.697 80.0911,262.943 82.823,284.798C 85.246,304.182 98.7341,323.407 115.486,333.458C 123.447,338.235 132.674,340.521 
    141.482,343.457C 144.959,344.616 148.511,345.669 152.148,346.123C 153.057,346.237 153.905,346.676 154.814,346.79C 155.696,346.9 156.786,347.345 
    157.48,346.79C 158.196,346.218 158.261,345.033 158.147,344.124C 158.024,343.138 157.163,342.388 156.814,341.457C 155.727,338.56 154.567,335.689 
    153.481,332.792C 150.491,324.818 148.88,316.39 146.815,308.128C 140.451,282.673 138.927,248.691 157.48,230.138C 169.285,218.333 194.244,210.479 
    206.807,221.472C 214.962,228.607 219.511,239.624 222.139,250.135C 223.028,253.69 223.916,257.246 224.805,260.801C 225.021,261.663 224.695,262.585 
    224.805,263.467C 224.919,264.376 224.686,265.662 225.472,266.133C 226.257,266.605 227.434,266.053 228.138,265.467C 228.902,264.831 229.027,263.689 
    229.471,262.8C 230.763,260.217 231.79,257.506 232.804,254.801C 233.194,253.761 234.137,253.024 234.804,252.135C 235.471,251.246 236.307,250.462 
    236.804,249.469C 238.983,245.11 239.971,240.103 242.803,236.137C 246.394,231.11 251.942,227.568 257.468,224.805C 261.912,222.583 267.313,223.344 
    272.133,222.139C 277.346,220.835 282.917,218.836 288.131,220.139C 292.951,221.344 298.229,223.033 301.462,226.805C 305.762,231.821 306.039,239.202 
    308.128,245.469C 312.152,257.542 314.549,270.171 316.127,282.798C 317.408,293.047 322.499,302.456 326.126,312.128C 330.006,322.474 332.112,333.404 
    334.791,344.124C 335.952,348.767 338.963,352.812 340.124,357.455C 342.804,368.175 346.393,378.665 348.79,389.451C 349.812,394.053 350.205,398.773 
    350.789,403.45C 350.9,404.331 350.679,405.234 350.789,406.116C 350.903,407.025 350.54,408.782 351.456,408.782C 354.204,408.782 352.86,403.466 353.456,400.783C 
    354.425,396.424 354.789,391.918 354.789,387.452C 354.789,374.779 353.456,362.129 353.456,349.456C 353.456,318.713 349.327,286.254 360.122,257.468C 
    361.866,252.816 365.043,248.788 366.787,244.136C 368.183,240.414 369.102,236.058 372.12,233.471C 378.307,228.168 386.212,224.782 394.117,222.805C 
    402.958,220.595 414.528,217.542 421.447,223.472C 425.528,226.97 427.264,232.559 429.446,237.47C 432.051,243.331 433.317,249.771 434.112,256.135C 
    434.461,258.924 433.968,264.134 436.779,264.134C 437.772,264.134 437.871,262.431 438.112,261.467C 438.327,260.605 438.112,259.69 438.112,258.801C 
    438.112,256.135 438.112,253.468 438.112,250.802C 438.112,242.754 437.952,234.341 440.778,226.805C 442.877,221.207 448.31,216.257 454.11,214.806C 
    467.435,211.475 482.765,214.802 494.771,221.472C 499.469,224.082 505.646,225.098 508.77,229.471C 513.223,235.706 513.234,244.13 515.436,251.469C 
    517.051,256.853 519.405,262.013 520.768,267.467C 522.93,276.113 520.93,285.483 518.768,294.13C 516.939,301.449 518.346,310.399 513.436,316.127C 
    510.321,319.761 504.586,319.779 500.104,321.46C 495.004,323.372 489.511,324.117 484.106,324.793C 483.224,324.903 482.329,324.793 481.44,324.793C 
    480.551,324.793 479.513,324.3 478.773,324.793C 477.947,325.344 478.143,326.756 477.44,327.459C 476.738,328.162 474.774,327.799 474.774,328.792C 
    474.774,329.903 476.498,330.203 477.44,330.792C 478.283,331.319 479.176,331.776 480.107,332.125C 484.194,333.658 488.56,334.309 492.772,335.458C 
    502.534,338.121 512.675,339.403 522.768,340.124C 538.339,341.236 553.853,345.162 569.429,344.124C 578.687,343.506 590.053,343.17 596.092,336.125C 
    605.017,325.713 614.528,315.766 622.755,304.795C 631.916,292.582 636.108,277.037 639.42,262.134C 648.329,222.042 638.769,177.679 622.089,140.149C 
    618.044,131.048 610.467,123.861 603.425,116.819C 585.079,98.4733 559.059,89.2664 534.766,80.1566C 522.464,75.543 510.497,68.9426 497.438,67.4916C 
    487.719,66.4116 476.855,63.7848 468.108,68.1581C 462.583,70.9209 457.542,76.693 456.776,82.823C 456.264,86.9241 461.186,89.8992 464.109,92.8217C 
    470.886,99.5995 478.355,105.818 484.106,113.486C 489.533,120.722 495.649,128.508 496.771,137.483C 497.674,144.705 494.661,151.999 492.105,158.814C 
    488.813,167.593 483.392,176.508 475.441,181.477C 467.57,186.397 457.392,186.81 448.111,186.81C 437.214,186.81 426.278,186.68 415.448,185.477C 
    408.514,184.706 401.553,183.836 394.784,182.144C 389.259,180.763 381.333,181.239 378.786,176.145C 377.46,173.493 377.724,170.291 376.786,167.479C 
    371.339,151.138 370.787,133.378 370.787,116.152C 370.787,109.931 370.787,103.709 370.787,97.4878C 370.787,94.8215 370.787,92.1552 370.787,89.4888C 
    370.787,88.6 371.649,87.0381 370.787,86.8225C 369.709,86.553 368.672,87.8577 368.121,88.8223C 367.68,89.5939 368.336,90.6263 368.121,91.4885C 
    367.88,92.4526 367.136,93.2245 366.787,94.1549C 366.466,95.0127 366.343,95.9324 366.121,96.8212C 364.722,102.418 364.035,108.326 361.455,113.486C 
    357.646,121.103 345.242,121.208 336.791,120.152C 328.631,119.132 322.813,111.064 317.46,104.82C 312.957,99.566 307.13,95.3571 303.462,89.4888C 
    301.972,87.1055 301.144,84.2787 300.796,81.4898C 300.686,80.6079 300.906,79.7054 300.796,78.8235C 300.682,77.9144 301.045,76.1572 300.129,76.1572C 
    299.018,76.1572 298.718,77.8813 298.129,78.8235C 297.603,79.6661 297.145,80.5594 296.796,81.4898C 295.434,85.1232 295.071,89.0571 294.13,92.8217C 
    291.377,103.834 293.384,115.535 292.13,126.817C 290.754,139.202 287.593,153.371 278.132,161.48C 270.644,167.898 260.036,169.349 250.802,172.812C 
    244.917,175.018 238.422,175.478 232.138,175.478C 228.521,175.478 224.416,175.581 221.472,173.478C 220.568,172.833 219.969,171.806 219.473,170.812C 
    219.063,169.993 219.592,168.617 218.806,168.146 Z" />
    
    </svg>
</body>
</html>

10) Now load the page into a browser and you will get the following. You can test this in a browser by going here:

Conclusion:

That was pretty easy to do and only took about 5 minutes. There are a lot of things you can do with path data as sometimes it is easier to drop in path data instead of add an image to a project. I hope you found this post helpful.

Using the “Copy Xaml” feature in Expression Design to create HTML5 SVG Path Data.

Comments