How to Edit SVG Files Like a Pro

Most SVG edits are small ones. A hex color gets swapped, a label gets corrected, a width goes from 24 to 32. None of that needs a design app. Reshaping paths does, and so does cleaning up a folder full of exports, but those are the minority of jobs.

Whatever you use, the file stays XML underneath, so the image keeps its resolution after every edit.

One thing to know before you follow an older tutorial. A lot of them tell you to switch removeViewBox off in SVGO. The tool’s v3 to v4 migration notes say it is no longer a default plugin, because removing the viewBox stops an SVG from scaling.

Which method is best for editing SVG files?

The size of the change decides it. A color or text swap goes in a code editor, which takes about thirty seconds and needs nothing installed. Moving points, merging shapes or redrawing part of an icon means a vector editor. And if there are dozens of files, find and replace plus SVGO beats opening each one by hand.

Vector editors give you full visual control, layers and node editing. The catch is a learning curve, and saving can add or restructure markup you never touched. A code editor gives exact control over every attribute, though one stray quote breaks the file. Browser editors are quick and need no install, but the feature set is thinner. SVGO repeats the same cleanup across hundreds of files and needs Node.js plus a terminal.

Most jobs do not need Illustrator. Inkscape and Affinity cost nothing, while Illustrator is subscription software.

What is inside an SVG file that you can edit?

Open one in a text editor and it reads a lot like HTML. Shapes, colors, sizes and coordinates all sit in XML text, which is why SVG (Scalable Vector Graphics) can be changed without special software.

The root svg element sets the canvas. Everything else sits inside it: shapes, groups, text and reusable definitions.

Because the file follows XML syntax, a missing closing tag or an unmatched quote stops the whole image from rendering.

Styles can be written straight on the element as presentation attributes (fill="#e63946") or as an inline style attribute (style="fill:#e63946"). The other route is a style element, usually inside defs, with class or element selectors.

Illustrator can write any of these at export. Inkscape writes inline style attributes by default.

SVGO’s documentation notes that files exported from vector editors usually carry editor metadata, comments and hidden elements, all removable without changing how the image renders.

How to edit an SVG file in a text editor

A text editor is enough when the change is a value you can read in the markup, like a hex color, a string or a size.

1. Copy the file and work on the copy.
2. Open it in a code editor such as Visual Studio Code, Notepad++ or Sublime Text. Word processors add formatting that corrupts the file.
3. Find the element by searching for its id, the old hex value or the text string.
4. Change the value and leave the quotes and tag structure alone.
5. Save, open the file in a browser and hard refresh (Ctrl+F5, or Cmd+Shift+R on a Mac) to skip the cache.
6. If the image goes blank, look for an unclosed tag or a deleted quote.

For a color that repeats, use find and replace. In Visual Studio Code that is Ctrl+H (Cmd+Option+F on a Mac), then Replace All.

Colors, text content, width and height, ids, and stray comments or metadata are all safe to change by hand. Path d values, transform matrices and gradients with several stops are better left to an editor.

Hand-editing path data is possible but rarely worth it. One wrong digit bends a curve and nothing in the file says which one.

How to edit an SVG file in Inkscape, Illustrator or a browser editor

Open the file, select the object with the node or direct selection tool, change it, then save as SVG. The save settings matter about as much as the edit itself.

Inkscape

Inkscape uses SVG as its native format, so nothing gets converted when a file opens.

Press N for the Node tool and click a path to show its anchor points, then drag a node or its handles to reshape the curve. For attributes like fill or id, Edit, then XML Editor (Ctrl+Shift+X) lets you change them directly.

Inkscape 1.4, released on October 13, 2024, also opens Affinity Designer files, according to the project’s release notes.

Save a copy as Plain SVG for the web. The default Inkscape SVG adds inkscape: and sodipodi: namespaces that browsers ignore.

Adobe Illustrator

Illustrator opens SVG files without fuss. It rebuilds them in its own object model, though, so the saved markup can differ from the original.

Use the Direct Selection tool (A) to move anchor points. Select, Same, Fill Color picks every shape with the same color for one-step recoloring.

At export, the Styling option offers Presentation Attributes, Inline Style or Internal CSS. Pick presentation attributes when CSS will recolor the file later, since any CSS rule overrides them.

Figma and Affinity

In Figma, select the layer, add an SVG export in the right panel and export. Figma’s developer documentation says the Outline Text setting decides whether text becomes vector paths or stays as text elements, and that SVG supports only center strokes, so inside and outside strokes are approximated.

Canva made Affinity free in late October 2025. The single app now does vector and photo work plus page layout behind a free Canva account, replacing the separate Designer, Photo and Publisher apps. SVG is on its list of supported import and export formats alongside PDF and PSD.

Browser-based editors

SVG-Edit is an open source editor that runs in any modern browser and installs as the npm package svgedit, per its GitHub project. Boxy SVG is a dedicated SVG editor with web and desktop versions.

Both cover basic shape, path and color work. Expect fewer tools than Inkscape, and check whether a web editor uploads the file before using it on client artwork.

How to change SVG colors, fill and stroke

Change the fill attribute to recolor a shape’s interior and the stroke attribute to recolor its outline. Text takes its color from fill too.

Per MDN Web Docs, an element with no fill paints black, and when a fill attribute and a CSS fill property are both set, the CSS property wins. A shape with no stroke draws no outline at all.

The fill attribute sets the interior color or gradient. Stroke sets the outline color, stroke-width sets its thickness, and opacity controls transparency for the whole element.

The same priority runs through the whole format. Inline styles and stylesheet rules override presentation attributes, which sit at the bottom of the list (SVG Essentials, O’Reilly).

That is why a rule written in CSS, in a style block or on a page that inlines the file, always beats an attribute an editor wrote.

To recolor many shapes at once in a text editor, find and replace one hex value across the file. In a vector editor, select every shape with the same fill (Select, Same in Illustrator; Edit, Select Same in Inkscape) and set the new color once. If the shapes share a parent, set fill on the g element so the children inherit it. For icons, fill="currentColor" lets the CSS color property drive the whole thing.

Brand guides often list colors as RGB, so converting RGB values to HEX before pasting them into the markup saves a typo or two.

Gradients and embedded images resist a plain fill swap. A shape painted with fill="url(#grad1)" takes its colors from the stop-color values inside defs, and an image element holding a base64 PNG has no vector fill to change.

How to resize or crop an SVG without distortion

Change width and height to resize an SVG, change the viewBox to crop it, and keep the viewBox in place whenever scaling matters.

MDN Web Docs defines the viewBox as 4 numbers: min-x, min-y, width and height. That rectangle inside the drawing is stretched to fill the space the SVG occupies on the page.

Width and height control how large the image is displayed. The viewBox controls which part of the drawing fills that space.

To resize, edit width and height and leave the viewBox alone. If you remove height altogether, browsers derive it from the viewBox ratio.

To crop, change the viewBox numbers instead. Going from viewBox="0 0 200 100" to viewBox="100 0 100 100" keeps only the right half, so set width and height to 100 as well and the frame matches the new ratio.

In Inkscape, Edit, Resize Page to Selection (Shift+Ctrl+R) performs the same crop in one step. Illustrator’s equivalent is Object, Artboards, Fit to Artwork Bounds.

When the frame and the viewBox have different ratios, preserveAspectRatio decides what happens. The default is xMidYMid meet.

Without a viewBox, preserveAspectRatio does nothing, per MDN. Changing width and height then reveals or hides parts of the drawing instead of scaling it.

Keeping the viewBox is also what lets one file follow a responsive design across breakpoints, with no second export for each screen size.

How to edit SVG text and paths

A text edit is a one-line change in markup, while a path edit belongs in a node tool. Both break in predictable ways.

Editing text

Live text is the easiest thing in an SVG to change.

The text element holds the string, its x and y position and the font settings, so a typo fix works in any editor. Anchoring, wrapping and spacing have their own rules, covered in a deeper look at SVG text.

Leaving text live keeps it editable and selectable, and the file stays smaller. The risk is font substitution on a device that lacks the font. Converting to outlines looks identical everywhere, but the letters become shapes, so the words can no longer be edited as text and the file grows.

MDN’s guide recommends setting fonts with CSS inside the SVG, using either a system font or a web font declared with @font-face. List a generic family such as sans-serif after the preferred one, so the fallback is at least the right style.

To outline text, use Path, Object to Path (Shift+Ctrl+C) in Inkscape or Type, Create Outlines (Shift+Ctrl+O) in Illustrator.

Outlined text carries no readable string, so add a title or aria-label if the words matter. The checklist for accessible SVG files covers the rest.

Editing path nodes

The d attribute of a path is a list of drawing commands.

• M lifts the pen and moves it
• L, H and V draw straight lines
• C, S, Q and T draw Bezier curves
• A draws an elliptical arc
• Z closes the shape

MDN counts 20 commands across 6 types. Uppercase letters use absolute coordinates, lowercase letters use coordinates relative to the current point.

That distinction is where hand edits go wrong. Change one lowercase value and every segment after it shifts, because each one starts where the last ended.

Drag points instead of numbers whenever you can. If the edit has to happen in code, change absolute coordinates one at a time and reload after each.

Too many points make a path hard to edit at all. Path, Simplify (Ctrl+L) in Inkscape and Object, Path, Simplify in Illustrator thin them out.

How to export and optimize an edited SVG

Send out a Plain SVG and keep the editor file as the master. SVGO runs on the delivery copy only.

Plain SVG versus Inkscape SVG

Saving as Plain SVG flattens live shapes into ordinary paths, so a star can no longer be changed through its corner count. That is why the master stays in Inkscape SVG.

Ctrl+S keeps writing Inkscape SVG for a document that started in that format. A Plain SVG needs its own save step every time.

Victor Zhou’s 2019 write-up measured one 24 by 24 circle at 2 KB as Inkscape SVG, 387 bytes as Optimized SVG and 102 bytes after SVGO.

Optimizing with SVGO

1. Install it with npm install -g svgo.
2. Run svgo input.svg -o output.svg on a copy, never the master.
3. Open the result in a browser and compare it with the original.
4. Keep the unoptimized file for later edits.

SVGOMG puts the same engine behind a browser interface, with a toggle for each plugin. A full pass at SVG optimization goes further into presets and per-plugin settings.

Older guides disagree with the current documentation on one point. Tutorials written for SVGO v3 tell you to switch removeViewBox off, because it ran by default.

SVGO’s v3 to v4 migration notes state that removeViewBox and removeTitle are no longer in preset-default, to preserve scalability and accessibility. The plugin’s own page warns that enabling it stops SVGs from filling their container.

preset-default also runs cleanupIds, which shortens or drops ids. If CSS or a script targets an id, disable that plugin through the overrides setting.

Published SVGO tests with default settings give a few reference points.

• Flagkit, a Sketch icon set: 793 kB down to 346 kB, 54.8% smaller on average per file (LogRocket, 2021)
• Illlustrations, an Illustrator pack: 3.4 MB down to 2.6 MB, 24.2% average (LogRocket, 2021)
• HD world map, one file: 1.3 MB down to 880 kB, 31.5% (LogRocket, 2021)
• Inkscape circle icon: 2 KB as Inkscape SVG, 387 bytes as Optimized SVG, 102 bytes after SVGO (Victor Zhou, 2019)

Read together, the savings track how much editor overhead a file carries. Small icons exported from Sketch lose over half, large illustrations lose under a quarter, and Victor Zhou’s 62 SVGs, already saved as Optimized SVG, still shrank by 54.5%.

Both tests predate SVGO v4, so expect different numbers today.

LogRocket’s own conclusion cuts against the usual advice. SVGs do not block rendering, so a handful of small icons gains nothing visible, and running SVGO on every file makes later fill and stroke edits harder.

Optimize large files and final delivery copies. Leave small working files alone.

Why does an SVG break after editing, and when is it not editable?

A syntax error is the usual culprit. Next in line are a blocked external resource, markup that only one editor understands, and a file that never held vector shapes to begin with. Opening the file by itself in a browser usually shows which one.

Flowed text comes from a text box dragged out in Inkscape. It sits outside the SVG 1.1 core, and other renderers can drop it.

Some files just can’t be edited the way you’d expect.

• An image element holding a PNG or JPG contains pixels, not shapes. Trace it with Path, Trace Bitmap in Inkscape, or follow the steps for converting a PNG to true vector paths.
• Outlined text is plain paths now, so correct the wording in the source file instead.
• Heavily optimized files are trickier. preset-default includes mergePaths, collapseGroups and convertShapeToPath, which fuse shapes and drop groups, so separate parts may no longer be selectable on their own.

MDN’s page on SVG as an image explains the img restriction. When an SVG loads through an img tag or a CSS background, scripts are disabled and external images and stylesheets cannot load, though data: URLs still work.

Placing the markup directly in the page avoids that limit, as covered in a guide to SVG in HTML.

SVG Editing FAQ

Is editing an SVG the same as editing a PNG?

Not really. A PNG stores a grid of colored pixels, while an SVG stores shapes as XML text.

Changing an SVG rewrites the shape definitions, so resizing never blurs the image.

How do I open an SVG file on Windows or Mac?

Drag the file into any browser to view it. To change it, right-click, choose Open With, and pick a text editor or Inkscape.

Double-clicking usually launches a browser or image viewer, which displays the file but cannot edit it.

Which everyday apps can edit an SVG besides a vector editor?

Word, Canva and cutting machine software handle basic changes such as size and color, and some can ungroup layers.

None offer full node control over paths, so reshaping a design still needs a vector editor.

How do I ungroup elements or find hidden layers in an SVG?

Select the group and press Shift+Ctrl+G in Inkscape or Illustrator. Hidden layers show up in Inkscape’s Layers and Objects panel (Shift+Ctrl+L), where the eye icon toggles visibility.

In code, search for display="none" or visibility="hidden".

Can SVG files be edited in bulk with a script?

Yes. SVGO accepts a whole folder, for example svgo -f icons -o out, and applies the same cleanup to every file.

For content changes such as swapping a fill color across hundreds of icons, a short Node or Python script using an XML library does the job.

Is it possible to turn a PNG or JPG into an editable SVG?

Yes, through tracing, which builds paths from regions of similar color. Flat logos and line art convert cleanly.

Photographs produce bulky files that rarely look right, so redrawing is the better route for those.

Checking an Edited SVG Before It Ships

An edited SVG file is ready to ship once it renders correctly in the exact context where it will run: an img tag, a CSS background, inline markup, or a target app.

Test in this order, because each step depends on the one before.

1. Open the bare file in a browser to expose syntax errors.
2. Load it in every shipping context.
3. Run SVGO on a copy, then repeat both checks.

Optimization comes last because SVGO changes the file’s structure, so a file that passed before the run can fail after it.

The trade-off is time, since every file gets checked twice, once before SVGO and once after.

This position was verified against SVGO and MDN documentation on 11 October 2026. A change to SVGO’s default plugin set, or to how browsers treat external resources inside an img tag, would reorder these checks.

• Author
• Recent Posts

Bogdan Sandu

Bogdan Sandu specializes in web and graphic design, focusing on creating user-friendly websites, innovative UI kits, and unique fonts.

Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.

Latest posts by Bogdan Sandu (see all)

• What is Backend in Web Development? - September 13, 2026
• What is Frontend Development? - September 11, 2026
• How to Make a Button in Figma: Design Best Practices - September 10, 2026