Posts
133
Comments
328
Trackbacks
0
August 2011 Entries
3 Ways to update the Application Tile Content in Mango

Introduction

Have you ever wondered how to update the Application Tile in your Windows Phone 7 Mango application? Me too. But before we dig in, let’s look at the properties of a Tile.

image

 

Microsoft defines each one as listed below:

  • Title. A string indicating the title of the application. The Title must fit on a single line of text and should not be wider than the actual Tile. Approximately 15 characters will fit in the title before being truncated.

  • BackgroundImage. An image displayed on the front of the Tile. We recommend that you always have a background image on the front of the Tile.

  • Count (also known as Badge). An integer value from 1 to 99. If the value of Count is not set or it is set to 0, the circle image and value will not display in the Tile.

  • BackTitle. A string displayed at the bottom of the back of a Tile. The BackTitle must fit on a single line of text and should not be wider than the actual Tile. Approximately 15 characters will fit in the title before being truncated.

  • BackBackgroundImage. An image displayed on the back of the Tile.

  • BackContent. A string displayed in the body of the back of a Tile. Approximately 40 characters will fit in the Tile before being truncated

(images taken from MSDN overview)

 

Let’s get started.

What we are going to focus on today is the three ways to update the Application Tile.

1) The first way is pretty weak as you can only change two options. The Title and the Background Image. If you right click on the project and go to Properties then you will see that you can set the Title and Background image.

image

If you run this, it’s pretty boring stuff:

image

2) The second option is much much better as it allows you to modify all the properties by the use of the WMAppManifest.xml. If you create a new Windows Phone 7 Mango Application and head straight to the Properties –> WMAppManifest.xml then you will see the following:

image

If you run the app and pin it to the start screen in the emulator then you should see something like this:

image

Pretty standard stuff right? Well, let’s change the count and title of the Application Tile by heading back to the WMAppManifest.xml and changing the Count and Title to the following:

image

After you deploy it again and “Pin to start” then it should be updated as shown below. We could have changed the background image, but for now the default will do.

image

But that’s not all we can do. If we type a “<” after the last </Title> then it bring up other options as shown below.

image

Let’s play with a few of these real quick.

image

Now if we deploy it again and give it a few seconds, the Application Tile will flip over and reveal the information we just set for the back tile.

image

One other thing to note before we leave this section is that Comments work just fine in the WMAppManifest.xml file.

image

3) The third way that we can change the Application Tile content is through code.

ShellTile firstTile = ShellTile.ActiveTiles.First();
var newData = new StandardTileData()
{
    Title = "MichaelCrump.Net",
    BackgroundImage = new Uri("background.png", UriKind.Relative),
    Count = 6,
    BackContent = "New BackContent",
    BackTitle = "New BackTitle",
    BackBackgroundImage = new Uri("background.png", UriKind.Relative),
};

// Update the default tile
firstTile.Update(newData);

If we go ahead and run our application now and trigger this code, through a Click event or whatever. Then we will see our Application Tile has updated:

image

and when the tile flips it looks like this:

image

Conclusion

As you can see it is pretty easy to update the Application Tile. The one thing to remember about updating the Application Tile is that your content will wrap and it is best to use one to two words if possible. We will look at creating Live tiles in the next part of this series. Thanks for reading and have a great day.

alt Subscribe to my feed

Posted On Tuesday, August 30, 2011 6:03 AM | Feedback (0)
Who says Silverlight can’t run on a tablet?

image

Introduction:

One of the concerns that I keep hearing from customers is, “We can’t deploy Silverlight because it won’t run on a tablet.” I usually reply to that question stating, “What do you mean it can’t run on a tablet?” They usually looked puzzled and say, “You mean Silverlight *CAN* run on a tablet?” Yes, there are many devices that Silverlight can run on.

Today we are going to take a look at the Motion CL900 Tablet.

image

FYI: I have no affiliation with Motion Computing.

Why this tablet?

When I first started looking at this tablet, I noticed something different. This device is targeting your customers in real-world scenarios. Other tablets, show a young teenager or someone with head phones on listening to music. This is fine if that is your customer, but my customers are not interested in a music player or gaming. They want a device that will help their business problems. 

imageimageimage

Specs of the Tablet

This is not a weak tablet and is very capable of providing a solid computing experience with Silverlight. Here are a few key points that I want to mention:

  • Starting around $899. – Cheap enough for a enterprise solution.
  • Windows 7 Professional
  • Wifi a/b/g/n
  • 1GB Ram with 2GB available
  • 32GB SSD with 62GB available

Let’s dive deeper into this and see what is available for those wishing to deploy Silverlight Applications with Tablets.

image

I can hear all the Jerry Maguire’s out there. So, you told us about a tablet and how you can use Silverlight to deploy touch-screen applications. Show us someone who has done it because our boss isn't buying it. 

Rooms To Go did it and they have a case study plus video to prove it.

“Rooms To Go engaged the services of Microsoft Partner Network member Wintellect to build a touch-sensitive point-of-sale system that sales associates could use throughout the store when interacting with customers. The system runs on slate PCs, portable devices that have no lid or keyboard hardware and are slim, lightweight, and easy to carry. The slate PCs run the Windows 7 operating system, have an estimated battery life of eight hours, and are designed to replace fixed kiosks. Rooms To Go has increased its competitiveness with a modern tool that serves as a one-stop access point for store information. The company’s new point-of-sale system makes for a shorter and more efficient sales cycle and improves the customer experience.”

Important Links related to the Study:

Rooms2Go Study located here: http://www.microsoft.com/casestudies/Case_Study_Detail.aspx?CaseStudyID=4000010773

They even posted a video of it available here: http://mediadl.microsoft.com/mediadl/www/c/casestudies/Files/4000010773/RoomsToGo_MediaFile.wmv

Why didn’t Rooms To Go go with another tablet?

  1. They didn’t want to use the other device because of security concerns.
  2. The inability to integrate with their existing Windows-based software.
  3. Windows based tablet would integrate with their existing security infrastructure.
  4. Using Silverlight allowed them to keep in house expertise for the project.

What software will help me write Silverlight Touch Screen applications?

I will only recommend 2 as they are what I have played with.

  1. Lighttouch

    http://lighttouch.codeplex.com/ is a reusable library that provides Multi-Touch support for Silverlight applications by via Manipulations, Gestures, and specialized Behaviors and controls.


    The Wintellect Silverlight Touch Library has been developed to augment the limited out-of-the-box support available for Touch interactions in the current releases of Silverlight.  These enhancements include:

    • Attaching Manipulation events to controls in XAML markup via attached Behaviors.
    • Higher-level Gesture support via attached behaviors.  This has been implemented to provide parity with the Gesture implementation included in the Silverlight for Windows Phone Toolkit.
    • Attached Behaviors that allow controls that contain a ScrollViewer (such as the ListBox) to respond to touch-based scrolling.  This includes the use of inertia in the scrolling.
    • A specialized ComboBox implementation that also incorporates the smooth scrolling, but does not close the popup as a result of the conclusion of the Touch operation.
  2. Multitouch

    http://multitouch.codeplex.com/ is another one that may help you. It is several Silverlight / Windows Phone Behaviors and WPF samples implementing Multi-Touch Manipulation (Gestures) and Inertia.

    A demo is available here: http://gallery.expression.microsoft.com/MultiTouch/

How about a Sample Tablet Application built using Silverlight?

OK, so you have told us about a tablet and showed us open-source software that will help implement it. How about a sample tablet application as well as slides? Well, you are in luck because Jeremy Likness uploaded the slide deck along with the sample applications and source code from his talk at ReMix South about tablet development with Silverlight.

The video has been posted of his talk and you can see it here: http://www.vimeo.com/28129968.

You can view his complete article here: http://csharperimage.jeremylikness.com/2011/08/tablet-development-with-microsoft.html

Work through a lab by Microsoft to reinforce your knowledge.

This hands-on lab walks through the creation of a multi-touch image browser application. First, you will implement drop target functionality to load images and create a context menu. Then you will handle multi-touch events allowing you to arrange and rotate images.

http://msdn.microsoft.com/en-us/gg315167

Download The Offline Training Kit
Download Hands-on Lab Document (DOCX)
Download Hands-on Lab Document (PDF)
Download Hands-on Lab Source Files

Other Great Resources:

Consumerization of IT and Silverlight Line of Business.

Multitouch Part 4: Multitouch in Silverlight 

The last two links are slightly outdated resources, but drive the point home what you can do.

Multi-Touch 101 with Silverlight 

Multi-Touch Introduction Fundamentals 

A few other Windows 7 Tablets

Just so you are aware, there are other great Windows 7 Tablets available for purchase. I have included the specs where you can see what fits your customers need more easily.

MSI Windpad 100

Key features:

• 10-inch display
• Windows 7 Home Premium
• Multi-Touch
• Intel's (
INTC) Oak Trail Atom Processor
• 2GB of RAM
• 32GB SSD
• SIM card slot
• 8 hours of battery life
• Connectivity: Wi-Fi, Bluetooth, and a 3G module will be on some versions
• 2 USB ports
• 1.7 lbs
• Web camera
• HDMI port
• Price: $499

Asus Eee Pad EP121

Key features:

• 12-inch display
• Windows 7 Home Premium
• High Resolution Touch Sensitive Screen
• Multi-Touch
• CUL V Intel Core 2 Duo Processor
• 2GB of DDR2 RAM
• 32, 64 or 128GB SSD
• 10 hours of battery life
• Connectivity: Wi-Fi, Bluetooth and 3G
• USB ports
• 1.3 megapixel Web camera
• 1.48 lbs
• Memory and SIM card slots
• HDMI port
• Headphone/Mic Jacks
• Price: $1,000

Pegatron Masterpad

Key features:

• 11.6-inch display
• Windows 7 Home Premium
• Multi-Touch
• Intel Atom N450 processor
• 2GB RAM
• 32 or 64GB SSD
• 5 hours of battery life
• Connectivity: Wi-Fi, Bluetooth and 3G
• 2 USB ports
• 1.3 megapixel Web camera
• 2.18 lbs
• Memory card slot
• mini-HDMI port
• Price: Not available

Hewlett-Packard (HPQ) HP Slate

Key features:

• 8.9-inch display
• Windows 7 Home Premium
• Multi-Touch
• 1.6-GHz Intel Z530 Atom processor
• 1GB of DDR2 RAM
• 32GB or 64GB SSD
• 5 hours of battery life
• Connectivity: Wi-Fi, Bluetooth and optional 3G
• USB ports
• Front and rear Web cameras
• 1.49 lbs
• Memory and SIM card slots
• HDMI port
• Headphone/Mic Jacks
• Price: $549 for 32GB model, $599 for 64GB model

Hanvon TouchPad B10

Key features:

• 10.1-inch display
• Windows 7 Home Premium
• Multi-Touch
• 1.3GHz Intel Celeron ULV processor
• 2GB of DDR2 RAM
• 250GB hard drive
• 3.5 hours of battery life
• Connectivity: Wi-Fi and Bluetooth. 3G connectivity not included
• 2 USB ports
• 1.3 megapixel Web camera
• 1.98 lbs
• Memory and SIM card slot
• Mini HDMI port
• Headphone/Mic Jacks
• Price: $974

ExoPC Slate (Manufactured by Pegatron)

Key features:

• 11.6-inch display
• Windows 7 Home Premium
• Multi-Touch
• 1.66 GHz Intel Atom Pineview-M N450
• 2GB of DDR2 RAM
• 32GB or 64GB SSD
• 4 hours of battery life
• Connectivity: Wi-Fi, Bluetooth and 3G card slot
• 2 USB ports
• 1.3 megapixel Web camera
• 2.09 lbs
• Memory and SIM card slots
• HDMI port
• Headphone/Mic Jacks
• Price: $624 (32GB model), $724 (64GB model)

ViewSonic ViewPad 100

Key features:

• 10-inch display
• Windows 7 Home Premium (it's a dual-boot device that also runs Android 1.6)
• Multi-Touch
• 1.66Ghz Intel Atom N455 processor
• 1GB DDR3 RAM
• 16GB SSD, can expand to 32GB using the MicroSD slot
• 4.5 hours of battery life
• Connectivity: Wi-Fi and Bluetooth. 3G connectivity not included
• 2 USB ports
• 1.3 megapixel Web camera
• 1.9 lbs
• SIM card slot
• VGA port
• Headphone/Mic Jacks
• Price: $845

 

Conclusion

As you can tell from this post, there are several great tablets that can run a Silverlight application. Thankfully, we have a case study along with free open-source software and plenty of sample applications for reference. I hope this post at least sheds some light on tablet development with Silverlight. If you have any questions then feel free to ping me on twitter or email. You should also follow Jeremy Likness as he is the one really pushing this message home. You can also check out his blog here: http://csharperimage.jeremylikness.com/

alt Subscribe to my feed

Posted On Thursday, August 25, 2011 6:47 AM | Feedback (4)
Slides / Code / Resources for my OData Talk at devLINK 2011.

On August 19th 2011 I gave a presentation at devLINK titled, “Producing and Consuming OData in an Silverlight and Windows Phone 7 Application”. As promised, here is the Slides / Code / Resources to my talk.

Slides – The query slide in this deck was taken from a slide in Mike Taulty’s talk.

This is the first time that I used Prezi in a talk and it worked out wonderful! I want to apologize in advance for embedding a flash player in my blog. It is all that Prezi supports at this time. =(

Free Tools

Silverlight OData Explorer – Special Thanks to Adam Ryder for bringing it up.

SNAGHTML2932fde6

Odata Viewer Tool

image

Articles

You can read any of the parts by clicking on the links below.

  1. Producing and Consuming OData in a Silverlight and Windows Phone 7 application. (Part 1) – Creating our first OData Data Source and querying data through the web browser and LinqPad.
  2. Producing and Consuming OData in a Silverlight and Windows Phone 7 application. (Part 2) – Consuming OData in a Silverlight Application.
  3. Producing and Consuming OData in a Silverlight and Windows Phone 7 application. (Part 3)  – Consuming OData in a Windows Phone 7 Application (pre-Mango).
  4. Producing and Consuming OData in a Silverlight and Windows Phone 7 application. (Part 4)  – Consuming OData in a Windows Phone 7 Application (Mango).

e-Book:

The e-Book is available on SilverlightShow.net. It includes a .PDF/.DOC/.MOBI of the series with high resolution graphics and complete source code. See below for a table of contents:

Contents:

Chapter 1

Creating our first OData Data Source.
Getting Setup (you will need…)
Conclusion

Chapter 2

Adding on to our existing project.
Conclusion

Chapter 3

Testing the OData Data Service before getting started…
Downloading the tools…
Getting Started
Conclusion

Chapter 4

Testing and Modifying our existing OData Data Service
Reading Data from the Customers Table
Adding a record to the Customers Table
Update a record to the Customers Table
Deleting a record from the Customers Table
Conclusion

Thanks to all for attending my talk and I hope to see you all next year.

    alt Subscribe to my feed

    Posted On Sunday, August 21, 2011 7:38 AM | Feedback (0)
    2 Good Reasons to update to the latest Mango Beta 2 Refresh Update

    image

    So, you grabbed the latest Mango Build and installed it on your phone. Now your probably thinking, Why should I update to the latest Mango Beta 2 Refresh? Well, I will give you two good reasons. 

    • New Screen Shot Tool built into the Emulator
    • Marketplace Test Kit

    Screen Shot Tool

    You may be thinking, there are a hundred ways to take a screen shot. I personally used SnagIt, but this involved a lot of steps.

    1. Load up SnagIt.
    2. Make sure my Emulator was visible.
    3. Click the “Capture Button” in SnagIt.
    4. Resize the Image to the proper dimension for the MarketPlace.
    5. Save the file as a .PNG for the MarketPlace.

    Now, Microsoft has made this much easier.

    Fire up your WP7 project and run it. After the emulator loads then click on the >> button and you will see “Additional Tools”. A new tab is located called “Screenshot”. If you click the Capture button then the image will display in the preview window below as shown.

    image

    Go ahead and click the “Save” button.

    image

    Now if you examine the file that it saved then you will see it is now in .PNG format.

    SNAGHTML11424f3

    You can now click the properties and see the proper width and height are set for you.

    SNAGHTML114b14a

    At this point, the image is ready for the marketplace.

    NOTE: The only thing I wish was added to this functionality was a way to “Capture” multiple images and save them all at once. Right now the Screenshot tool will only allow one at a time.

    Marketplace Test Tool

    Before we get started, let me answer the question. “What is it?” The Marketplace Test Kit provides test cases that help prepare your application for the Marketplace submission process. These test do not guarantee a pass, but will surely help increase your chances.

    Let’s get started:

    If you right click on your project, then you will notice a new option called “Open Marketplace Test Kit”.

    NOTE: If you have a pre-Mango WP7 project, then you will need to upgrade it first before seeing this option.

    image

    The first thing to check is to look at the bottom of your screen for this message.

    image

    If you see it then you will definitely want to go ahead and click Update. VS2010 will let you know when it’s ready.

    SNAGHTML11b74e6

    Once updated, you should be on the “Application Details” screen.

    Now you just click the browse button under each one and it will verify your image is the proper dimension. 

    image

    Next up is, “Automated Tests”. This is an easy one as all you have to do is simply click the “Run Tests” button.

    image

    But let me warn you that if your project is not set to “Release” then you will get the following errors.

    image

    Click “Release” from the dropdown and then click the “Run Tests” button again.

    image

    image

    Next up is the “Monitored Tests”. You will want to click “Start Application” and then the emulator will load your project and you just need to interact with the application.

    image

    Last is “Manual Tests”. As the name states this is a manual process that the developer will need to do by him / her self.

    image

    Conclusion:

    As you can see developing for the WP7 is only getting easier. With more and more improvements with each release. I hope you found this post helpful.

    Posted On Saturday, August 13, 2011 1:04 PM | Feedback (1)
    Using the “Copy Xaml” feature in Expression Design to create HTML5 SVG Path Data.

    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.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:

    SNAGHTMLab3ebdc

    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.

    alt Subscribe to my feed

    Posted On Thursday, August 04, 2011 7:00 AM | Feedback (1)
    Tag Cloud