Set SVG fill and path colors

The short answer

In SVG, a path's color comes from two paint properties. Fill paints the interior of the shape, and stroke paints its outline. You can set either one as an attribute on the path, as an attribute on a parent group, or with CSS. If nothing sets a fill, the browser paints the shape black. If nothing sets a stroke, the shape has no outline. Setting fill to none leaves the interior transparent.

<svg viewBox="0 0 32 32">
  <path d="M4 4h24v24H4z"
        fill="#1a73e8"
        stroke="#0b3d91"
        stroke-width="2"/>
</svg>

The examples in this article leave out the SVG namespace declaration to keep them short. A standalone .svg file, including a favicon, needs that declaration on its root svg element. Inline SVG inside an HTML page does not.

Where the color is set, and which setting wins

Several settings can apply to the same path. When they conflict, the outcome follows the CSS cascade. This explains most cases where a color change appears to do nothing.

• Presentation attributes, such as fill="#1a73e8" written on the element, carry the lowest author priority. Any CSS rule that matches the element overrides them.
• Stylesheet rules, either in an embedded style element or in the page's CSS for inline SVG, override presentation attributes.
• An inline style attribute, such as style="fill:#1a73e8", overrides stylesheet rules unless a stylesheet rule uses !important.
• Fill and stroke are inherited. A fill set on a g element or on the root svg element applies to every child that does not set its own fill.

<svg viewBox="0 0 32 32">
  <style>
    .mark   { fill: #1a73e8; }
    .accent { fill: #f9ab00; }
  </style>
  <g class="mark">
    <path d="M4 4h24v24H4z"/>
    <path class="accent" d="M10 10h12v12H10z"/>
  </g>
</svg>

In this example, the outer square inherits blue from its group. The inner square has its own class, so it overrides the inherited value and renders yellow. When a logo uses classes like these, you can usually change one rule to recolor every shape that uses it. The alternative is editing each path one by one.

Tying path color to text color with currentColor

Setting fill="currentColor" makes the path use the value of the CSS color property at that point in the document. Icon systems rely on this so that one SVG can match surrounding text or respond to hover states. It only works when the page's CSS can reach the SVG, which in practice means inline SVG in the HTML. An SVG loaded through an img element, a CSS background, or a favicon link cannot see the page's color value. In those contexts, currentColor resolves using only what is defined inside the file itself.

What changes when the SVG is a favicon

Browsers load a favicon as a separate image document. The host page's stylesheets do not apply to it, and scripts inside it do not run. Every color decision therefore has to live inside the favicon file, either as presentation attributes or in an embedded style element. You reference the file with a link element whose rel is icon and whose type is image/svg+xml.

An embedded style element can include a prefers-color-scheme media query. This lets the mark switch colors when the browser or operating system uses a dark theme, which helps a dark logo stay visible on a dark tab bar. Browser support for SVG favicons and for this media query inside them has varied. The material supplied for this article includes no current support data, so test in the browsers you care about. Keep a PNG or ICO fallback for browsers that ignore the SVG.

<svg viewBox="0 0 32 32">
  <style>
    path { fill: #0b3d91; }
    @media (prefers-color-scheme: dark) {
      path { fill: #8ab4f8; }
    }
  </style>
  <path d="M4 4h24v24H4z"/>
</svg>

When recoloring the paths won't work

A file ending in .svg does not guarantee that the artwork is made of editable vector paths. Check the following before assuming that fill or stroke controls what you see.

• Embedded raster images: if the artwork is an image element holding PNG or JPEG data, fill and stroke have no effect on its pixels. The SVG is only a container around a raster picture.
• Raster previews: some exported files pair real vector shapes with a flattened bitmap preview. Make sure you are editing the shapes and not the bitmap.
• Gradients and patterns: if a path's fill references a gradient or pattern defined in a defs section, change the gradient's stop colors or the pattern itself. Changing the path's fill replaces the gradient with a flat color.
• Masks, clip paths and filters: color shown through a mask or produced by a filter may not come from the visible path's fill at all.
• Inline style attributes: if a path carries style="fill:...", changing its fill attribute does nothing. Edit the style attribute or override it with a stylesheet rule that uses !important.
• Reused symbols: shapes drawn with a use element copy an original definition. You usually can't target the copies with selectors. Set the fill on the original, or leave the original's fill unset so each use element can pass down its own fill through inheritance.
• Live text: a text element takes fill like a path does, but how it looks depends on whether the font is available. Logo text in a favicon should normally be converted to outlined paths.

Checking a logo file before you edit it

Open the SVG in a text editor or a vector application and inspect what it actually contains. Shape elements such as path, rect, circle and polygon indicate vector artwork. An image element indicates embedded raster data. Then search the file for fill, stroke, style and class to find where color is currently defined. That tells you which of the rules above will decide the result. For a favicon, it is also worth removing unused definitions and hidden layers so the small file holds only the shapes it renders.

Permission to change a logo's colors

Being able to download a logo, or being technically able to recolor its paths, does not give you permission to modify it. Brand owners often restrict color variations in their guidelines, and logos are commonly protected as trademarks. Fonts used in the artwork may also carry their own license terms. Recolor your own marks freely. For anyone else's logo, follow the owner's published usage rules or get permission first.

Gaps in this guidance

No evidence about a specific logo file, tool or browser version was supplied for this article. The points above describe general SVG and CSS behavior. They do not confirm how any particular file or browser will behave. Verify browser support for SVG favicons and dark-mode media queries directly in the browsers your audience uses.