How to develop a SVG logo

Although some days later, here you have the promised tutorial about how I did the ShareIt! logo fully with free software :-)

First of all, I wanted to develop it fully with Inkscape using an own font developed with FontForge like it's explained on this Inkscape tutorial (that showing an style similar to the one I wanted, it was a good starting point), but being a totally noob with this app, I decided to start with a vectorial app whom I'm more familiar: Dia. With it I could be able to anchor the lines to the grid so it's was faily easier to develop the text.

I created the grid on the left as a guide for the letters... Working with a 800% zoom becames the background grid a little useless :-P

Originally I only wanted to create the font to export it and follow the tutorial as originally intended, but being a vectorial app, why I would like to do this if at the end I'll convert it back to vectorial paths? It was no sense, so finally I exported it directly as SVG and imported it on Inkscape. Dia exported it as a lot of independent paths and objects so first I needed to convert all the objects to paths (select all the objects and later Path > Object to path) and later join all the independent paths ends between them to create some closed ones (select one path, click on the end node, select the other path and the other end node holding the shift key and later join the selected nodes on the toolbar).

With the 'a', the 'r' and the 'e' characters it needed one more step: use booleans operations with the objects. This way I would add the vertical line to the body of the 'a' and the vertical line to the head of the 'r' (select both paths and later Path > Union), and later remove the central hole of the 'a' and the 'e' (select the character path, later the hole one and finally apply Path > Difference). This way I have a single path for each characted (except the exclamation, that I just only group them because I wanted to do some independent effects).

Finally having created the text characters as paths, it was time to apply the color and the effects. The downside is that the tutorial of the beginning was not so specified as wanted (and in fact a lot of the comments were requesting a video tutorial), so looking on YouTube I found this two step-by-step ones about how to get the same effect :-)

I couldn't be able to apply the Path > Dinamic Offset but could be able to solve it with Path > Increase instead. Basically, it's just to select all the objects and apply the fill color that you want and remove the path color, and later duplicate the objects (Second click > Duplicate, they will appear the new ones over the originals so don't click anywhere or you'll lost the focus), move the duplicated ones to the bottom (Object > Move to the bottom), change the fill color and increase them. Et voilá! You have just created a text offset :-D Now repeat it with a different color, without the bar of the exclamation and a little bigger and you have the final result :-)

Just as a side note, say that being able to see and edit the XML tree directly on Inkscape it's VERY useful, not only to see the hierarchy of the objects but also to be able to clean them up if you have hidden duplicates or to change the nodes IDs to something with more sense that just a name (I just put the character names for each one to identify them easily).

As a finally drawback of Inkscape, the fact that it store the working area status data inside the SVG, so each time you open a SVG file it gets modified, but being an illness that also happen on Flash and other applications that don't have an independent workplace concept, I think it should be so important...