
I will give a step-by-step explanation with photos and then at the very bottom there are TWO videos for Inkscape and I want you to start with the first one because I will ease you into the process before jumping into more advanced techniques like cleaning up your blended images.


Why? I want to offer you variety and also show you the contrast of working in Inkscape versus a one-click converter which is convenient but doesn’t offer a lot of control over the final outcome. First I will show you an online converter, and then I will show you two images inside Inkscape which is my favorite software for creating layered SVG files. In this post, I will show you two ways to convert images or clipart to SVG files. There are a few free programs out there that are one-click wonders for converting images to SVG files but they don’t offer you the ability to clean the image up in the way you may want. Usually, around the time a Cricut user starts to feel confident using their machine they may ask, how can I convert an image to SVG? It’s easier than you think and soon you’ll be making SVG files on your own. So, how do I get my separate SVGs from this one larger image? An automated solution would be preferable to save time actually doing it.Learning to create your own SVG files is an amazing skill to have. Everything I've looked at online is for separating each layer into a separate file, which is not what I'm looking for here. However, I have no idea how I could get the separate SVG images, which is important because SVG is what Unity prefers to display. The PNG part I could probably do by hand using the Export PNG image menu option, picking a different area of the image to export each time. I would need each one to contain its respective 19px by 19px area, and be in both SVG and PNG format. What I can't figure out / find information for online is how to split this single SVG image up into multiple smaller files, one for each individual button image. Basically, I now have each of the intended button images laid out on the same grid side-by-side.

Multiple layers are used for the button backgrounds, icons, state effects, etc. The file I have uses a 7x4 grid, with each grid space 19px square and containing a single button image.

I am working on making window buttons for a Unity 7 theme using Inkscape.
