Can I change an SVG? How!?

YOU definitely can manipulate an SVG shape. It may look complicated, but it doesn’t take long to get the hang of it. If you want an introduction to the SVG file format and why it is so fantastic, check out the first part of this series: SVG file format for Crafters.

When you first try to edit an SVG, it may seem like a very strange object. Unlike your typical image editor on the computer, the svg files are not all about pixels but about points and angles. Each point and the way it is connected to the other points is recorded in the definition of the file. Each of these points is called a node and each node has one or more handles.

What is a NODE?

So, what is a node? I am so glad you asked. I was just dying to explain it!

Wink, wink…

A node is a point on the plane that contains your SVG shape. Many nodes make up each shape. The way these nodes connect to each other defines the path that creates your SVG shape. Each node can have two “handles” on it extending to their own points in the plane. These handles define the slope of the curve of the path for the mathematical equation that generates the lines of the shapes.

This way, instead of storing the pixels of a line, the data is stored in a discrete number of points which your computer can use to compute the lines and structure of the shape.  We could go into more math here if you would like (I do have a mathematics degree after all) but I have a feeling the majority of my readers would prefer some practical information for editing the SVG files they have. But, if I am wrong just let me know, I would be happy to let my inner nerd shine out.

This manner of storing information is what makes the SVG file format stand out. It doesn’t matter how big you make it. It will always look sharp.

If you do like the math behind it, I found this little article here which delves into the math a bit. https://people.gnome.org/~federico/news-2016-11.html

Also, I borrowed his handy diagrams:

First, we see the SVG path without any markup. Second, if you go in to edit the SVG path, you will see the nodes. Lastly, if you click to edit the nodes, you should see little “handles” with “control points” on the end pop up. These will move the path without moving the nodes. If you like, you can think of the nodes as anchor points for the shape. Here is another illustration for you.

Well, I suppose that may be enough on the terminology of the SVG format.

You are probably asking me how can I actually DO anything to edit these SVG paths?

Shaping and Editing SVG shapes?

Would you like to edit a design? Do you have a path or a file that you got that just needs a little tweak? Would you like to make and edit your own shapes? You can do it!

Here are 7 operations you may need to use to accomplish your designing goals. Usually, I use Adobe Illustrator and then import my files into Silhouette Studio Designer Edition. I resisted the Designer Edition of Silhouette studio for a long time, but I finally did upgrade. Checkout why in this article:

1. Move an Individual Node (this looks the same in almost any program)

   

2. Change the curve of the path between Nodes (this also looks the same in almost any program)

   

3. Make a Node either a point or a curve

   

   

4. Add a new Node

   

   

5. Delete a Node

   

   

6. Break a path at a Node

   

   

7. Join a path at two Nodes

   

   

Apply it!

Now you know the basics. Congratulations. You can now edit your own files with confidence. Let’s look at an example.

In this example, my 5 year old had choosen a ballerina she wanted for the shirts we were making with heat transfer vinyl. Well, in my humble opinion, the body shape of the ballerina wasn’t quite appropriate for my 5 year old daughter. A couple of node deletions and moves, and all was fixed. Everyone was happy and no unrealistic body images had been memorialized.

What SVG files have you tried to change? Is there a file you are thinking of right now? Go do it! I know you can. Show me the results!

What is an SVG?

The SVG file format stands for “Scalable Vector Graphic”. Let’s break that down.

First, “scalable” means that making the image larger or smaller does not change the image. Imagine you have a photo and would like to make it much larger. Chances are that your image will come out grainy and lose much of the detail you can see in the original. This is not the case for the SVG file. No matter how big or small you make it, an svg file will maintain its original detail. This is fantastic because we can take the same file and make it exactly the size we want for our crafting project and it won’t change how the image looks.

 

Second, the word “vector” indicates how this scalability is achieved. Allow me a moment of indulgence as I was a mathematics major. A vector is simply a term to indicate a line of a certain length and direction. A vector is usually situated within the Cartesian plane (you know, the grid with x and y). To achieve scalability, the SVG file is saved in terms of a bunch of vectors at certain points going certain directions at certain lengths. Therefore, if you want to make your SVG image bigger, the computer just has to multiply all of these vectors by the correct scale which is a simple task for the computer.

Lastly, the ‘G’ in SVG stands for “Graphic”. That is, the image or object in the SVG file. I don’t feel like this warrants much more elaboration.

 

Why should I care about the SVG file format?

Well, why do we care? You can probably be a wonderful crafter without ever delving deeply into this subject. However, if you ever have an image that would be better with a tweak or an extra spike, then knowing a little bit about the SVG file could come in very handy. The SVG file is a natural choice for the hobby and professional level cutting machines precisely because of its natural scalability.

 

What cutting machines use the SVG file format?

As far as I know, all of the current generation of common hobby cutting machines can process the SVG file format. The only hiccup you may run into is that some companies will make you upgrade to their paid software in order to open the SVG file format rather than their own proprietary file format. For example, I upgraded to the Designer Edition of Silhouette Studio precisely for this reason. Check out my reasons in this post.

Other Programs for editing SVG files

In addition to Cricut design Space and the DE and up of Silhouette Studio, there are a few other programs that can open and edit the SVG file. My favorite of these programs is definitely Adobe Illustrator. Once I started Adobe’s subscription based Creative Cloud program, I loved it and don’t wish to go back. If you have the budget for it I would highly recommend looking into it. Not only do you get the ability to edit your SVG files in Adobe Illustrator, you also get access to Photoshop, Lightroom, and a slew of other top of the line programs. Seriously, it is super awesome and even comes with companion apps for your phone. The graphic above was made using one of Adobe’s apps. It is addicting and productive at the same time!

If you do decide it is right for you, make my day and purchase it through my affiliate link. 😉 I earn a small (pretty small sadly) commission for the referral at no cost to you.

If your budget is not up for the Adobe software package, have no fear. I used Inkscape for years and it is definitely a great option as well. Plus, it is freely available!

I found it useful to make, edit, and save SVG files though either AI or Inkscape rather than through the cutting machine’s software itself. First, the software that accompanies your machine often can’t save in the SVG file format even if it can open it. Second, I like having the ability to catalog and backup my files separately from the machine software itself in case I change machines or lose access to it for any other reason.

 

Are there other formats I can use?

There are other formats that are scalable. One that I have used is the DXF file format which stands for “Drawing Exchange Format”. It was developed for use with the AutoCAD program. I have used it in the past before I purchased the Designer Edition of Silhouette Studio as it is a format that can be read by the basic (free) edition of Silhouette Studio. However, it is not as widely used and it isn’t as reliable in my experience. If you want to read more about my experience with DXF, read my post on why I purchased the Designer Edition of the software.

Another format that is used is the EPS file format. This stands for “Encapsulated PostScript” and is also scalable and vector based. It is the standard format for vector images created by Adobe Illustrator. You probably will have no reason to use the EPS format.

What is next?

Learning more about the SVG file is important if you want to have more control over your designs.

 

Please be on the look out for the second article in this series. I plan to cover the details of actually editing an SVG file in various programs. Also, I will go over what a node is, what the handles are and how to add and delete nodes. These are very useful skills!