Hot to use PNG as Flash Lite application icon instead of SVG

Posted in Development, Flash Lite, KuneriLite, S60, SIS, Tutorials, packaging on Nov 26, 2009

Many Swf Packager tools (KuneriLite, SWF2Go, Janus) use SVG-t as their primary icon format.

With these instructions you can use also PNG file easily:

1. Convert the PNG image to base64 format from here.

(Press “Browse” to select the file and then “Convert”)

2. You’ll see “Base64 representation of the source data”
Copy and paste the entire textfield into some text-editor.

3. As SVG is basically text file, we can directly use the Base64 formatted text.
Use the template text below to create your SVG (replace the text
THE BASE64 ENCODED BITMAP GOES HERE with your copy pasted text) :

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
contentScriptType="text/ecmascript" zoomAndPan="magnify"
baseProfile="tiny" contentStyleType="text/css" version="1.0"
width="6.77196" preserveAspectRatio="xMidYMid meet" viewBox="0 0 6.77196
6.85856" height="6.85856" fill-rule="evenodd">
<g>
<metadata/>
<g>
<image x="-2.847" y="-3.71656" transform="matrix(1 0 0 1
2.847 3.71656)" width="6.77196" xlink:href="data:image/png;base64,THE
base64 ENCODED BITMAP GOES HERE" xlink:type="simple"
xlink:actuate="onLoad" height="6.85856" preserveAspectRatio="xMidYMid
meet" xlink:show="embed"/>
</g>
</g>
</svg>

Now save the text file and convert the SIS.
No more hassle with Illustrator, Inkscape and SVG2SVGT Converter !
However, your bitmap icon will not be scalable, so stick to SVG if you are targeting more than one device model.

Kudos to Riku Salminen/FN for the hint!

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Slashdot
  • Technorati
  • email
  • Facebook
  • Furl
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • Netvouz
  • NewsVine
  • Pownce
  • Reddit
  • StumbleUpon
  • TwitThis

Trackback URI | Comments RSS

6 Responses to “ Hot to use PNG as Flash Lite application icon instead of SVG ”

  1. # 1 William Says:
    November 26th, 2009 at 12:34

    Yes, useful hint.
    I tested this raw solution when I was fighting with SVG icon with gradient (SVG not tiny was the best solution I found)
    But the result will be bad according View mode on Symbian (I don’t remember which one throught) + you can easily see the difference between a pure SVG icon and a fake SVG (using PNG)
    So, for quick testing only I think

  2. # 2 Using PNG as Flash Lite application icon instead of SVG | Adobe Flash Lite Says:
    November 27th, 2009 at 13:54

    [...] can also visit here to get the details. bordercolor="FFFFFF"; bgcolor="ffffff"; linkcolor="004000"; [...]

  3. # 3 Ugur Says:
    December 2nd, 2009 at 0:49

    Hi William,

    I agree with you; it’s not a very good solution. But works on some occasions very well, i.e if your app is touch only, the resolution is the same; so if you prepare the icon the right size, it looks quite well. Problem with SVG is; the icons you can make are quite limited, which is a big show-stopper.

    Ugur.-

  4. # 4 Jukka Says:
    December 3rd, 2009 at 13:02

    Fixed: The XML code above shows now correctly as HTML

  5. # 5 Grego Says:
    January 19th, 2010 at 1:51

    A shameless plug, http://mpaja.com/frontpage/SVG_Pony can help you to get nice looking SVG Tiny 1.1+ from regular SVG files. You can also preview them on Nokia phones with wifi.

  6. # 6 Supriya Tenany Says:
    February 10th, 2010 at 6:20

    Hi, I have checked the SIS of my application to contain both the svg and the png. but the problem is, after downloading to the handset, no application logo appears. what could be the problem?

Speak your peace!

←
→