logoredraws.com

Edit SVG Color: How to Recolor and Invert Vector Logo and Favicon Files

How to change the colors in an SVG logo or favicon: find where fill and stroke are defined, edit them in code or a vector editor, invert colors safely, and verify the result.

Published

Contents
  1. Key terms
  2. Before you start
  3. Find where the colors are defined
  4. Method 1: Edit the colors in a text editor
  5. Method 2: Edit the colors in a vector editor
  6. Method 3: Control the color with CSS
  7. How to invert SVG colors
  8. Favicon-specific considerations
  9. Check the result
  10. Gaps in this guide

To change the color of an SVG, change the fill and stroke values that paint its shapes. Fill is the color inside a shape, and stroke is the color of its outline. These values can sit in several places in the file, so the job is mostly finding every place a color is defined and changing each one. You can do this in a text editor, in a vector editor, or with CSS when the SVG is placed directly in a web page's HTML. To invert an SVG, either replace each color with its mathematical opposite or apply an invert filter. For logos and favicons, a deliberate light-on-dark version in approved colors is usually a better choice than an automatic inversion.

Key terms

  • SVG (Scalable Vector Graphics): a text-based XML format that describes shapes as geometry, so it can be read and edited as plain text.
  • Path: a shape defined by points and curves (the <path> element). Most logo artwork is made of paths.
  • Fill: the paint inside a shape. If a shape has no fill set, it is painted black.
  • Stroke: the paint along a shape's outline. If no stroke is set, the outline is not drawn.
  • currentColor: a keyword that makes a fill or stroke use the inherited CSS text color instead of a fixed value.
  • Outlined text: lettering converted from live font text into paths, so it no longer depends on an installed font.

Before you start

  • Work on a copy. Keep the original file unchanged.
  • Make sure you are allowed to modify the logo. A .svg extension says nothing about ownership or usage rights, and brand guidelines often restrict recoloring.
  • Check that the file is actually vector artwork. An SVG can contain an embedded bitmap (an <image> element, often with a long data: string). Fill and stroke changes have no effect on embedded bitmaps.
  • Gather your target colors as exact values, such as hex codes from the brand guidelines, so you are not picking colors by eye.
  • Note how the SVG will be used: as a file loaded through an <img> tag or a favicon link, or placed inline in a page's HTML. This decides whether page CSS can recolor it.

Find where the colors are defined

Open the SVG in a plain-text or code editor and search for each of the locations below. Colors may be written as hex codes (#1a73e8), rgb() values, or color names (red).

Location | Example | Notes
Presentation attribute | <path fill="#1a73e8"/> | Easiest to edit. Any CSS rule overrides it.
Inline style attribute | <path style="fill:#1a73e8"/> | Overrides presentation attributes and <style> rules unless those rules use !important.
Internal stylesheet | <style>.cls-1{fill:#1a73e8}</style> | Common in exports from design tools. Shapes refer to it by class.
Gradient stops | <stop stop-color="#1a73e8"/> | Fill points to a gradient by ID. Recolor the stops, not the fill.
Inherited from a parent group | <g fill="#1a73e8"> | Children without their own fill use the group's color.
No color set | <path d="..."/> | Painted black by default. Add a fill to change it.
Mask contents | <mask> ... </mask> | These colors control transparency, not visible color. Leave them alone unless you mean to change what is hidden.

Method 1: Edit the colors in a text editor

  • 1. Search for every color value in the file (#, rgb, fill, stroke, stop-color) and list the distinct colors used.
  • 2. Use find-and-replace to change one old color to its new value across the whole file. Repeat for each color.
  • 3. If a color is defined in a <style> block, change it there. Changing a fill attribute on a shape will not work if a class rule or inline style overrides it.
  • 4. If a shape relies on the default black fill, add an explicit fill attribute to it or to its parent group.
  • 5. Save the file as plain UTF-8 text, keeping the .svg extension.
<!-- Before -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>.mark{fill:#1a73e8}</style>
  <path class="mark" d="M4 4h24v24H4z"/>
</svg>

<!-- After: change the value in the style rule -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>.mark{fill:#d93025}</style>
  <path class="mark" d="M4 4h24v24H4z"/>
</svg>

Method 2: Edit the colors in a vector editor

Illustrator, Inkscape, Figma and similar editors all follow the same basic workflow, but menu names and export options differ between applications and versions. Check them against the version you are using. Treat the steps below as the sequence of work, not as exact commands.

  • 1. Open or import the SVG and ungroup or isolate shapes as needed. Some editors import nested groups or clipping groups that hide the actual shapes.
  • 2. Select each shape and set its fill and stroke to the exact target values. If the editor has a global or shared color feature, use it so that matching shapes update together.
  • 3. Recolor gradients by editing their color stops.
  • 4. Convert live text to outlines before final export. This keeps the letterforms correct without the font installed, and the type is then recolored like any other path.
  • 5. Export as SVG. If the editor lets you choose how styles are written, presentation attributes or inline styles keep each color next to its shape, which makes later edits easier. Turn off any option that embeds raster previews or editor-specific metadata if you don't need them.
  • 6. Open the exported file in a text editor and confirm that the new color values appear and the old ones don't.

Method 3: Control the color with CSS

Page CSS can only reach shapes in an SVG that is placed inline in the HTML. An SVG loaded through an <img> tag, a CSS background, or a favicon link is an isolated document, so page styles cannot reach into it. For inline icons, set fill to currentColor in the SVG. The icon then takes the text color of whatever surrounds it.

<a class="brand" href="/">
  <svg viewBox="0 0 32 32" aria-hidden="true">
    <path fill="currentColor" d="M4 4h24v24H4z"/>
  </svg>
</a>

<style>
  .brand { color: #1a73e8; }
  .brand:hover { color: #d93025; }
</style>

Only use currentColor in a file that will be loaded as an image or favicon if you have tested it. In that context there is no surrounding text color to inherit, so the result may not be what you expect. Use fixed color values for standalone files.

How to invert SVG colors

Inverting replaces each color with its opposite: each red, green and blue channel becomes 255 minus its value. White becomes black, and a blue such as #1a73e8 becomes #e58c17. There are three practical ways to do this.

  • Edit the values: calculate the inverse of each color and replace it using Method 1 or 2. This gives a permanent, predictable file.
  • Apply a CSS filter on the page: filter: invert(1) on an <img> or inline SVG changes how it is displayed without changing the file. It affects everything in the element, including embedded bitmaps.
  • Apply an SVG filter inside the file: an feColorMatrix filter can invert colors within the SVG. This works wherever the file is shown, but it adds complexity and is harder to maintain than editing the values.
<!-- Display-time inversion on a web page -->
<img src="logo.svg" alt="Company name" style="filter: invert(1);">

Plain inversion also reverses hue, so a red logo becomes cyan. For a brand mark, that is rarely an approved color. When you need a version for dark backgrounds, it is usually better to build a reversed version in the brand's specified light colors and to check that areas meant to be transparent still are. Background shapes, holes in letters and compound paths with a fill rule may need to be redrawn rather than recolored.

Favicon-specific considerations

An SVG favicon is loaded as an isolated image, so the page's stylesheet cannot recolor it. To show different colors in light and dark browser themes, put a prefers-color-scheme media query in the SVG's own <style> block. Browser support for SVG favicons and for this media query in favicons differs and has changed over time, so check current support for your target browsers and keep a raster favicon fallback. No browser support data was supplied for this guide.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .mark { fill: #1a73e8; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #8ab4f8; }
    }
  </style>
  <path class="mark" d="M4 4h24v24H4z"/>
</svg>

Check the result

  • Search the saved file for each old color value. None should remain unless you meant to keep it.
  • Open the SVG directly in at least one web browser. Browsers apply the styling rules strictly, so a shape that stayed the old color usually points to a CSS rule or inline style overriding an attribute.
  • View the artwork on both light and dark backgrounds to confirm contrast and that transparent areas are still transparent.
  • For favicons, view the icon at small tab sizes. Thin strokes and close color pairs that work at full size can become unreadable.
  • Confirm that text renders correctly on a machine without the brand fonts installed. If it doesn't, the type was not converted to outlines.
  • If the file came from a design tool, reopen it in that tool to confirm it still imports correctly.

Gaps in this guide

No application-specific evidence was supplied. Menu paths, export option names and browser favicon support are therefore described in general terms. Check them against the exact software and browser versions you use.