Windows Phone SVG Icon Generator

Posted on 07.11.11

0



When you submit a Windows Phone app you need to specify the app’s icon in different resolutions:

  • Application Icon (62 x 62)
  • Application Tile Image (173 x 173)
  • Device application icon for Windows Phone Marketplace catalog (99 x 99)
  • Device application icon for Windows Phone Marketplace catalog (173 x 173)
  • Desktop application icon for Windows Phone Marketplace catalog (200 x 200)

It’s great to create icons using a vector format so that it is easy to scale it later on. Windows Phone apps usually have simple icons, and that makes vector graphics to be an even better choice.

Scalable Vector Graphics (SVG) is the vector markup language for the web. In HTML5 you can have inline SVG. That means you can create web apps with SVG functionality. I have created a Windows Phone SVG Icon Generator that makes it easy to create the icons required by the Windows Phone Marketplace. Take a look at the video demo below.

The generator is currently supported in:

When you hit the “generate icons” button the SVG markup gets saved into HTML5 storage.

In the generator app there is a textarea where you add the SVG markup. When you hit the “generate icons” button this markup gets wrapped into the following SVG template:

<svg>
    <defs>
        <g id="icon">
            <!-- SVG from textarea goes here -->
        </g>
    </defs>
</svg>

Then it gets added to a zero size SVG element. There are five other SVG elements on the page. They look like this:

…

<svg>
    <g transform="scale(1.73)">
        <use xlink:href="#icon" />
    </g>
</svg>

…

<svg>
    <g transform="scale(.62)">
        <use xlink:href="#icon" />
    </g>
</svg>

…

<svg>
    <g transform="scale(2)">
        <use xlink:href="#icon" />
    </g>
</svg>

…

<svg>
    <g transform="scale(1.73)">
        <use xlink:href="#icon" />
    </g>
</svg>

…

<svg>
    <g transform="scale(.99)">
        <use xlink:href="#icon" />
    </g>
</svg>

…

So I just use the SVG use element to reference the defined icon. I also scale all the icons so that they match the Windows Phone Marketplace requirements. Just remember to use a 100 by 100 coordinate system that has the origin point 0,0.

The animation of the initial Windows Phone lookalike loading screen is created using Synchronized Multimedia Integration Language (SMIL). Here is the markup:

<rect width="100" height="100" fill="white" />
<line x1="-100" y1="1" x2="0" y2="1"
    stroke="#e51400" stroke-dasharray="2 18" stroke-width="2">
    <animate dur="4s" repeatCount="indefinite" attributeName="x1" 
        keyTimes="0;.25;.75;1" values="-100; 20; 54; 100" />
    <animate dur="4s" repeatCount="indefinite" attributeName="x2"
        keyTimes="0;.25;.75;1" values="0; 46; 80; 200" />
    <animate dur="4s" repeatCount="indefinite" attributeName="stroke-dasharray"
        keyTimes="0;.25;.75;1" values="2 18; 2 4; 2 4; 2 18" />
</line>
<text x="50" y="50" text-anchor="middle" fill="#e51400" font-size="8">
    generate icons...
</text>

Hope you like the Windows Phone SVG Icon Generator!

Advertisements
Tagged: , , ,
Posted in: Uncategorized