Hi Inkscape experts,

we need the pixmap based android ic-launcher icons (512x512) attached to this post converted to pure vector versions for our iso-country-flags-svg-collection project over at github: https://github.com/koppi/iso-country-fl ... collection

The names of the template files (in order displayed below) are squared-fore-simple.png, squared-fore-flat.png, squared-fore-fancy.png and squared-fore-glossy.png We need help with the drop shadow effect, the fancy-/glossy-shiny effects. Howto achieve these effects with pure svg?

The pixel based templates.svg is here: https://raw.github.com/koppi/iso-countr ... plates.svg

We need the svg versions as a drop-in replacement for the pixmap versions. They should to be looking similar to the pixmap versions as close as possible. Any help is greatly appreciated.

Kind regards,
Jakob

Update: we now have a working pure svg "squared-back-shadow.svg" pixmap replacement over here: https://raw.github.com/koppi/iso-countr ... shadow.svg

Welcome to InkscapeForum!

So when you say "icons", the sample images you provided appear to only be a drop shadow and some various other effects. Do you literally only need the drop shadow and other effects? I don't understand why whoever made the rest of the icons (apparently already in vector) can't make this part?

Firefox doesn't want to open the SVGs to which you posted a link, so I can't see those 2 reference images. Perhaps they would explain why you only need part of the icons? If you could upload the SVGs here, as attachments, I should be able to open them with Inkscape. But even then, I probably can't help much.

Well, I can at least tell you that you can create a drop shadow with a filter that ships with Inkscape (Filters menu). For the other effects, it would just take a lot of experimenting, trying to recreate the other effects. Certainly you would use a lot of blurring, and perhaps a gradient in the last one on the right.

Besides the drop shadow, I couldn't give you any step-by-step instructions. I think it would have to be someone who is very familiar with raster graphics AND vector graphics, who could probably give you some better clues.

Hi brynn, thanks for your welcome. Unfortunately I'm still unable to create the vector versions of the PNG files from my first post. I've tried different effects and layering, but in the end, the result looks not nearly as well as the originals. Do you know some pixel/vector experts, who could elaborate on my request? - This would really be helpful, as I'm totally stuck with this conversion task.

Plenty of such experts participate in this forum. Hopefully one or more will see this message and offer some suggestions.

I'm pretty busy right now, but if I can find some time, I'll see what I can do. I really think others will be more helpful though

Do you have any info about the settings/tools used for bitmap version of fake 3d effects (on borders). It will greatly help.

See attached svg for my version

Hi Jakob,
Well, it looks like you're on the right track. I've spent many hours trying to learn how to create new filters for myself. So far, I've only been able to tweak existing filters. I haven't found the trick to create new ones yet. Which I mention just so you have an idea about my skill level here.

It looks like you have created some custom filters, which is an accomplishment by itself! For that, I would suggest trying to stay as basic as possible. And for that matter, you might not necessarily need to use filters at all, at least not fancy ones. Blur is the simplest filter. So for the drop shadow, simply duplicate the rounded....I can't quite discern if they're true squares or technically rectangles. But anyway, Duplicate, Lower (in z-order), and Move (looks like the drop shadows are perfectly vertical, with no horizontal shift at all, but hard to know just by looking) then add some blur. The drop shadow filter simply does all that automatically.

Pardoning my crude circle and arrow, do you see in my screenshot, how it looks like there are 2 squares there, with the top one shifted up slightly. There are probably a few ways to simulate that, but the simplest way, I'm thinking you could accomplish by Duplicating the rounded square, remove Fill, add a thin black Stroke, Blur and Move up. And of course you could make a filter to include that with the drop shadow behind it.



The 2 in the middle of the 4 have that appearance to me. And I'm actually not sure if that was done purposely, or if it's an unintended artifact of some sort. Do you know if these were originally created with vector software, or have they always been raster?

Another thing I notice, in your file, it looks like the objects used for the drop shadow are not quite as large as in your screenshots. It looks like you probably used the duplicated square, dropped it and blurred it. So you could probably get closer to the examples by enlarging the blurred object slightly.

The 3rd one from the left, to me, is not very much different from the 2nd one. And I'm not quite sure....well, I'm not quite sure how to do any of it. So these are all just thoughts at this point. I think the top square could have a wider stroke all the way around (than the 2nd), at least that's how it appears to me. But at the bottom, it looks like either the stroke is wider at the bottom, or there's an extra blurred stroke there maybe. Or possibly a gradient could be used. Or possibly even Interpolation could be used.

The last one on the right would probably be the hardest for me, but it looks like you've made a good start with it. Instead of having the 2 shapes divided by the upward convex curve.....well, I really don't see any upward convex indications on the originals. I just have a typical, standard laptop screen, so maybe I just don't see it?? But what I see is the downward convex curve ("upward/downward convex" is not any kind of technical terminology, it's just the best words I can think of at the moment ). I would flip those 2 top objects, so that the curve looks like a smile (that's pretty clear, huh ). Then I would delete the top one, and keep the radial gradient (but maybe make it a little darker). Then somehow there's either a linear gradient underneath it, or a blurred rectangle whose top corners aren't rounded.

Usually folks on this forum are pretty eager to experiment with different techniques to accomplish a particular goal. I'm sure they will join in the discussion soon.

Btw, did you say these are for icons for a phone?? Or I guess you said "Android" which I think could mean a tablet, right? I can hardly keep up with technology these days. Anyway, if they are for a phone, they will need to be tiny, and believe it or not, that means they may need to be made differently -- not because of scaling issues, but because of how our eyes work. If I have let's say an image that's 500 x 500 px, and I scale it down to 50 x 50, it will look different. You might find that you have to play with shades of color and/or transparency. Some object that looks like a circle a 500 px^2, might look like a dot at 50 px^2. In this case, it will mostly be transparency, and maybe shades of gray that need to change.

I'll try and find some time next week to play around with these things, especially if no one else seems interested. I'm sorry, I wish I could do it right away. Hang in there, and good luck