Edit SVG File

The short answer

You can edit an SVG file in two ways. The first is visual editing in a vector graphics editor. The second is direct editing in a plain text or code editor, because SVG (Scalable Vector Graphics) is a text-based markup format. Use a vector editor when you need to change shapes, curves or layout. Use a code editor for precise changes such as colours, the viewBox or cleanup of unneeded markup. For a favicon, finish by checking that the file is simple, square and readable at very small sizes.

A few terms are used throughout this guide. A vector graphic describes shapes mathematically instead of as a grid of pixels, so it can scale without blurring. A path is a single shape outline defined by anchor points, which are the points the outline passes through, and by curve handles that control how the outline bends between them. The viewBox is an attribute on the root svg element that sets the internal coordinate area of the drawing. It controls the proportions and framing of the artwork when it is displayed.

The .svg extension does not prove that a file contains only vector shapes. It also does not mean the file is easy to edit or that you may reuse the logo inside it. An SVG can wrap an embedded raster image, such as a PNG or JPEG photo, inside vector markup. If you modify a logo you do not own, confirm that you have permission first.

Before you start

• Make a copy of the original file and edit only the copy, so you can always return to the source artwork.
• Confirm that you have the right to modify the logo, especially if you sourced it from a third party.
• Open the file in a text editor and scan the markup. Elements named path, rect, circle or polygon are true vector shapes. A text element means live, font-dependent text. An image element usually means embedded or linked raster content that will not scale cleanly.
• Decide on the target use before editing. A favicon is shown at very small sizes, so it needs bolder and simpler forms than a full logo lockup, which is the complete arrangement of symbol and wordmark.

Choosing an editing method

Method | Best for | Watch out for

Vector graphics editor | Reshaping paths, moving anchor points, redrawing parts of a mark, converting text to outlines | Some editors save their own extra data inside the SVG, which can bloat the file

Code or text editor | Changing colours, adjusting the viewBox, removing metadata, adding dark-mode styling | Typing errors can break the file; reshaping complex curves by hand is impractical

Both in sequence | Designing visually, then cleaning and finalising the markup | You must recheck the file after each round-trip between tools

Editing an SVG in a vector editor

Menu names, tool names and export dialogs differ between applications and versions. The steps below describe the general workflow. Check the exact commands in the documentation for the editor and version you use.

• 1. Open or import the SVG copy. Check that shapes come in as editable paths and not as one flattened image. If the artwork arrives as an image, it is raster content and must be traced or redrawn before you can edit it as vector shapes.
• 2. Ungroup or release any clipping masks if you need to reach individual shapes. A clipping mask is a shape that hides everything outside its outline.
• 3. Use the direct-selection or node tool to adjust anchor points and curve handles. Remove unnecessary points, because fewer points produce smoother curves and smaller files.
• 4. Merge overlapping shapes that share a colour into single paths where practical. This prevents thin seams and reduces markup.
• 5. Set fills and strokes. For favicons, consider converting strokes to filled outlines so that line weight cannot change unexpectedly when the icon is scaled.
• 6. Set the canvas or artboard to a square and fit the artwork inside it with deliberate padding, so the viewBox exports as a square.
• 7. Export or save as plain SVG instead of the editor's own native format, then reopen the exported file to confirm the result.

Editing SVG markup directly

Open the file in any plain text or code editor. Do not use a word processor, because it can insert formatting characters. Make one change at a time and reload the file in a browser to check it. The fragment below shows a minimal square icon. A real file's root svg element must also keep its standard SVG namespace declaration, which is omitted here.

<svg viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#1a1a1a"/>
  <path d="M9 23V9h8a5 5 0 0 1 0 10h-4v4z" fill="#ffffff"/>
</svg>

• To recolour artwork, change the fill or stroke values on the relevant elements, or in a style block if the file uses one.
• To reframe the artwork, adjust the four viewBox numbers. They set the minimum x, the minimum y, the width and the height of the coordinate area. Equal width and height give a square icon.
• To reduce file size, remove editor metadata, comments, empty groups and unused definitions. Keep anything an element actually references, such as gradients or clip paths it points to by ID.
• Fixed width and height attributes on the root element set a default display size. Removing them lets the surrounding context control the size, while the viewBox keeps the proportions.

Handling typography

Live text in an SVG depends on the viewer having the same font installed or available. Without it, the text falls back to a different font and the logo changes. For delivery files, and especially favicons, convert text to outlines. This turns each letterform into a path, which most vector editors offer as a text-to-path or create-outlines command. After conversion the text can no longer be retyped, so keep a separate master file with live text for future edits. Check that the font licence allows this use of the outlined letterforms in a logo.

Preparing the edited SVG as a favicon

• Use a square viewBox so the icon is not distorted or letterboxed in browser tabs.
• Simplify the mark. Fine details, thin lines and small text usually become unreadable at tab-icon sizes, so a single symbol or initial often works better than a full logo.
• Avoid embedded raster images. They defeat the purpose of a vector favicon and may display blurry.
• Consider light and dark browser themes. An SVG favicon can include a style block with a prefers-color-scheme media query that swaps colours, as in the example below. Browser support for this behaviour varies, so test it in the browsers your audience uses.
• Reference the file in the page head with a link element whose rel is icon and whose type is image/svg+xml.
• Keep raster fallbacks, such as ICO or PNG versions, for browsers and platforms that do not use SVG favicons. Home-screen and app icons generally rely on PNG files as well.

<style>
  path { fill: #1a1a1a; }
  @media (prefers-color-scheme: dark) {
    path { fill: #ffffff; }
  }
</style>

Export settings to review

• Format: choose plain or standard SVG instead of an editor-specific variant that stores extra application data.
• Text: confirm that text is exported as outlines unless you deliberately need live text.
• Images: make sure no raster images are embedded or linked.
• Styling: inline attributes are the most widely compatible. Use an internal style block only if you need features such as the dark-mode media query.
• Coordinate precision: lower decimal precision reduces file size, but values that are too low can distort small curves. Compare the output with the original after export.
• IDs and names: remove auto-generated layer names and IDs that nothing references.

How to confirm the result

• Open the saved file in at least one web browser. It should display correctly with no errors, missing parts or unexpected boxes.
• Open it in a text editor and confirm that it contains only the shapes you expect, with no stray image elements and no unwanted text elements.
• Zoom in closely and look for jagged joins, seams between shapes or leftover stray points.
• Preview the icon at very small sizes, such as a browser tab, and check that it is still recognisable.
• If you added theme-aware colours, switch the operating system or browser between light and dark modes and check both versions.
• Compare the edited file with the original copy and confirm that only the intended changes were made.

Gaps in this guide

No confirmed evidence was available for specific applications, versions or browser support levels. This guide therefore gives no exact menu paths, version numbers or compatibility figures. Before relying on a particular command or behaviour, check the current documentation for your vector editor and test favicon behaviour in the browsers you need to support.