August 10, 2022
Learning how to make SVG files is a journey - I learn new skills everyday. The programs used to create SVGs like Inkscape or Adobe Illustrator have so many functions it's a bit overwhelming. Which is why I like to start small when teaching. That's how I learned as well. I started small and worked my way up. I still am looking up new techniques so that I can add to my skills and grow my free SVG library.
I have been using Inkscape for over two years. It is a free open source program that you can download for your desktop or laptop - it is not available for iPads. You can learn more about Inkscape here - this blog post will walk you through some terms and buttons to know. I also always recommend searching YouTube for some basics!
I love Inkscape because it's a free program and when I was starting out - free was what I wanted to hear. Now, I am also the first to admit Inkscape can be buggy. There are times I am working on a project and it crashes. Luckily, it autosaves a draft of the project most of the time but sometimes I am left with nothing. So, friendly reminder - always save your projects as you work on them!
Now that we know what program to download, let's make a simple SVG file. I have another tutorial on basic shapes here if you want to try a different route.
First you are going to grab the bezier tool! This is basically a pen or pencil. You can change the way it draws meaning straight lines vs curves. For a long time I was working with the curved tool but now I am working in straight lines for almost every project. The best way to put it is I mark points on a project and then I stretch my lines to fit the image. So for a heart we need four points. Two at the top, a middle dip, and a bottom point.
Once you have your bezier tool selected from the left panel the options will change at the top. If you look at the top left corner you will see Mode: and three options. I have the first one picked which will draw straight lines from point to point. I click my mouse go to another point and click. As you can see above, my points are uneven and not aligned. We are going to fix that.
You want to be in node mode which is the second option down on the left side, below the select. This will show the points (nodes) in your project. We need to align these. You will go to the Object drop down menu and select Align and Distribute. A smaller window will pop up as a side panel on your screen (at least thats what happens with my Mac!)
While in node mode we need to do some aligning.
You'll notice that the top two nodes are uneven, so let's line them up. You will highlight over them and click the node align horizontally - the first in the line of four. If you don't have your program in node mode you won't see these options so make sure the correct mode is in place.
Once you hit this button, it will make the two nodes (points) the same height. Mine is set up to line up via the last selected but you can change this in the drop down box above the four options.
Now I want to distribute my top three notes evenly. This is going to make my heart symmetrical, So depending on how you want your heart to look you can skip this step. You will highlight the top three nodes, just like we did before, and then hit distribute evenly horizontally (the third button from the left in the Align panel).
Lastly, we need to align those middle nodes, so you will use the align vertically button after highlighting the middle two nodes just remember to look at your relative to choice.
Next, we want to round the top so we have a heart and not an arrow head. So, highlight over those top two nodes again and we are going to go to the top of our screen and hit Make Selected Nodes Auto Smooth. If you're looking at the choices at the top, it is the eleventh from the left.
Now we have a heart! You can move the middle node up and down depending on how you want it to look. I widened mine a little bit and you can change the color! Once you have the color selected, I usually remove the stroke (the lines on the outside) so that it's just one solid piece. You can save this as an SVG file and upload it to Cricut Designn Space.
You can also take this file and sell it, it's your design! This is a transferrable digital item (just like the ones on my website)!
Now that you have made a shape, you can play around with it. Like I said you can change the shape or the nodes, you can modify colors and size. This is how you learn!
I am going to grab my outline again of my heart and I am going to duplicate over and over the red solid heart to make hearts within a heart shape!
This is such a simple to do design once you have the one heart made and technically you can do this with any shape you make! And I plan on doing this.
I continued to make more and more hearts, I expanded and shrunk all the SVG files within the outline and when I was happy I deleted that outline to leave me with just the hearts.
The last step in something like this is to union it. That will take this file from having 100000 little hearts to being one pieces. Think of it like the weld feature on Cricut Design Space. You will highlight over the entire project (or whatever you want welded together), go to the Object drop down menu and click union.
You can see all the boxes around each object above and you will go to one object as seen below!
And again, this is a sellable file. You can transfer it to friends to use with their Cricut or Silhouette machines and we made this with only 4 points and a couple buttons! If you want the free SVG file above you can grab it here!
I hope this helps on your journey on how to make SVG files on our own with Inkscape!
Don't forget to sign up for my newsletter below to access free SVG files and new tutorials, giveaways and more!