Application launcher icon is of bad quality

[patrickfrei]

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!

[wizard_hu_]

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

[patrickfrei]

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

[patrickfrei]

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

[teemup]

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?

[patrickfrei]

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.

[teemup]

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.

[patrickfrei]

Unfortunately, that doesn't work either...

[wizard_hu_]

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.

[patrickfrei]

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:

<?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>

[teemup]

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?

[wizard_hu_]

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.

[patrickfrei]

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

[wizard_hu_]

Have you checked what it is?
For this purpose you can simply remove the

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

[patrickfrei]

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!