How to Edit SVG Files on a Mac

The short answer

To edit an SVG on a Mac, open it in a vector graphics editor if you need to change shapes, colors or layout. If you only need to adjust attributes such as colors, dimensions or the viewBox, open it in a plain-text or code editor. Then export or save it as a clean, standard SVG and check it in a web browser and at the small sizes where a favicon will appear. macOS has no built-in SVG editor. Finder's Quick Look and web browsers can display SVG files, but changing one requires a separate application.

Some terms used in this guide: SVG (Scalable Vector Graphics) is a text-based file format that describes an image with shapes and coordinates instead of pixels, so it can scale without blurring. A path is a shape defined by anchor points and the lines or curves between them. The viewBox is the attribute that sets the coordinate area the artwork is drawn in, and it controls how the image scales and crops. An artboard is the canvas area in a design application that becomes the exported image bounds.

Check the file before you edit it

The .svg extension tells you the file format, not what the file contains. It does not guarantee the artwork is fully vector or easy to edit, and it does not grant permission to modify or reuse a logo. Open the file in a text editor and look for the following before you start:

• An <image> element or long base64-encoded data, which means a raster (pixel) image is embedded. Scaling it will blur, and you cannot edit it as vector shapes.
• <text> elements, which depend on fonts installed on the viewing device. They can render differently or fall back to another font on other machines.
• Script elements or unusual external references, which you should not ship in a favicon or logo file.
• A very large number of tiny path segments, which often comes from automatic image tracing and makes clean edits difficult.
• Usage rights. If the logo belongs to someone else, confirm that you are allowed to modify it, and whether a brand guideline restricts changes to color, proportions or spacing.

Choose the right kind of editor

Base the choice on the edit you need to make. If you need to change shapes, merge or simplify paths, recolor several elements, resize the artboard or convert lettering to outlines, use a vector graphics editor. Applications that run on macOS and open SVG include Inkscape (free and open source), Adobe Illustrator, Affinity Designer, Sketch, Figma and Boxy SVG. If you only need to change a fill color value, remove metadata, or correct width, height or viewBox attributes, a code editor or plain-text editor is faster. It also leaves the rest of the file untouched.

Gap: the material behind this guide contains no confirmed details on current app versions, pricing, licensing terms or SVG feature support for any specific application. Check each tool's current documentation before you commit to one for production artwork.

Step by step: editing a logo or favicon SVG

• 1. Duplicate the original file and work on the copy, so you can compare or roll back.
• 2. Open the copy in your chosen editor. In a vector application, check that the artwork imported as editable paths and not as a single grouped image.
• 3. Make the design change. For a favicon, simplify the mark so it reads at very small sizes. Fine details, thin strokes and small text usually disappear in a browser tab.
• 4. Convert live text to outlines (also called converting to paths or curves). The lettering then no longer depends on installed fonts. Keep an unconverted master copy in case the wording needs to change later.
• 5. Convert strokes to filled shapes if consistent rendering matters. Strokes can scale differently from fills, depending on the file's settings.
• 6. For a favicon, set a square artboard and fit the mark within it, so the exported viewBox is square.
• 7. Save or export as standard SVG. Some editors add application-specific data by default. Inkscape, for example, offers a Plain SVG option alongside its own SVG variant. Choose the plain or web-oriented output where one exists.
• 8. Open the exported file in a text editor and confirm it is clean: a root svg element with its namespace declaration intact, a sensible viewBox, path data, and no unexpected embedded images, scripts or editor metadata.

The fragment below shows the attributes worth checking on an exported favicon file. It is a simplified excerpt, not a complete file. Keep the namespace declaration your editor writes on the root element.

<svg viewBox="0 0 32 32" width="32" height="32">
  <path fill="#1A1A1A" d="..."/>
</svg>

Verify the result

• Preview the file with Quick Look: select it in Finder and press the space bar.
• Open it in more than one web browser and confirm that the shapes, colors and cropping match what you designed.
• View it at very small display sizes to judge favicon legibility, and at large sizes to look for rough curves or stray anchor points.
• Check the mark on both light and dark backgrounds, since browser tabs and bookmarks can appear in either.
• Confirm the file opens cleanly in a second editor. This catches application-specific quirks before you hand the file over.

Delivery notes for favicons

An SVG favicon is a good master format because one file stays sharp at any size. Browser support for SVG favicons is not universal, so also export raster versions (PNG, and ICO where needed) from the same artwork. Some designers add a prefers-color-scheme media query inside the SVG so the icon adapts to dark mode. This is a design option, not a requirement, and browser support should be checked before you rely on it. The material for this guide includes no confirmed browser support data or required favicon sizes, so check the current documentation for the browsers and platforms you target.