How to Change the Color of an SVG Logo

The color of an SVG logo comes from the fill and stroke values on its shapes. To recolor the logo, change those values. You can do this in three ways: edit the SVG markup directly, use a vector editor and re-export, or apply CSS when the SVG is placed inline in a web page. Which method fits depends on how the file was built and where the logo will be used.

Terms You Need First

• SVG (Scalable Vector Graphics): a text-based, XML format that describes shapes mathematically, so the artwork can scale without losing sharpness.
• Path: a shape element (<path>) defined by a sequence of drawing commands. Logos often use paths alongside basic shapes such as <circle>, <rect> and <polygon>.
• Fill: the color, gradient or pattern that paints the inside of a shape. If no fill is specified anywhere, SVG shapes default to black.
• Stroke: the color applied to a shape's outline. It is set separately from fill, and its default is none.
• Presentation attribute: a styling value written directly on an element, such as fill="#1A1A1A".
• currentColor: a keyword that makes a fill or stroke inherit the CSS color property of the surrounding element.

Check What the File Actually Contains

A .svg extension does not prove that the file contains only editable vector shapes. Some SVG files wrap an embedded bitmap, and fill changes cannot recolor that image. Before you edit, open the file in a plain-text or code editor and look for the following:

• <image> elements, often with a long data:image/png;base64 string. These hold raster content, and fill changes will not affect them.
• fill and stroke attributes on individual shapes or on group (<g>) elements.
• style attributes such as style="fill:#E30613", or a <style> block that uses class selectors.
• Gradients or patterns inside <defs>. Their colors are set by stop-color on <stop> elements, not by fill.
• <use> elements that reference a shared symbol. Changing the original symbol changes every instance of it.

Recoloring a logo also raises a permission question. Being able to edit a file does not give you the right to alter someone else's mark. If the logo belongs to a brand, use the colors approved in that brand's guidelines, or get the owner's sign-off on any new color version.

Method 1: Edit the Fill Values in the Code

For a simple logo, editing the code is the most direct method and gives you the most control. Find each color value and replace it with the new one.

<!-- Before -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 40">
  <path d="M10 10h30v20H10z" fill="#E30613"/>
  <path d="M50 10h60v20H50z" fill="#E30613" stroke="#000000"/>
</svg>

<!-- After -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 40">
  <path d="M10 10h30v20H10z" fill="#0057B8"/>
  <path d="M50 10h60v20H50z" fill="#0057B8" stroke="#002F63"/>
</svg>

Search the whole file for every color format it might use: hex values (#), rgb(), hsl() and named colors. A color can be defined in an attribute, in a style attribute, in a <style> block and in gradient stops, all within the same file. Missing one of these locations is the most common reason a recolor looks only partly applied. If a shape has no fill at all and appears black, add a fill attribute to it or to its parent group.

Method 2: Recolor in a Vector Editor

• 1. Open the SVG in a vector application such as Illustrator, Inkscape, Affinity Designer or Figma.
• 2. Select every object that shares the old color. Illustrator offers Select > Same > Fill Color, Inkscape offers Edit > Select Same > Fill Color, and Figma lists the colors in a selection under Selection colors.
• 3. Change the fill to the new value. Then check the strokes, because they are set separately.
• 4. Edit gradient stops, symbols or components at their source, so every instance updates.
• 5. Export or save as SVG. Then reopen the exported file in a code editor to confirm the new values are present and no unexpected raster images or editor metadata were added.

Method 3: Change the Color with CSS

CSS can recolor an SVG only when the SVG markup sits inline in the HTML document. An SVG loaded through an <img> tag or a CSS background-image is a separate document, so styles on your page cannot reach inside it. In that case, you have two practical options. You can edit the file itself, or you can use the SVG as a CSS mask with a background color behind it. The mask approach produces a single color only.

/* Inline SVG with class="logo" */
.logo path {
  fill: #0057B8;
}

/* Single-color recolor of an external SVG file using a mask */
.logo-mask {
  width: 120px;
  height: 40px;
  background-color: #0057B8;
  -webkit-mask: url(logo.svg) no-repeat center / contain;
  mask: url(logo.svg) no-repeat center / contain;
}

Precedence decides whether your CSS takes effect. Presentation attributes such as fill="#E30613" have the lowest priority, so any matching CSS rule overrides them. An inline style attribute such as style="fill:#E30613" beats rules in your stylesheet unless those rules use !important. If a CSS change seems to do nothing, check the element for an inline style first.

Make a One-Color Logo Adaptable with currentColor

For a monochrome logo that has to appear on light and dark backgrounds, set the fill to currentColor. The logo then takes whatever text color its container has, and you control the color through the CSS color property.

<a class="site-logo" href="/">
  <svg viewBox="0 0 120 40" aria-label="Company name" role="img">
    <path d="M10 10h100v20H10z" fill="currentColor"/>
  </svg>
</a>

<style>
  .site-logo { color: #1A1A1A; }
  .dark-theme .site-logo { color: #FFFFFF; }
</style>

For a multi-color logo, give each color group its own class, or point each fill at a CSS custom property, for example fill: var(--logo-primary). You can then swap individual colors without touching the paths.

Choosing the Right Color Values

SVG colors are specified in screen color spaces, usually hex or RGB. When a brand guide defines its colors as Pantone or CMYK, the guide's own screen equivalents are the reliable source, because no single universal conversion exists between print and screen color. For print delivery, check whether the printer needs a separate file, such as a PDF or EPS with spot or CMYK colors, instead of a recolored SVG. The materials for this guide contain no brand values or printer requirements, so confirm those with the logo owner or the production vendor.

Verify the Result

• Open the saved file directly in at least two browsers and confirm that every shape shows the new color.
• Search the code again for the old value in every format (hex, rgb, named colors and gradient stops). No matches should remain.
• Zoom in closely to check for leftover strokes, thin edges or hidden shapes in the old color.
• Place the logo on its intended backgrounds and check contrast and legibility.
• Test the logo in its real destination, such as a website, app, document tool or email template. Support for SVG and for CSS-driven color varies by platform.
• Keep the original file unchanged, and save the recolored version under a clear name that identifies the color variant.

Common Problems and Fixes

Problem | Likely cause | Fix

CSS has no effect | SVG is loaded through <img> or background-image | Inline the SVG, edit the file, or use a CSS mask

CSS has no effect on an inline SVG | An inline style attribute overrides the stylesheet | Remove the style attribute or edit the value there

Part of the logo keeps the old color | Color is also set in a stroke, a <style> block or a gradient stop | Search all color locations and update each one

Shapes appear black after editing | No fill is defined, so the default applies | Add a fill to the shapes or their parent group

Nothing changes the color | Artwork is an embedded raster <image> | Obtain or rebuild true vector artwork