Need help with SVG creation in Illustrator please

I have been able to create some SVGs but they are showing some issues, seems there is more to them than I know. I sincerely need help with SVGs. If someone can guide me or show me the exact steps needed to create SVGs in Illustrator- just simple text based svgs with some images attached. Please

2 Likes

Hi @Shadaan_A I have a guide here on the forum under the Designers section that might help :slight_smile:

In regards to how to make them, if you’re using Illustrator I would design and save from there. If you’re lettering/drawing by hand you will need to image trace. If you are using a font then you will need to expand the fonts.

If you group letters together they will stay as separate layers. This can be beneficial at times so each letter could be a different color. However, if you are using a script font they need to be a compound path.

I recommend downloading Silhouette Studio and Cricut Design Space to upload your designs. They are both free and seeing them first hand in those programs will help you a lot.

2 Likes

Thanks so much for your response. Can you please let me know where the guide is in the forum, I am unable to find it.

Actually I am new to illustrator. So sorry if I sound confused when I ask questions related to svgs. But I just hope you can guide me and help me please.

I am creating some simple text based SVGs with just some images. Here is an example:


So if I create this in illustrator, what are the basic steps to follow to convert it to SVG. Right now I am doing this-

Select All- Create Outlines- Path Finder (Unite)- Compound Path- Make.

However, I am seeing that in “Merry Quarantine” some of the images like the mask, the leaves are not getting selected when I do that. So, the customer might not be able to change the color of these.

Are these the steps I need to follow or is there anything else I need to do. Please let me know.

I really need help in this since it all seems messed up for me.

Thanks so much

Hi there! :slight_smile:

When making SVGs there are a few things to consider. Firstly, you don’t want too many intricate details. Imagine how your design would be when cut out of a fairly flimsy material like vinyl. When you make very thin cuts it can easily break and if you cut at a small size, the cutter won’t be able to do it. I am always very careful with my SVGs, I think the dots on the tree and the snowflake on the bauble may be a little borderline for being too thin. Others may disagree but I just like to be extra careful :smiley:

In terms of making the file, any shapes you make in Illustrator will be ready to cut. If you have combined elements to make the shape and there are sections that overlap you will want to select all pieces that make up the element and unite them :slight_smile:

For words, you will want to select and go to object in the top panel and then expand, press ok on the box that pops up. If you are using a script font, you will then want to unite it.

I personally prefer to group letters instead of making a compound path. Compound paths can be useful for elements that will definitely want to stay together and will be in the same colour. Once a compound path has been made a customer will not be able to ungroup it or have different parts of the path in different colours in their cutting program. They would need to get in open in a vector program and work it back. Some may be able to do this but most won’t! So I would consider if a customer is likely to want to do this before making a compound path :slight_smile: Grouping instead of making a compound path leaves the flexibility.

Once everything is done, I usually group the whole design and SAVE as an SVG. If you export as an SVG it can give you problems in cutting programs. Sometimes thin script fonts can save in a strange way. If the font looks off, save it again and when the pop up box comes up look for where it says “decimal places” change it from 1 to 2. This makes the file bigger but will fix this problem! :slight_smile:

I hope that helps! Some of these things are my preference of how I like to do things and others will do them differently but this works for me! :slight_smile:

Well said!! :slight_smile: I was struggling trying to put it all into words haha!

The only thing to note about compound paths vs. grouping - is that if you have a longer quote all those letters will come in as different layers if they’re not a compound path. This often freezes Design Space if there’s a ton of layers. This doesn’t happen all that often though, but just wanted to mention that :slight_smile:

Oh yes, good tip! So much to consider! :smiley:

Thanks so much for all this information, I wasnt knowing anything like this. In fact I have created compound path but that meant everything was grouped and it couldnt be changed. I tried to change the color of the text different from that of the png clipart I have added and it wasnt happening. But after reading your comment I also did ‘object-expand’ option and then I was able to change the colors differently.

Can you please tell me what you mean by

what steps am I going to need if use a script font?

Also when are we supposed to make a compound path then because of all the youtube videos which I have seen almost everyone was making a compound path only.

Please guide me since I am trying to make these svgs work for last 3-4 months and everytime I make some issues just crop up.

Thanks so much again

Hi Shadaan, I’m so sorry for the delay in coming back to you. With a script font, the letters will overlap each other. If you don’t merge those into once piece using the unite tool every letter will get cut up by the tail of the previous letter :slight_smile: The unite tool is in the pathfinder box Screenshot_32

So when you type with a script font, expand it and then click unite so that all the overlapping parts disappear and you get one shape instead of all the separate letters :slight_smile:

I don’t think there are really any absolute rules when it comes to making a compound path. I personally only do it if the pieces will definitely be together & the same colour (e.g. I did it once when I had a cute animal that had little blushes on their cheeks - they will likely stay together in place and both be the same colour).

As Jordyn said, sometimes a compound path can be good as it means less layers. I just don’t do them often as it places limitations on the file :slight_smile:

I hope that helps!

Thank you so much again for all your help. I will certainly be creating svgs keeping all these points in mind, hope I can create them easily now. Will indeed let you know too whenever I make them. Thanks again so much.