How to make an SVG file: five ways, and for Cricut
How to make an SVG file: draw it in a vector editor, trace a picture, turn lettering into shapes or write the code. With the checks a Cricut cut file needs.
Published
To make an SVG file, draw the design in a vector editor such as Inkscape (free) or Adobe Illustrator and save it in SVG format. If the design already exists as a picture, trace it into shapes with a converter. An SVG is a list of shapes written as text, so the only real rule is that the file must contain shapes, not pixels: saving a photo “as SVG” without tracing it does not make a usable SVG.
Five ways, and when to use each
| Starting from | Method | Tool |
|---|---|---|
| An idea | Draw it | Inkscape, Illustrator, Affinity Designer, CorelDRAW, Figma |
| A logo, clip art or sketch as PNG or JPG | Trace it | Image to SVG, or the tracer in a vector editor |
| Words | Type, then convert the letters to shapes | Any vector editor |
| A photo | Turn it into line art | The Plotcaster editor |
| Simple geometry, or data | Write the code | A text editor |
1. Draw it in a vector editor
These steps use Inkscape, which is free for Windows, Mac and Linux and uses SVG as its own file format. Other editors differ in menu names, not in the idea.
- Start a new document and set its size in real units, millimetres or inches, if the design will be cut or printed.
- Draw with the shape tools (rectangle, ellipse, star) and the pen tool, which places points and bends the lines between them.
- Combine shapes with the commands in the Path menu: Union joins shapes into one, Difference cuts one out of another.
- Give each part a fill colour.
- Save with File, Save As, and choose the SVG type. Inkscape offers “Inkscape SVG”, which keeps extra editing information, and “Plain SVG”, which leaves it out. Plain SVG is the better choice for a file other programs will open.
Illustrator saves SVG from File, Save As or File, Export, Export As. Figma exports any selected frame or layer as SVG.
2. Trace a picture
A PNG or JPG is a grid of pixels. Tracing finds the edges in it and writes them out as shapes. It works well on artwork with flat colours and clear edges, and poorly on photographs.
- In the browser: the image to SVG converter traces a PNG or JPG in black and white or in flat colours, with nothing to install.
- In Inkscape: the Trace Bitmap command, explained step by step in Inkscape Trace Bitmap.
How to convert a picture to SVG goes through the choices and how to get a clean result.
3. Lettering
Type the words with the text tool and choose a font. Then convert the text to shapes: in Inkscape, Path, Object to Path; in Illustrator, Type, Create Outlines. Until that is done the file only names the font, and it will look different, or lose the words altogether, on a computer or in a program that does not have it.
With a script font the letters overlap where they join. Unite them into a single shape (Path, Union in Inkscape) so that a cutting machine cuts one outline around the word and not every letter separately.
4. Write the code
For simple shapes the file can be typed. Put this in a text editor and save it with a name ending in .svg:
<svg xmlns="http://www.w3.org/2000/svg" width="100mm" height="100mm" viewBox="0 0 100 100">
<polygon points="50,5 61,38 95,38 67,58 78,91 50,71 22,91 33,58 5,38 39,38" fill="gold"/>
</svg>That is a complete file: a five-pointed star on a page 100 mm square. Programs can write SVG the same way, which is how charts and patterned or generated designs are usually made. What is an SVG file explains the parts, and the SVG viewer draws code as you type it.
5. From a photo
A photo has no shapes to trace, and a traced photo is thousands of ragged patches. What works is to redraw the photo in a style made of lines or dots, such as hatching, stippling or a single continuous line. The Plotcaster editor does this and saves the result as an SVG for pen plotters, lasers and cutters that can hold a pen.
Making an SVG that a Cricut can cut
A file can be a valid SVG and still fail in a cutting program. Cricut’s help pages name the things Design Space does not accept in an uploaded SVG, and the list is a good guide for any cutter:
| The file must not contain | Do this before saving |
|---|---|
| Editable text | Convert text to shapes |
| Gradients, patterns or textures as fills | Use one flat colour for each part |
| Clipping paths | Cut the shapes to their final outline with the Path commands |
| Linked or embedded pictures | Remove them, or trace them into shapes |
| More than 5,000 paths | Simplify the design or combine shapes |
Beyond what the program accepts, a design has to be physically cuttable:
- One colour for each material. Design Space sorts the layers of an uploaded SVG onto mats by colour, so give everything that will be cut from the same sheet the same fill.
- Join what should be one piece. Overlapping shapes of one colour are cut along every outline unless they are united first.
- Close the shapes. A blade cuts along a line. Only a closed outline gives a piece that lifts out.
- Nothing too fine. Slivers and tiny holes tear in vinyl and paper. Check the design at the size it will be cut.
- Set the real size. A document measured in millimetres or inches usually imports at the size you meant.
The same file suits Silhouette Studio (Designer Edition or above, since the free edition does not open SVG), lasers and other cutters.
Check the file
Before sharing or cutting, open the SVG in the viewer. It shows the size, counts the paths, text elements and pictures inside, and warns about text and linked images. A cut file should show paths and groups, with no text and no pictures. A file saved by an editor also carries the editor’s own data, which the SVG optimizer removes.
Common problems
| What you see | Cause | Fix |
|---|---|---|
| The file is blurry when enlarged | It holds an embedded picture, not shapes | Trace the picture and delete the original from the file |
| Words are missing or in the wrong font elsewhere | Text was not converted | Convert text to shapes and save again |
| The cutter cuts through the middle of letters | Overlapping shapes were not united | Unite them, then save |
| It uploads at the wrong size | The file has no real units | Set the document size in mm or inches, or resize after uploading |
| The cutting program rejects it | Gradients, clipping paths, text or pictures in the file | See the table above |
| The file is enormous | A traced photo, or thousands of tiny shapes | Trace simpler artwork, or raise the speck and smoothing settings |
Questions
Can I make an SVG in Photoshop, Procreate or another painting program? Those programs work mainly in pixels. A painting saved into an SVG file is still a picture inside a wrapper, not shapes. Export a PNG and trace it.
Can I rename a PNG to .svg? No. The contents stay a PNG and nothing will open it as an SVG.
What is the difference between an SVG and an “SVG cut file”? A cut file is an ordinary SVG prepared as above: closed shapes, flat colours, no text or pictures.