How to edit an SVG file: code, Inkscape or Cricut
Three ways to edit an SVG file: change its code in a text editor, reshape it in a vector editor such as Inkscape, or adjust it in a cutting program.
Published
An SVG file can be edited in three ways. It is plain text, so small changes such as a colour or a size can be typed straight into the code with any text editor. To move, reshape, add or remove parts by eye, open it in a vector editor: Inkscape is free and uses SVG as its own format. And a cutting program such as Cricut Design Space can resize, recolour and hide parts of an uploaded SVG, though it cannot move the points of a shape.
Which way to use
| The change | Best done in |
|---|---|
| Change a colour | The code, or any of the three |
| Change the size | Any of the three |
| Delete or hide a part | A vector editor or the cutting program |
| Move a part | A vector editor or the cutting program |
| Reshape a curve or move single points | A vector editor |
| Join overlapping shapes into one | A vector editor or the cutting program |
| Change the wording | The code or a vector editor, and only if the words are still text |
| Tidy a file for other software | A vector editor |
A painting program is not on the list. Photoshop and similar programs work in pixels: they turn an SVG into a picture when they open it, and what is saved afterwards is no longer shapes.
1. Edit the code
An SVG is a list of shapes written as text. This is a whole file:
<svg xmlns="http://www.w3.org/2000/svg" width="100mm" height="100mm" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="gold"/>
</svg>Open the file with a plain text editor, such as Notepad on Windows, or a code editor. On many computers a double-click opens an SVG in a web browser instead, so use the editor’s own Open command or the Open With menu.
Things that are easy to change in the code:
- A colour. Find
fill="..."orstroke="..."on the shape and change the value: a name such asgold, or a hex code such as#ffd700. - The size. Change
widthandheighton the opening<svg>tag. Keep them in the same proportion as the last two numbers of theviewBox, and leave the viewBox alone. - Removing a part. Delete the whole element, from its
<to its/>or closing tag. - Wording, if the file has
<text>elements: change the words between the tags.
Files saved by drawing programs are longer than this example but built the same way. Two things to look for when a colour will not change. The colour may be set in a style attribute, as in style="fill:#000000", which overrides a plain fill attribute. Or it may be set once for many shapes in a <style> block near the top of the file, under a class name: change it there.
The SVG viewer makes this safer. Paste the code or open the file, edit in the code box, and the picture redraws as you type. If an edit breaks the file, it says so at once. Save as .svg keeps the result.
What is an SVG file explains the parts of the code.
2. Edit in a vector editor
These steps use Inkscape. Illustrator, Affinity Designer, CorelDRAW and Figma also open SVG and work on the same ideas under other names.
Select. Open the file and click a part with the Selector tool, the arrow. If the whole design is selected as one, it is grouped. Double-click to step inside the group, or choose Object, Ungroup to break it up.
Move and resize. Drag a selected part to move it. Drag the arrows at its corners to resize, holding Ctrl to keep the proportions.
Recolour. With a part selected, click a colour in the palette along the bottom of the window to set the fill. Shift and click sets the stroke. For exact values, open Object, Fill and Stroke.
Delete. Select the part and press Delete.
Reshape. Choose the Node tool and click a shape. Its points appear: drag a point to move it, or drag the handles beside a point to change the curve. Rectangles, ellipses, stars and text are special objects with their own handles. To edit them point by point, convert them first with Path, Object to Path. No command turns a path back into the original object, so text converted this way can no longer be retyped.
Combine. Select two overlapping shapes and choose Path, Union to make them one, or Path, Difference to cut the upper one out of the lower.
Save. Use File, Save As. Of the SVG types Inkscape offers, two matter here. “Inkscape SVG” keeps extra information for further editing in Inkscape. “Plain SVG” leaves it out and is the better choice for a file that other programs will open. Save under a new name so the original stays untouched.
3. Edit in a cutting program
Cutting programs are for arranging and preparing, not drawing. These are the changes Cricut Design Space allows once a file is uploaded and on the canvas:
- Ungroup separates the layers of a design so each can be selected alone.
- Size boxes in the bar above the canvas set the width and height.
- Colour is set from the swatch beside the Operation menu.
- Hide or delete a layer in the Layers panel.
- Contour hides single cut lines inside a layer, such as a small hole that is not wanted. A design with several layers has to be ungrouped first.
- Unite joins overlapping shapes into one, and Subtract removes one shape from another. Both are found under Combine.
Design Space has no tool for moving the single points of a shape, so real reshaping has to be done in a vector editor before uploading. The words in an uploaded SVG are shapes, not text, and cannot be retyped. The changes are kept in the Design Space project. They are not written back to the SVG file.
Uploading an SVG to Cricut Design Space covers getting the file in. For Silhouette machines, see opening an SVG in Silhouette Studio.
Editing the words in an SVG
Whether wording can be changed depends on how the file was made. If it holds real text, a vector editor’s Text tool can retype it, provided the font is installed on the computer. Cut files nearly always have their lettering converted to shapes, so that they look the same everywhere. Those letters are drawings: they can be moved, resized and deleted, but new words have to be typed afresh in a matching font and converted again.
The SVG viewer warns when a file contains text, which is a quick way to find out which kind it is.
Common problems
| What you see | Cause | Fix |
|---|---|---|
| Clicking selects the whole design | It is grouped | Ungroup, or double-click into the group |
| The words cannot be retyped | The text was converted to shapes | Retype in a matching font |
| The lettering changes when the file is opened | Real text, in a font the computer lacks | Install the font, or ask for a version with text converted |
| The Node tool shows no points | The object is a shape or text, not a path | Path, Object to Path |
| A colour typed into the code has no effect | A style attribute or a <style> block sets it too | Change the value there |
| The file will not open after a code edit | A tag or quote mark was deleted | Undo, or check it in the viewer, which reports broken code |
| Another program misreads the saved file | It may have been saved as Inkscape SVG | Save a copy as Plain SVG |
| It opens at a different size elsewhere | Programs disagree about unitless sizes | See SVG size and units |
Questions
Can a PNG or JPG be edited like this? Not until it is traced into shapes. How to convert a picture to SVG explains tracing.
Is it safe to edit the original? Work on a copy. A vector editor may rewrite the whole file when it saves, and a mistake in hand-edited code can stop the file opening.