Easily create SVG files online.
Icon libraries are a fast way to get logos for your websites however, they don’t always carry all the logos you need. It can be difficult sometimes finding a SVG version of a logo online but one solution that offers a lot of creative flexibility is making your own SVG files!
SVG or Scalable Vector Graphics are the ideal format for icons, logos, and illustrations in websites because they can be resized to any width or height without affecting its resolution.
For this tutorial, we will recreate the A11Y Project PNG logo into an SVG file. If you want to follow along, right-click on the image below and save it.
We’ll be using the free online tool Vectr. It doesn’t require users to sign-up but you have to be logged-in to be able to save your file online. It’s simple to use and has some similarity with other graphics software such as Adobe Illustrator.
After clicking “Use Online” on the homepage, you can choose to go through the initial introduction of the tools and menus or skip it and get right into creating the logo. We will import the PNG file we downloaded earlier into the page to use as reference.
Looking at the structure of the logo, we can easily recreate it with three main shapes — circle, rectangle, and rounded rectangle.
Firstly, let’s lock the reference image by clicking on the lock icon beside its name so we don’t drag it around while creating the shapes.
Now we can go ahead and click on the tools at the left side of the page and start creating the shapes. To create a perfect circle, we need to hold the shift key and left-click button while dragging the mouse across the page.
We can resize the circle accordingly to match our reference by dragging one of the small white squares along the edges. Don’t forget to hold the shift key while dragging to maintain its proportion.
The same process applies when creating the rest of the shapes except we don’t need to hold the shift key for the rectangles because they have unequal sides.
To rotate the rounded rectangles to match the angle of the arms in our reference, simply place the cursor outside, near one of the corners until it changes into the rotate icon. Click and drag to turn it at an angle.
Adjust the radius of the corners by double-clicking inside the rounded rectangle then dragging in the white dot near the corner. Hold the shift key while dragging to modify all corners at the same time.
After creating the first rounded rectangle, we can duplicate and flip it horizontally to make the other arm. Right-click inside the shape you want to duplicate and choose “Duplicate” from the menu. Click “Flip Horizontal” from the four icons above it and position and/or rotate the duplicated shape as needed to match the reference.
We can do the same process for the legs and adjust the length and angle to match the reference. Once we finish creating the legs we now have all the shapes that make up our logo!
We can nudge in the right arm more to make the body symmetrical. Notice that the shapes making up the body are overlapping. This will allow us to unite the shapes later into one body. But before doing that, let’s remove the borders and add a background colour to all of them. We will need to adjust the edges to make the shapes bigger to match the reference.
Once we’re happy with the adjustments, we’ll lock the bigger outer circle then select all the shapes for the human. Click “Unite/Add” from the icons above our selection. This will reduce our shapes to two — the outer circle and the human.
Remove the border from the circle and give it a background colour. We can give it any colour now and later change it inside the text editor, or assign the proper colours now before exporting the file. It doesn’t really matter unless it’s a complex illustration with multiple shapes.
To export the file, select the two shapes on the page and click “Export” from the upper right menu. In the export menu, change “page” to “selection” so we save the logo without the white space around it. Confirm that the file type is “svg” and click download. We now have our completed SVG file!
To change the colours of the logo inside the text editor (I’m using Visual Studio Code), open the SVG file from the explorer and find the inline “fill” property. We will see two fill properties in the file for the two shapes we created earlier. Assign your chosen colour values and save the file. If you have the logo linked inside a HTML file, the colours should now update after refreshing the browser!
For more complex shapes, you can try and explore using the pen tool!
