Michael Crump

Michael Crump

Works at Vonage in Developer Relations

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

1 minute read

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

SNAGHTMLa9efccc

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

SNAGHTMLaa044b4

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

SNAGHTMLab83911

4) Hit CTRL-A to select Everything

SNAGHTMLab7cb90

5) Click Edit-> Copy Xaml.

image

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

SNAGHTMLaa74fad

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.

SNAGHTMLaaabffc

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

image

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.806168.146C 218.02167.674 217.049168.699 216.14168.812C 215.258168.922 214.362168.812       213.473168.812C 208.585168.812 203.667169.352 198.808168.812C 184.373167.208 168.511159.798 160.813147.482C 152.479134.146 145.963119.41       142.149104.154C 141.28100.678 141.68596.9641 140.81693.4883C 140.59492.5995 140.26391.731 140.14990.822C 140.03989.9401 140.25989.0376       140.14988.1556C 139.76685.0927 138.54679.7737 135.48380.1566C 131.41880.6648 129.04885.2586 126.15188.1556C 121.05393.254 117.974100.039       114.152106.153C 106.638118.177 97.8295129.467 91.4886142.149C 86.3243152.477 86.098164.668 84.8227176.145C 83.2401190.388 81.0727204.563       79.4901218.806C 77.0578240.697 80.0911262.943 82.823284.798C 85.246304.182 98.7341323.407 115.486333.458C 123.447338.235 132.674340.521       141.482343.457C 144.959344.616 148.511345.669 152.148346.123C 153.057346.237 153.905346.676 154.814346.79C 155.696346.9 156.786347.345       157.48346.79C 158.196346.218 158.261345.033 158.147344.124C 158.024343.138 157.163342.388 156.814341.457C 155.727338.56 154.567335.689       153.481332.792C 150.491324.818 148.88316.39 146.815308.128C 140.451282.673 138.927248.691 157.48230.138C 169.285218.333 194.244210.479       206.807221.472C 214.962228.607 219.511239.624 222.139250.135C 223.028253.69 223.916257.246 224.805260.801C 225.021261.663 224.695262.585       224.805263.467C 224.919264.376 224.686265.662 225.472266.133C 226.257266.605 227.434266.053 228.138265.467C 228.902264.831 229.027263.689       229.471262.8C 230.763260.217 231.79257.506 232.804254.801C 233.194253.761 234.137253.024 234.804252.135C 235.471251.246 236.307250.462       236.804249.469C 238.983245.11 239.971240.103 242.803236.137C 246.394231.11 251.942227.568 257.468224.805C 261.912222.583 267.313223.344       272.133222.139C 277.346220.835 282.917218.836 288.131220.139C 292.951221.344 298.229223.033 301.462226.805C 305.762231.821 306.039239.202       308.128245.469C 312.152257.542 314.549270.171 316.127282.798C 317.408293.047 322.499302.456 326.126312.128C 330.006322.474 332.112333.404       334.791344.124C 335.952348.767 338.963352.812 340.124357.455C 342.804368.175 346

Updated:

Leave a Comment

You May Also Enjoy