Stroke Width in SVG: How It Works and How to Set It for Favicons

The stroke-width property sets the thickness of the outline drawn along a shape's path in an SVG. It is measured in the user units of the SVG's coordinate system, not in screen pixels, and its initial value is 1. The stroke is centered on the path, so half its thickness falls inside the shape and half falls outside. You can set it as a presentation attribute on an element or as a CSS property. For an SVG favicon, the key question is how those user units translate into actual pixels when the icon is drawn at very small sizes.

What stroke-width controls

A stroke is painted along the geometry of path, line, polyline, polygon, rect, circle, ellipse and text elements. Because the stroke is centered on the path, a shape whose path runs right along the edge of the viewBox loses the outer half of its stroke to clipping. A stroke only appears when the stroke property is set to a paint value. Its default is none, so a stroke-width on its own draws nothing.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="12"
          fill="none"
          stroke="#1a1a1a"
          stroke-width="3" />
</svg>

Setting stroke properties with attributes or CSS

The stroke properties work the same way in both forms, and the names match: stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-miterlimit and stroke-opacity. Presentation attributes have the lowest priority. A CSS rule that targets the element overrides them, and an inline style attribute overrides both. This order matters when a file exported from a design tool contains attributes and you try to restyle it with CSS.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .mark {
      fill: none;
      stroke: #1a1a1a;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  </style>
  <path class="mark" d="M8 22 L16 8 L24 22" />
</svg>

For a favicon, any CSS must live inside the SVG file itself. An SVG referenced as an icon, or through an img element, is rendered as an isolated image document. The page's stylesheets do not reach into it, and scripts inside it do not run.

Why stroke width behaves differently at favicon sizes

Stroke width scales with the viewBox. If the viewBox is 32 units wide and the icon is drawn 16 pixels wide, every user unit becomes half a pixel, and the stroke shrinks by the same factor. The table below shows this arithmetic. The figures are calculations from the ratio, not test measurements.

viewBox width | stroke-width (user units) | Rendered at 16 px | Rendered at 32 px

32 | 2 | 1 px | 2 px

32 | 3 | 1.5 px | 3 px

512 | 16 | 0.5 px | 1 px

512 | 32 | 1 px | 2 px

When a stroke works out to less than one pixel, or to a fraction such as 1.5 pixels, anti-aliasing spreads it across neighboring pixels. The line then looks soft or gray instead of crisp. A one-pixel stroke on a whole-number coordinate straddles two pixel columns for the same reason. Placing it on a half-pixel coordinate at the target size can keep it sharp. As an editorial judgment, a detailed logo with fine strokes usually reads better as a favicon when it gets a simplified small-size variant with heavier strokes, rather than relying on scaling alone.

The vector-effect property with the value non-scaling-stroke tells the renderer to keep the stroke width constant in screen units instead of scaling it with transforms. That can help when one SVG is reused at many sizes. Treat it as something to verify in the browsers you target rather than a guaranteed fix for favicons.

Stroke color in SVG and CSS

The stroke property accepts any CSS color value, a gradient or pattern reference, or the keyword currentColor. It is independent of fill, so a shape can have a filled interior and a differently colored outline. In a favicon, currentColor does not pick up the text color of the host page, because the file is isolated from it. It resolves to whatever color is set inside the SVG, which defaults to black. To adapt a stroked favicon to light and dark browser themes, you can use a prefers-color-scheme media query inside the file. Support for this in favicons varies between browsers, so check current compatibility data before depending on it.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: none; stroke: #1a1a1a; stroke-width: 3; }
    @media (prefers-color-scheme: dark) {
      path { stroke: #f2f2f2; }
    }
  </style>
  <path d="M8 22 L16 8 L24 22" />
</svg>

stroke-linecap: how open ends are drawn

• butt (default): the stroke stops exactly at the path's endpoint.
• round: a semicircle is added at each end, extending past the endpoint by half the stroke width.
• square: a square is added at each end, also extending by half the stroke width.
• The added length from round and square caps can change the apparent proportions of short strokes, which is noticeable at favicon sizes.

stroke-linejoin: how corners are drawn

• miter (default): corners come to a sharp point, limited by stroke-miterlimit (initial value 4). Beyond that limit the corner is drawn as a bevel.
• round: corners are rounded.
• bevel: corners are cut off flat.
• SVG 2 also defines arcs and miter-clip, but browser support for those values is limited, so they are a poor choice for a favicon.

stroke-opacity

stroke-opacity takes a value from 0 to 1 and affects only the stroke, separately from fill-opacity. Because the inner half of a stroke overlaps the fill, a semi-transparent stroke lets the fill show through that inner half. The result is a two-tone edge. At favicon sizes, partial opacity also lowers contrast against the browser tab. A solid color is usually the clearer choice, though that is a design judgment rather than a technical rule.

Live strokes or outlined paths in delivered logo files

A logo file can keep strokes live, as stroke attributes on paths, or convert them to outlines, meaning filled shapes that trace the former stroke. Live strokes keep the weight easy to edit, but the result depends on how each renderer handles caps, joins and scaling. Design tools also differ in whether they scale strokes when an object is resized. Outlined strokes render the same everywhere, but changing their weight later means redrawing or re-expanding from a source. A common practice is to keep an editable master with live strokes and deliver a favicon export that has either been tested with live strokes or been outlined.

An .svg extension does not prove that a file contains editable vector strokes. Open the file in a text editor and look for path or shape elements with stroke properties. If the artwork sits inside an image element, often as an embedded base64 PNG, it is a raster image wrapped in SVG. Changing stroke-width will have no effect on it.

Being able to download a logo file is not the same as permission to change it. Adjusting stroke weight, color or corner style on a third-party brand mark can conflict with its usage guidelines or trademark terms. Confirm what modifications are allowed before preparing a favicon from someone else's logo.

Practical checklist for a stroked SVG favicon

• Choose a small viewBox, such as 32 units, so stroke widths map to whole pixels at common sizes.
• Work out the rendered stroke width at 16 and 32 pixels and avoid sub-pixel results.
• Keep strokes away from the viewBox edge, or allow half the stroke width as padding.
• Put all styles inside the SVG file; page CSS will not apply.
• Set stroke explicitly; the default is none.
• Test any dark-mode media query in each browser you support.
• Check that the file contains real vector paths, not an embedded raster image.
• Confirm you have the right to modify the logo artwork.

Gaps in this overview

No browser test results, rendering measurements or logo-specific specifications were available for this article. Statements about favicon support, media queries and vector-effect describe general documented behavior, and current browser compatibility should be confirmed separately. The pixel values in the table are arithmetic from the viewBox-to-size ratio, not observed output.