Edit an SVG File: Colors, Background and Text, Step by Step
Change a color, delete the background, turn the logo white: easy SVG edits in free Inkscape, in a browser or in Notepad. No designer needed.
By Gaël Pons
Published
To edit an SVG file, open it in Inkscape, a free program: click any shape to recolor it, move it or delete it. For a quick color swap you don’t even need that, since an SVG is plain text and Notepad shows each color code in plain sight.
What can you edit in an SVG file?
You can edit almost everything in an SVG file: colors, size, the position of each element, even the artwork itself. SVG is a vector format, meaning the logo is stored as geometric shapes rather than as a grid of tiny colored squares, so every letter, circle and background is its own object that you can change without damaging the rest. For what the format holds under the hood, see what an SVG file is.
| What you want to do | Possible? | Effort |
|---|---|---|
| Recolor one shape | Yes | Easy |
| Scale the whole logo up or down | Yes, it stays sharp | Easy |
| Delete an element (background, tagline, year) | Yes | Easy |
| Turn the entire logo white or black | Yes | Easy |
| Fix a word that is still live text | Yes | Easy |
| Fix a word already turned into shapes | Only by retyping the word | Medium |
| Reshape a drawing point by point | Yes | For experienced users |
Which free program can edit an SVG?
The most complete free program for editing an SVG is Inkscape, available for Windows, Mac and Linux from its official website. It opens and saves SVG natively, with no conversion step. Paid tools work just as well: Illustrator, CorelDRAW and Affinity all open an SVG as editable shapes.
Two programs are a poor fit for this job. GIMP turns the SVG into pixels the moment you open it: it asks for a size, then the file loses what kept it sharp. Photoshop is built around pixels too, which suits a photo but not a logo that needs to stay as shapes. If your SVG simply won’t display, that’s a different problem: here’s how to open an SVG file on any device.
How do you edit an SVG in Inkscape?
Editing an SVG in Inkscape takes five moves and no drawing skills:
- Open the file with File > Open, or drop it onto the window.
- Break it apart. Logos often arrive welded into one block: select it, then Object > Ungroup (Shift+Ctrl+G). Repeat while the command is still available, since groups can sit inside other groups.
- Click the shape you want. To reach one shape without ungrouping, hold Ctrl while you click.
- Change its color in the Fill and Stroke panel (Shift+Ctrl+F). Paste your exact shade into the RGBA field, for example
E30613fffor a specific red. - Save a copy with File > Save a Copy, choosing “Plain SVG”: your original stays untouched, and the new file opens anywhere.
If your printer wants a named ink rather than a screen color code, that’s a separate step: see how to find the Pantone color of a logo.
Can you edit an SVG online without installing anything?
Yes, an SVG can be edited online in an editor that runs right in your browser. SVG-Edit, an open source project, covers the basics (select, recolor, delete) without an account. Figma does much more but requires a free account, and your file then lives on its servers: worth remembering for a logo that isn’t public yet. These editors are fine for a one-off change; for longer sessions, Inkscape is more comfortable.
How do you change an SVG color in Notepad?
Changing an SVG color in Notepad works because an SVG is a readable text file: right-click it, choose Open with > Notepad on Windows, or open it in TextEdit set to plain text on a Mac. Find the old color code, which looks like #1D1D1F, and use Find and Replace to swap in the new one everywhere at once. Save, then drag the file into your browser to check.
Three habits prevent bad surprises:
- Edit a copy, renamed before your first change.
- Search for every spelling of the color: the same red can be written in capitals, in lowercase, or as a three-character shorthand (
#F00). - Keep this trick for simple logos with two or three solid colors. With gradients or dozens of close shades, Inkscape is faster.
How do you make an SVG logo white or a single color?
To make an SVG logo white, select everything in Inkscape (Ctrl+A), then click the white swatch in the palette at the bottom of the window. Click the black swatch instead for an all-black version. The catch comes right after: parts that were white in the original (a letter sitting on a circle, say) now match their background and vanish. Delete them so the garment or wall shows through, or give them a different color. For a white logo on a dark background that stays readable on dark fabric, a few more rules apply.
How do you remove the background from an SVG logo?
The background of an SVG logo is nearly always a separate shape, a rectangle sitting behind the artwork. In Inkscape, click it (with Ctrl if the logo is grouped), press Delete, and the logo now sits on a transparent background. If your click grabs the whole logo instead of the rectangle alone, ungroup first and try again.
How do you change the text in an SVG logo?
Text in an SVG logo can be edited directly as long as it’s still live text: double-click it with Inkscape’s Text tool and retype. In files prepared for print, though, the letters have usually been converted into shapes so the print shop doesn’t need the font. In that case, delete the word, retype it in the same font installed on your computer, then turn it back into shapes with Path > Object to Path (Shift+Ctrl+C).
How do you check an edited SVG before sending it?
An edited SVG is checked by opening it in a browser and zooming in hard: edges should stay crisp, colors should be right, and nothing should be missing. Put it next to the original, then send the file as is. Most print shops accept SVG; whether to prefer SVG vs EPS vs PDF depends on what’s being printed.
Can you get a one-color version without editing anything?
A one-color version of your logo comes ready-made, with no software to open, when you run the logo through Depixelise. It’s a common situation: people open an SVG only to flatten it to a single ink, for a rubber stamp, a laser engraving or a one-thread embroidery. Instead, upload your logo as SVG, PNG, JPG or WebP, up to 10 MB. You see the converted result full screen right away. Four files land in your inbox, that finished monochrome version among them. Alongside it come the color SVG, a 2000 px transparent PNG and a negative version for dark backgrounds. You won’t find a watermark on any of them, you won’t pay a cent since the converter is 100% free, and you won’t need to sign up. One honest caveat: where two colors of the logo touch, a detail can merge once everything becomes one shade, so zoom in on the monochrome file before you send it.
Every other vector format, and what each one is for, is covered in our vector file guide.
FAQ
Why does clicking select the whole logo instead of one shape?
Clicking selects the whole logo because its shapes are bundled into a group. In Inkscape, hold Ctrl while clicking to reach a single shape inside the group, or ungroup everything with Shift+Ctrl+G.
Why doesn’t a color changed in Notepad show up?
A color changed in Notepad usually doesn’t show up because the same color is also written somewhere else in the file in a different form: inside a style="fill:..." attribute or in a <style> block near the top of the code. Search for the lowercase and shorthand spellings too, replace every match, then reload the browser tab.
Does editing an SVG make it less sharp?
No, editing an SVG costs it no sharpness: moving, recoloring or scaling a shape only changes its description. Sharpness is lost only when you export to PNG or JPG, which freezes the artwork at one size.
Can GIMP or Photoshop be used to edit an SVG?
GIMP and Photoshop can open an SVG, but not edit it as shapes: the artwork becomes a pixel image inside them. For a logo that must stay sharp at every size, use Inkscape or Illustrator.
Can you edit an SVG on a tablet or phone?
You can edit an SVG on a tablet or phone with a vector drawing app, but it’s awkward on a small screen, where picking out one precise shape takes patience. For a color change or a background removal, a computer with Inkscape is much quicker.