Set SVG Stroke Color

To set the line color of an SVG shape, give it a stroke value. You can add the stroke attribute directly to an element such as a path, circle or line, or set the CSS stroke property in a stylesheet. The value takes any CSS color: a named color, hex, rgb(), hsl(), or the keyword currentColor. The stroke paints only the outline of a shape. The interior is controlled separately by fill.

The direct answer: stroke as an attribute or a CSS property

The simplest method is a presentation attribute on the element itself:

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <path d="M4 16 L16 4 L28 16" fill="none" stroke="#1a73e8" stroke-width="2"/>
</svg>

You can do the same thing with CSS, either in a style block inside the SVG or, for inline SVG, in the page stylesheet:

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <style>
    .outline { stroke: #1a73e8; stroke-width: 2; fill: none; }
  </style>
  <path class="outline" d="M4 16 L16 4 L28 16"/>
</svg>

A few related properties are often set together with the color:

• stroke-width: thickness of the line in user units.
• stroke-opacity: transparency of the stroke only, from 0 to 1.
• stroke-linecap and stroke-linejoin: the shape of line ends and corners.
• stroke="none": removes the outline entirely.
• fill="none": leaves the interior unpainted. Use this when you want a line-only path, because shapes are filled black by default.

Which rule wins when colors conflict

Stroke color often seems to ignore an edit because another rule takes precedence. Presentation attributes such as stroke="red" carry the lowest priority in the CSS cascade. Any stylesheet rule that targets the element overrides them. An inline style attribute, such as style="stroke: red", overrides stylesheet rules unless those rules use !important.

Stroke is also inherited. If you set it on a parent g or svg element, every child without its own stroke value uses the parent's color. When you recolor a whole logo, setting stroke once on a group is usually cleaner than editing each path. Check first whether individual paths carry their own attributes. If they do, those attributes override the inherited value.

Method | Example | Priority

Presentation attribute | stroke="#333" | Lowest; overridden by any CSS rule

Stylesheet rule | .icon path { stroke: #333; } | Overrides attributes; follows normal CSS specificity

Inline style attribute | style="stroke:#333" | Overrides stylesheet rules unless !important is used

Inherited from parent | <g stroke="#333"> | Applies only where a child sets no stroke of its own

Using currentColor for adaptable line color

Setting stroke="currentColor" makes the line take its color from the CSS color property. For inline SVG icons this is a common pattern, because the icon then matches the surrounding text and changes with hover states or themes without any edits to the paths.

<button style="color: #c0392b">
  <svg viewBox="0 0 24 24" width="24" height="24">
    <path d="M5 12h14" fill="none" stroke="currentColor" stroke-width="2"/>
  </svg>
</button>

This only works when the SVG is part of the page's document tree. When an SVG is loaded through an img tag, a CSS background image, or as a favicon, it is rendered as a separate image. Page CSS cannot reach into it, and currentColor resolves inside the SVG file itself rather than from the page.

Why some logo lines won't change color

Many logo files that look like line art contain no strokes at all. Design tools can convert ('outline' or 'expand') strokes into filled shapes, and this is common in final logo deliveries because it locks the line weight at any scale. In that case each line is a closed path painted by fill. Changing stroke does nothing, or it adds an unwanted outline around the existing shape. Open the file in a text editor or vector tool and check which property actually paints the visible line before you edit it.

An .svg extension also doesn't guarantee editable vector paths. An SVG can wrap an embedded raster image in an image element, often as base64 data. Neither stroke nor fill affects the pixels inside it, so recoloring that artwork requires the original vector source or a redraw. Raster previews of a logo, such as PNG thumbnails, can't be recolored through SVG properties either.

Stroke color in SVG favicons

Because a favicon is loaded as an image, the stroke color has to be defined inside the SVG file itself. Setting it from the page's CSS won't work. A style block inside the file can include a prefers-color-scheme media query, so the line color can switch between light and dark browser themes. Browser support for SVG favicons and for this media query varies. Test in the browsers you target, and supply a raster fallback such as an ICO or PNG.

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <style>
    path { stroke: #111; fill: none; stroke-width: 3; }
    @media (prefers-color-scheme: dark) {
      path { stroke: #f5f5f5; }
    }
  </style>
  <path d="M6 26 L16 6 L26 26 Z"/>
</svg>

Favicons display at very small sizes, so thin strokes can blur or disappear. Heavier stroke widths relative to the viewBox, or simplified artwork made specifically for the favicon, usually hold up better than a scaled-down version of the full logo. This is a general design consideration, not a measured threshold. Check the result at the actual display sizes.

Recoloring someone else's logo

Changing a stroke color is technically simple, but being able to download a logo file doesn't grant permission to alter it. Brand guidelines often restrict color changes. Trademark rights and any licensed fonts in the artwork carry their own terms. If the logo isn't yours, check the owner's usage guidelines before you publish a recolored version.

Gaps in this overview

No specific logo file, design tool, or browser version was supplied for this article. It therefore covers the general SVG behavior of stroke color without tool-specific menu steps or browser compatibility figures. For exact support details, consult current browser documentation and test in your target environment.