SVG Stroke Width: How It Works in Favicon and Logo Files

The short answer

Stroke width in SVG sets the thickness of the line drawn along a shape's outline. You can set it with the stroke-width presentation attribute or with the CSS stroke-width property. If nothing sets it, it defaults to 1 user unit. The value is measured in the SVG's own coordinate system, not in screen pixels. So the visible thickness depends on how the viewBox is scaled to the final display size. This matters a lot for favicons, which are usually drawn on a larger artboard and shown very small.

This article covers stroked vector artwork inside an SVG favicon or logo file. It does not cover raster images embedded in an SVG or PNG previews of the icon. Those contain pixels, not paths, so stroke-width has no effect on them.

Attribute versus CSS

The two forms set the same property but have different priority. A presentation attribute has the lowest priority of any styling source. Any matching CSS rule overrides it, whether the rule sits in an embedded style element or an inline style attribute.

<!-- Presentation attribute -->
<path d="M4 16h24" stroke="#000" stroke-width="2" fill="none"/>

<!-- CSS inside the SVG file -->
<style>
  .mark { stroke: #000; stroke-width: 2; fill: none; }
</style>
<path class="mark" d="M4 16h24"/>

For a favicon, the location of the CSS matters. A browser loads an SVG favicon as an isolated image. The host page's stylesheet cannot reach into it, and external stylesheets referenced from the SVG are not loaded. Stroke styling therefore has to live inside the SVG file itself, either as attributes or in an embedded style element. An embedded style element also lets you use a prefers-color-scheme media query to adjust strokes for dark browser themes. Support for that technique varies by browser, so test the browsers you care about.

Units and accepted values

• Unitless numbers are user units of the current coordinate system, which is the most common and predictable choice.
• CSS length units such as px are allowed, but inside a scaled viewBox they still scale with the drawing.
• Percentages are calculated against the normalized diagonal of the viewport (the square root of width squared plus height squared, divided by the square root of two), not against the width alone.
• A value of 0 draws no stroke; negative values are invalid.

How the viewBox changes the visible thickness

Stroke width scales along with everything else when the viewBox is mapped to the display size. Here is an illustrative calculation, not a standard. Take a favicon drawn in a 32 by 32 viewBox and displayed at 16 CSS pixels. Everything is halved, so a stroke-width of 2 renders at about 1 CSS pixel. On a standard-density screen, a 1-pixel line that falls between pixel rows gets anti-aliased into a faint two-pixel blur. On high-density screens the same line has more device pixels and holds up better. Transforms on groups or elements scale strokes in the same way.

Compare the final rendered stroke size with the pixel grid of the sizes the favicon will appear at. Do this instead of judging the stroke at artboard zoom, where almost any width looks fine. The source evidence for this article includes no measured recommended widths, so no specific number is given here. The right value depends on the mark's complexity and the target sizes, and you should confirm it by previewing at actual size.

Strokes are centered on the path

An SVG stroke straddles the path. Half its width falls inside the shape and half outside. SVG has no reliable inside or outside stroke alignment in current browsers. This causes two practical problems in a favicon. A stroke on a path that touches the viewBox edge gets half of it clipped. Thick strokes in tight artwork can also swallow counters and gaps between shapes. Leave margin inside the viewBox equal to at least half the stroke width, or adjust the paths to compensate.

Related stroke properties that affect thickness

Property | What it controls | Why it matters at small sizes

stroke-linecap | Shape of open line ends (butt, round, square) | Round and square caps extend the line by half the stroke width beyond the endpoint

stroke-linejoin | Shape of corners (miter, round, bevel) | Sharp miter joins can spike outward and look heavier than the stroke itself

stroke-miterlimit | When a miter join falls back to a bevel | Controls how far sharp corners can project

vector-effect | non-scaling-stroke keeps stroke width constant on screen despite transforms | Useful in interactive graphics, but less predictable when a whole file is rendered as a scaled image such as a favicon

Should a delivered favicon keep live strokes?

This is an editorial recommendation, not a specification requirement. For final favicon and logo delivery files, it is often safer to convert strokes to filled outlines. The menu command is Outline Stroke in Illustrator and Figma, and Stroke to Path in Inkscape. Outlined artwork renders the same way regardless of scaling, transforms, or how a given renderer treats stroke properties. It also avoids differences between tools when the file is reopened. The trade-off is editability: once outlined, you can no longer adjust the line weight with a single value.

A common approach is to keep a stroked master file for editing and export an outlined version for production. If you are preparing several sizes, consider separately tuned artwork for the smallest sizes rather than scaling one file down. Strokes that read well at large sizes may need to be heavier, or the detail simplified, at 16 pixels.

Checking what a file actually contains

A .svg extension does not guarantee editable vector paths with adjustable strokes. An SVG can wrap an embedded PNG or JPEG in an image element, and that content has no stroke to change. The artwork can also be already outlined, so the visible lines are filled shapes. To see which case you have, open the file in a text editor or a vector tool. Look for path or shape elements with stroke attributes, as opposed to image elements or fill-only shapes.

Permission to modify

Being able to download a logo or favicon SVG does not mean you may edit it. Changing the stroke weight of someone else's mark alters the artwork. The artwork, any fonts it is built from, and the trademark may each carry separate restrictions. Check the brand's usage guidelines or get permission before modifying or redistributing a third-party logo.

Evidence gaps

The supplied evidence contained no specific measurements, tested stroke widths, or browser test results. The guidance above relies on general, documented SVG behavior. The 32-to-16 scaling example is arithmetic for illustration. Exact browser support for dark-mode media queries in favicons, and how each renderer handles non-scaling strokes in images, should be checked against current documentation and tested in the target browsers.