×

Discussion Board

Results 1 to 15 of 15
  1. #1
    Registered User
    Join Date
    Nov 2006
    Location
    Switzerland
    Posts
    471

    Application launcher icon is of bad quality

    Hi

    Currently, I'm creating an application launcher icon with Illustrator CS5 according to the Nokia design guidelines.

    As mentioned in the documentation, I've inserted an own graphic (consists of multiple paths) to the layer "PLACE YOUR GRAPHIC HERE", removed unused layers and exported the image in SVG format with the according settings. The whole image looks fine until I install the app on a phone. There, every single part of the graphic is surrounded by a white rectangle...

    I've already tried to insert the own graphic in different image formats (SVG, JPG, etc.) but that results in partially hidden parts or even the whole graphic is hidden by the background...

    Can someone help me?

    Thank you!

  2. #2
    Nokia Developer Moderator
    Join Date
    Feb 2006
    Location
    Budapest, Hungary
    Posts
    28,570

    Re: Application launcher icon is of bad quality

    Can it happen that the background of those paths is not transparent, but white? In this case the paths are going to be rendered with their bounding rectangles as I remember.
    Unfortunately I am not familiar with Adobe Illustrator, so I do not know how to check. However if you are editing the content on a white background, white rectangles are not that spectacular, there may be an option to switch to a checkerboard background or just change the color (I mean the background of the editor window, not the SVG of course).

  3. #3
    Registered User
    Join Date
    Nov 2006
    Location
    Switzerland
    Posts
    471

    Re: Application launcher icon is of bad quality

    Hmm, I'm not sure as I'm not so familiar with Illustrator, too.

    The graphic is in a PS file. I've opened it in Illustrator. There, the background is white. Then, I've copied the graphic to the Nokia design template. There, the graphic has no white rectangles. Everything looks fine. Seems to be really transparent. Then, I've saved it as SVG and had a look at it in Inkscape. That looks fine, too.

    But: If I open it in Nokia SVG converter, the image has even black rectangles and the preview of the SVGT image looks fine. Really strange...

  4. #4
    Registered User
    Join Date
    Nov 2006
    Location
    Switzerland
    Posts
    471

    Re: Application launcher icon is of bad quality

    The problem obviously occurs during the conversion of SVG to SVGT. I'm using SVG2SVGT or Nokia SVG Converter but I have the same problem with both tools.

    I've attached a part of the graphic (sample.png). As you can see, the background is not precisely behind the gear-wheel but is being expanded in form of a rectangular with a white border.

    Can someone help me to get rid of that?

    sample.png

  5. #5
    Regular Contributor
    Join Date
    May 2010
    Posts
    362

    Re: Application launcher icon is of bad quality

    Try exporting from Illustrator to SVG 1.0 (in the file-> export to devices/web or similar).
    In my experience 1.0 works better than "SVG Tiny".

    If this doesn't work: Are you using some bitmaps in the icon?

  6. #6
    Registered User
    Join Date
    Nov 2006
    Location
    Switzerland
    Posts
    471

    Re: Application launcher icon is of bad quality

    No, I don't use bitmaps. I've used SVG 1.0 and SVG Basis 1.1 but it still doesn't work... SVG 1.0 creates the effect as mentioned before and SVG Basis partially hides the graphic by the background. I'm quite sure that the problem occurs during the conversion from SVG to SVGT as I get some warnings with SVG Converter...
    Found 6 raster 'image' elements. Quality may not be optimal.
    Removed 1 unacceptable attribute 'xmlns:a' in 'svg'
    Removed 1 unacceptable attribute 'enable-background' in 'svg'
    Removed 12 unacceptable elements 'clipPath'
    Removed 12 unacceptable attributes 'clip-path' in 'g'
    Removed 6 unacceptable attributes 'overflow' in 'image'

    ...and with SVG2SVGT...
    Performing conversions for "opacity" element.
    Performing conversions for "linearGradient" element.
    Performing conversions for "linearGradient" element.
    Performing conversions for "opacity" element.
    Removing SVG name spaces from the SVG elements.
    Removing non-referred "id" attributes.
    Merging similar gradient paint definitions.
    Removing empty nodes from the document.

  7. #7
    Regular Contributor
    Join Date
    May 2010
    Posts
    362

    Re: Application launcher icon is of bad quality

    Could you try exporting to SVG 1.0 and just using that without SVG2SVGT conversion?

    Remember that you should preferably delete the App and reboot the phone before trying a new icon.

  8. #8
    Registered User
    Join Date
    Nov 2006
    Location
    Switzerland
    Posts
    471

    Re: Application launcher icon is of bad quality

    Unfortunately, that doesn't work either...

  9. #9
    Nokia Developer Moderator
    Join Date
    Feb 2006
    Location
    Budapest, Hungary
    Posts
    28,570

    Re: Application launcher icon is of bad quality

    It may make sense showing the SVG source of some problematic icon. If you are worried about getting your icon stolen, remove some path elements (or the d attribute from them), it also makes the posted code shorter. Just make sure that the problem is still visible.

  10. #10
    Registered User
    Join Date
    Nov 2006
    Location
    Switzerland
    Posts
    471

    Re: Application launcher icon is of bad quality

    I've just created a small icon that shows the effect. As you can see by using the image code below, there is an ugly box with white borders around the gear-wheel instead of two properly separated backgrounds (inside & outside the gear-wheel).

    I've created the image as follows: I took the Nokia design template for Illustrator 5, applied an orange background and put in the gear-wheel. Then, I've converted it to SVG as described in the guidlines and converted it to SVGT with SVG Converter.

    Image code:
    Code:
    <?xml version="1.0"?>
    <!-- Converted with SVG Converter - Version 0.9.5 (Compiled Mon May 30 09:08:51 2011) - Copyright (C) 2011 Nokia -->
    <svg xmlns="http://www.w3.org/2000/svg" width="96px" x="0px" y="0px" version="1.1" viewBox="0 0 96 96" height="96px" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="tiny" id="svg2" xml:space="preserve">
     <metadata id="metadata186"/>
     <defs id="defs4"/>
     <rect width="96" fill="none" height="96" id="BOUNDING_BOX_1_"/>
     <path stroke-opacity="0.4" fill-opacity="0.4" id="SHADOW_1_" d="M88.023,49c0,29.633-10.364,40-40,40c-29.635,0-40-10.367-40-40c0-29.634,10.366-40,40-40  C77.659,9,88.023,19.365,88.023,49z"/>
     <linearGradient id="RED_x2F_ORANGE_5_3_" y1="8.0107" x1="47.9995" y2="87.9897" gradientUnits="userSpaceOnUse" x2="47.9995">
      <stop offset="0" style="stop-color:#FFDB62" id="stop9"/>
      <stop offset="0.1393" style="stop-color:#FAD15C" id="stop11"/>
      <stop offset="0.3741" style="stop-color:#EDB74D" id="stop13"/>
      <stop offset="0.4848" style="stop-color:#E6A844" id="stop15"/>
      <stop offset="1" style="stop-color:#C96B25" id="stop17"/>
     </linearGradient>
     <path fill="url(#RED_x2F_ORANGE_5_3_)" id="RED_x2F_ORANGE_5_2_" d="M8,47.988c0,29.634,10.365,40.001,40,40.001  c29.637,0,40-10.367,40-40.001c0-28.984-9.926-39.529-38.091-39.978h-3.817C17.928,8.459,8,19.004,8,47.988z"/>
     <linearGradient id="HIGHLIGHTS_RO5_2_" y1="8.2559" x1="47.9995" y2="87.5043" gradientUnits="userSpaceOnUse" x2="47.9995">
      <stop offset="0" style="stop-color:#FFFFFF" id="stop21"/>
      <stop offset="0.0958" style="stop-color:#FDF8F5" id="stop23"/>
      <stop offset="0.2579" style="stop-color:#F6E6DB" id="stop25"/>
      <stop offset="0.4666" style="stop-color:#EBC9AF" id="stop27"/>
      <stop offset="0.7136" style="stop-color:#DCA073" id="stop29"/>
      <stop offset="0.9904" style="stop-color:#CA6D28" id="stop31"/>
      <stop offset="1" style="stop-color:#C96B25" id="stop33"/>
     </linearGradient>
     <path stroke-opacity="0.25" fill="url(#HIGHLIGHTS_RO5_2_)" fill-opacity="0.25" id="HIGHLIGHTS_RO5_1_" d="M48,8C18.365,8,8,18.365,8,48  c0,29.633,10.365,40,40,40c29.637,0,40-10.367,40-40C88,18.365,77.637,8,48,8z M48,87.023C18.842,87.023,9,77.176,9,48  S18.842,8.977,48,8.977S87,18.824,87,48S77.158,87.023,48,87.023z"/>
     <g id="g132" transform="translate(19.271656,-18.552564)">
      <defs id="defs134">
       <path id="SVGID_3_" d="m 31.12,60.438 -1.017,-0.539 -1.174,1.195 c -0.594,0.607 -1.724,0.531 -2.258,-0.15 l -1.069,-1.363 -1.067,0.348 0.015,1.729 c 0.008,0.875 -0.818,1.643 -1.653,1.539 l -1.666,-0.213 -0.495,1.031 1.194,1.248 c 0.605,0.631 0.566,1.793 -0.078,2.324 l -1.29,1.063 0.37,1.113 1.674,0.035 c 0.849,0.02 1.62,0.896 1.542,1.754 l -0.155,1.715 1.017,0.543 1.173,-1.197 c 0.593,-0.605 1.723,-0.529 2.257,0.15 l 1.069,1.363 1.068,-0.346 -0.015,-1.73 c -0.009,-0.875 0.819,-1.643 1.652,-1.537 l 1.668,0.213 0.494,-1.033 -1.196,-1.248 c -0.606,-0.631 -0.566,-1.795 0.078,-2.324 l 1.29,-1.064 -0.371,-1.111 -1.674,-0.035 c -0.848,-0.02 -1.618,-0.896 -1.54,-1.756 l 0.157,-1.717"/>
      </defs>
      <g id="g140">
       <defs id="defs142">
        <rect width="13.987" x="20.563" y="59.580002" height="14.545" id="SVGID_4_"/>
       </defs>
       <g id="g148">
        <image width="68" height="67" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEBPQE9AAD/7AARRHVja3kAAQAEAAAAHgAA/+4AIUFkb2JlAGTAAAAAAQMA EAMCAwYAAAJoAAAC9wAAA/3/2wCEABALCwsMCxAMDBAXDw0PFxsUEBAUGx8XFxcXFx8eFxoaGhoX Hh4jJSclIx4vLzMzLy9AQEBAQEBAQEBAQEBAQEABEQ8PERMRFRISFRQRFBEUGhQWFhQaJhoaHBoa JjAjHh4eHiMwKy4nJycuKzU1MDA1NUBAP0BAQEBAQEBAQEBAQP/CABEIAEYARgMBIgACEQEDEQH/ xACqAAACAwEBAAAAAAAAAAAAAAAAAwECBAUGAQACAwEAAAAAAAAAAAAAAAAEBQECAwAQAAIBAgUE AQUAAAAAAAAAAAACAQMEEBETRBUSIjQFFCEyIzMkEQABAgELBAIDAAAAAAAAAAABAAIRMHGhsdES wgMzgzQhQZKTMRMiMgQSAAECAgYIBwAAAAAAAAAAAAABAiBDETGxMjODQWFygqIDc6PwIYGRElIT /9oADAMBAAIRAxEAAAD1is+dIw6E4rR2yMtZ7WYa0n0hQcA8dTqJj7XlmtF10LtGdWhI2vdAdAcm l6KTXuzt3zamy7QtLUibd0BwDx13QlP03z2vV1V1npVNcNPQgPV3NSCsuZCskBPRAVntgOAf/9oA CAECAAEFAKt1XirFzcE3FwTd3EHUxUjOsiDIVFwf91OYHaCpOFWcqy1CagzZ4VdPUjTJ0z8R9D// 2gAIAQMAAQUASjTlJpUjSpGjSMoFnsliGFnBfsaBYFwSOyVIUiME6unvO878P//aAAgBAQABBQC6 9pWoXHM1zmbg5i4OXuDmLg5muczXNWfjex82IzIUhToJUlcNh7DzVUVSFOklRlGg2F/H9qwLAqkq Mo0DwbG+81BBRshxxzY3/mrIsisSwzDSPJsfYT/asisQxLDMMw0mw9j5qsQxDHUSwzYbC9o2zXWh aEULU0LY0LYmhamhaGhaGS/E/9oACAECAgY/AHtR6oiPcie5iOMRxiOK5Xy9TmdR1sGSczqOtgyT mdR1sGSPp/G+6v8ASmvUSe6Se6SO6aMLX4oP/9oACAEDAgY/AGqrU82oXULqF1DfoG7KQb43ZSDf G7KQZg3Eup9CZwEzgJnAab5//9oACAEBAQY/AH5TWNIaehMY/E602U2rTZTatNlNq/RlNq02U2rT ZTatNlNq+6AvXL8O0YRWbOKhIbWFZs4qEhtYVmzioSG1hWbOKhIbWFZs4qEhtYVmzioSG1hWbOKh IbWFZhf/AEBjiRFtxxh0HcLlD1uXKHg5coeDlyR4OXKHg5coety5Q9bldvfj9cL0O135gv/Z" id="image150" transform="matrix(0.2272,0,0,-0.2272,20.1958,74.5137)"/>
       </g>
      </g>
     </g>
     <path style="fill:none;stroke:#580400;stroke-width:0.88709998;stroke-miterlimit:10" id="path152" d="m 50.391656,41.885436 -1.017,-0.539 -1.174,1.195 c -0.594,0.607 -1.724,0.531 -2.258,-0.15 l -1.069,-1.363 -1.067,0.348 0.015,1.729 c 0.008,0.875 -0.818,1.643 -1.653,1.539 l -1.666,-0.213 -0.495,1.031 1.194,1.248 c 0.605,0.631 0.566,1.793 -0.078,2.324 l -1.29,1.063 0.37,1.113 1.674,0.035 c 0.849,0.02 1.62,0.896 1.542,1.754 l -0.155,1.715 1.017,0.543 1.173,-1.197 c 0.593,-0.605 1.723,-0.529 2.257,0.15 l 1.069,1.363 1.068,-0.346 -0.015,-1.73 c -0.009,-0.875 0.819,-1.643 1.652,-1.537 l 1.668,0.213 0.494,-1.033 -1.196,-1.248 c -0.606,-0.631 -0.566,-1.795 0.078,-2.324 l 1.29,-1.064 -0.371,-1.111 -1.674,-0.035 c -0.848,-0.02 -1.618,-0.896 -1.54,-1.756 l 0.157,-1.717" stroke-miterlimit="10"/>
    </svg>

  11. #11
    Regular Contributor
    Join Date
    May 2010
    Posts
    362

    Re: Application launcher icon is of bad quality

    You said you didn't use any bitmaps, but clearly there is JPEG there.
    Would you be able to make that into a vector shape?

  12. #12
    Nokia Developer Moderator
    Join Date
    Feb 2006
    Location
    Budapest, Hungary
    Posts
    28,570

    Re: Application launcher icon is of bad quality

    Indeed, if I simply cut that jpeg stuff out, the icon becomes 1.5k smaller, and it looks much better, at least in IE9 (the original one shows the white box even in IE)
    Some whitish highlight (or what) is gone, but that is certainly something that you can re-create with vector graphics.

  13. #13
    Registered User
    Join Date
    Nov 2006
    Location
    Switzerland
    Posts
    471

    Re: Application launcher icon is of bad quality

    Sorry, I wasn't aware of that jpeg... can you tell me how I can convert it to a vector graphic in Illustrator?

  14. #14
    Nokia Developer Moderator
    Join Date
    Feb 2006
    Location
    Budapest, Hungary
    Posts
    28,570

    Re: Application launcher icon is of bad quality

    Have you checked what it is?
    For this purpose you can simply remove the
    Code:
       <g id="g148">
        <image width="68" height="67" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEBPQE9AAD/7AARRHVja3kAAQAEAAAAHgAA/+4AIUFkb2JlAGTAAAAAAQMA EAMCAwYAAAJoAAAC9wAAA/3/2wCEABALCwsMCxAMDBAXDw0PFxsUEBAUGx8XFxcXFx8eFxoaGhoX Hh4jJSclIx4vLzMzLy9AQEBAQEBAQEBAQEBAQEABEQ8PERMRFRISFRQRFBEUGhQWFhQaJhoaHBoa JjAjHh4eHiMwKy4nJycuKzU1MDA1NUBAP0BAQEBAQEBAQEBAQP/CABEIAEYARgMBIgACEQEDEQH/ xACqAAACAwEBAAAAAAAAAAAAAAAAAwECBAUGAQACAwEAAAAAAAAAAAAAAAAEBQECAwAQAAIBAgUE AQUAAAAAAAAAAAACAQMEEBETRBUSIjQFFCEyIzMkEQABAgELBAIDAAAAAAAAAAABAAIRMHGhsdES wgMzgzQhQZKTMRMiMgQSAAECAgYIBwAAAAAAAAAAAAABAiBDETGxMjODQWFygqIDc6PwIYGRElIT /9oADAMBAAIRAxEAAAD1is+dIw6E4rR2yMtZ7WYa0n0hQcA8dTqJj7XlmtF10LtGdWhI2vdAdAcm l6KTXuzt3zamy7QtLUibd0BwDx13QlP03z2vV1V1npVNcNPQgPV3NSCsuZCskBPRAVntgOAf/9oA CAECAAEFAKt1XirFzcE3FwTd3EHUxUjOsiDIVFwf91OYHaCpOFWcqy1CagzZ4VdPUjTJ0z8R9D// 2gAIAQMAAQUASjTlJpUjSpGjSMoFnsliGFnBfsaBYFwSOyVIUiME6unvO878P//aAAgBAQABBQC6 9pWoXHM1zmbg5i4OXuDmLg5muczXNWfjex82IzIUhToJUlcNh7DzVUVSFOklRlGg2F/H9qwLAqkq Mo0DwbG+81BBRshxxzY3/mrIsisSwzDSPJsfYT/asisQxLDMMw0mw9j5qsQxDHUSwzYbC9o2zXWh aEULU0LY0LYmhamhaGhaGS/E/9oACAECAgY/AHtR6oiPcie5iOMRxiOK5Xy9TmdR1sGSczqOtgyT mdR1sGSPp/G+6v8ASmvUSe6Se6SO6aMLX4oP/9oACAEDAgY/AGqrU82oXULqF1DfoG7KQb43ZSDf G7KQZg3Eup9CZwEzgJnAab5//9oACAEBAQY/AH5TWNIaehMY/E602U2rTZTatNlNq/RlNq02U2rT ZTatNlNq+6AvXL8O0YRWbOKhIbWFZs4qEhtYVmzioSG1hWbOKhIbWFZs4qEhtYVmzioSG1hWbOKh IbWFZhf/AEBjiRFtxxh0HcLlD1uXKHg5coeDlyR4OXKHg5coety5Q9bldvfj9cL0O135gv/Z" id="image150" transform="matrix(0.2272,0,0,-0.2272,20.1958,74.5137)"/>
       </g>
    block from the .svg and check what is missing.

  15. #15
    Registered User
    Join Date
    Nov 2006
    Location
    Switzerland
    Posts
    471

    Re: Application launcher icon is of bad quality

    Yes, I've just checked it and could identify the jpeg. It's the background of the gear-wheel. I'm pretty sure that I can get rid of it and add the background in another way. Thank you very much for your help!

Similar Threads

  1. Replies: 5
    Last Post: 2010-04-10, 20:22
  2. Express Signing for Non visible + hidden active GPRS icon App
    By strutv in forum Symbian Signed Support, Application Packaging and Distribution and Security
    Replies: 11
    Last Post: 2009-06-01, 10:13
  3. Starting a hidden Icon Application in Symbian.
    By nital_shah in forum General Development Questions
    Replies: 3
    Last Post: 2008-06-18, 07:22
  4. Replies: 1
    Last Post: 2007-02-22, 13:52

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •