In this tutorial I would like to show a way, how you can create your own social icons in SVG (Scalable Vector Graphics) format. Maybe you are asking yourself now: Why is this guy creating his own icons, while there are thousands of them on the internet? There are two main reasons for this:
- Most of those icons are not in SVG-format, which means, that you can not zoom in to the icon endlessly (will be explained below).
- If they are in SVG-format-icons, most of the time their license limits their usability.
This is part one of two tutorials. First of all I would like to introduce to you the SVG format in a short outline followed by a lesson on the basics of creating an SVG-image in Inkscape.
While ordinary image formats like jpg, png etc. use pixels with three color channels (jpg) or three color plus one alpha channel (png), SVG takes a complete different approach. SVG is based on XML, which means that the image is being coded in text and can be edited with a simple text editor (Do not worry 🙂 We are not gonna do this here). The biggest benefit of SVG compared to JPG / PNG is, that no matter how far you zoom in, you always get a crispy sharp image, because it is being recalculated on every zoom level based on its code while the image retains its size of a few kb. In jpg/png the max. resolution is being determined by its pixel count. This means at a certain zoom level you see only blocks (the pixels). In the image below you can see the comparison of PNG (left) vs SVG (right) of a 400px x 400px image at a zoom level of 2000%!
If we open up an SVG file with a text editor we see something like this:
The window on the left contains the code for the red circle on the right. Now we could go ahead and dive into the code to manipulate the image, but this would not be very intuitive. Instead we are going to edit/create an image in a program called Inkscape. Inkscape is available for Linux, Mac and Windows. It is licensed under GPL and completely free of charge. Go here to get it.
To continue with this tutorial I assume you have Inkscape Installed and running. Since Inkscape is very versatile, I want to give you an overview on how to create a simple SVG-image. Giving an in-depth introduction would go beyond the scope of this tutorial.
When you start Inkscape you will see something similar like this:
Do not worry if your window looks slightly different. We will use keyboard shortcuts and the symbols on the left side of the toolbar. For now just ignore the rectangle in the background.
To get familiar with the basic elements of Inkscape let’s start with some basic shapes. Hit the pink circle symbol on the left side and hold LMB (left mouse button 😉 ).
Now drag the dotted circle to the bottom right corner to change the shape of the circle. While we want a perfect circle and not an ellipse, hold CTRL while dragging to preserve the aspect ratio.
If we double click on the circle three points (two squares and one circle) become visible on the edge. These control points can be moved around to adjust the shape of the circle.
Move them around to create some crazy shapes. Undo your changes with CTRL+Z until we have our circle again.
Now this one way to change the shape of an circle object, but it is not sufficient to create complex shapes like logos. We need more control here. Luckily we can convert objects to a path, that gives us the degree of freedom that we want. With the circle selected hit SHIFT+CTRL+C.
Instead of three control points now we have four and they all have the same shape. These control points are also being called nodes. Each node has a handle with a control point on its end. The handles are visible when the node is being selected. Select the top node by clicking on it. The handles on the selected node and on the neighbouring nodes are visible now.
Tip: If you want to see the shape without nodes and handles, just hover over the shape with the mouse arrow and hit SPACE. If you want to go back to node view double-click it with the LMB.
Now try to move the handles around. Immediately the outline of the circle changes its flow. Play around with it until you get something you like. For practice we can aim for Star Trek like symbol.
Certainly you have recognized that, no matter how you move the handles around, the curve tries to preserve a round shape. To create sharp edges, select the top node (if you have followed my shape, any other will do as well) and hit the corner symbol in the toolbar on top. The node changes into a diamond shape. Now the handles can be moved around independently. Move them down to shape up the top.
Now repeat the process for the other three points. Make them corner nodes and adjust their shape by moving around the node handles.
Tip: If you want to see the shape without nodes and handles, just hover over the shape with the mouse arrow and hit SPACE. If you want to go back to node view double-click it with the LMB. To watch your shape in detail zoom in and out by holding CTRL and scrolling MMB (guess what.. middle mouse button 😉 )
Now our logo starts to take shape. Unfortunately we barely can see our handles because of the black color. To change this, hit SHIFT+CTRL+F. This will bring up a new menu where we can change the color. In the FILL tab select a light color from the color wheel ( I have used ffe430ff for instance).
We can also change the color of the outline of our logo. Switch to Stroke paint tab and select the full colored square. Select a dark color in the color wheel.
The color is there, but we must make it thicker to see it. Switch to the stroke style tab and change the width to about 20.
To create the interior of the logo, create a square and place it on top. Again hold LMB and drag until you get a square. Convert the Square to a path with nodes by hitting SHIFT+CTRL+C. This time there will be no handles, because the square consists of four points and straight lines. Handles are disabled by default, but they can be activated anytime by clicking the node icons. Change the width of the outline to 4.
Move the new nodes into shape so they fit properly inside the logo.
To finish up the inside of the logo we need at least three more nodes on each side. To accomplish this select the top and the bottom nodes and hit the insert node icon two times. On each click the segment is being subdivided adding more nodes to the segment.
Now move the new nodes into shape. The hardest part here is to keep a symmetrical shape.
This is quite nice, but I would like to have a hole in the logo of the inner shape, that we have formed at first. To perform this, hold SHIFT and click the outer shape, while in node view of the inner shape (The nodes do not have to selected and it does not matter if they are).
Then hit CTRL+- (CTRL key and minus-key. + means here together 😉 ). This will perform a boolean operation on both shapes, in which the inner shape will be subtracted from the outer one. The inner shape is going to leave us behind with a finger print of it where it was. We have a (single) logo.
Finalizing includes changing the width to something like 4 and adjusting the bottom right node on the outside to get a nice peaky edge.
Hit SHIFT+CTRL+D to view the document settings. The current size is at 744 x 1052px. This is pretty large. Especially when you are trying to preview the image, it will pop up in full scale.
To prevent this, we will scale down the logo size and then adjust the document size to it. Close the document properties. Go out of node view mode by hitting SPACE. Hold click the upper right arrow with the LMB and move it down to the left corner while holding CTRL until the logo has approximately a quarter of its original size.
Hit SHIFT+CTRL+D again to bring back the document properties. Go to the section that is called “Resize page to content”. Click the small triangle. And again click “Resize page to drawing or selection”.
The document is being resized and the logo fits perfectly.
After this operation we are done and can finally save our SVG file. Hit SHIFT+CTRL-S and navigate to your project directory and save the file as Inkscape SVG.
Download the final image here.
Thank you for working through this tutorial. It is longer than expected and it basically only scratches on the surface. Critiques and comments are welcome.
See you in part two where we will create a logo with a reference image. 😉