SVG Path Stroke Width: How stroke-width Works in Logo and Favicon Artwork
How SVG stroke-width is measured, how it scales with the viewBox, why thin strokes fail at favicon sizes, and when to convert strokes to filled outlines.
Contents
In SVG, stroke-width sets how thick the outline drawn along a path is. You can write it as an attribute on a path or set it in CSS. The value is measured in the coordinate system of the SVG's viewBox, not in screen pixels. The stroke is centred on the path, so half its width falls inside the shape and half falls outside. Because of this, the same stroke-width can look heavy in a large logo and vanish in a 16-pixel favicon. Getting it right depends on how the viewBox relates to the size the icon is displayed at.
What stroke-width controls
A path element describes geometry. Fill paints the area inside that geometry, and stroke paints a line along it. The stroke property chooses the colour of that line, and stroke-width chooses its thickness. The default stroke is none, so stroke-width has no visible effect until a stroke colour is set. Three related properties shape the ends and corners of the line: stroke-linecap (butt, round or square ends), stroke-linejoin (miter, round or bevel corners) and stroke-miterlimit (how far sharp miter corners may extend before they are bevelled).
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M6 16 L16 6 L26 16 L16 26 Z"
fill="none"
stroke="#1a1a1a"
stroke-width="2"
stroke-linejoin="round"/>
</svg>When a stroke width is set both as an attribute and in CSS, the CSS wins. Presentation attributes such as stroke-width="2" have the lowest priority, so a stylesheet rule or an inline style overrides them. This matters when an exported logo seems to ignore the value you edited: a style block or class elsewhere in the file may be setting it.
How the value is measured
- Default: if stroke-width is not set, it is 1 user unit.
- Unitless numbers: these are user units, the units of the viewBox coordinate system.
- Length units such as px: these are also resolved in the current user coordinate system, so they still scale with the viewBox.
- Percentages: these are calculated against the normalised diagonal of the viewport, not against the width of the path.
- Zero: a value of 0 draws no stroke.
- Negative values: these are invalid and are not applied.
Why the viewBox decides how thick a stroke looks
An SVG scales its viewBox to fit the size at which it is displayed, and strokes scale with it. To estimate the rendered width, divide the display size by the viewBox width and multiply by the stroke-width. The table below shows this calculation for a few common setups. These are arithmetic results, not measured renderings, and anti-aliasing will soften any width that does not land on whole pixels.
| viewBox width | stroke-width | Rendered at 16 px | Rendered at 32 px |
| 24 | 2 | about 1.33 px | about 2.67 px |
| 32 | 2 | 1 px | 2 px |
| 32 | 1 | 0.5 px | 1 px |
| 512 | 32 | 1 px | 2 px |
| 512 | 8 | 0.25 px | 0.5 px |
If you want a stroke to stay the same on-screen width however the graphic is scaled, set vector-effect="non-scaling-stroke" on the path. This helps in interface drawings and diagrams. For logos and favicons it is usually the wrong choice, because the stroke no longer keeps its proportion to the rest of the mark. At small sizes it can overpower the shape, and at large sizes it can look spindly.
Stroke versus fill, and why logos are often delivered as outlines
Because the stroke straddles the path, a stroke on a filled shape makes it look larger by half the stroke width on every side. A stroke drawn on a path that touches the edge of the viewBox will have its outer half cropped. Design tools often report a shape's geometric bounds without the stroke. That is one reason strokes get clipped unexpectedly when an icon is placed on a tight canvas.
For final logo files, many designers convert strokes into filled outlines. Illustrator calls this Outline Stroke, and Inkscape calls it Stroke to Path. After conversion, the visible line becomes a closed shape with a fill, so it no longer depends on stroke-width, linecap, linejoin or how a renderer handles strokes. The trade-off is editability: the line weight can no longer be changed with a single value. A sensible delivery set therefore includes an editable master with live strokes and an outlined production version. That is an editorial recommendation, not a requirement of the SVG format.
Stroke width in favicon design
- Choose a viewBox that divides cleanly into the target sizes. For example, a 32-unit viewBox maps directly to 16 and 32 pixel renderings.
- Pick stroke widths that come out to at least about one whole pixel at the smallest size the icon will be shown. Thinner strokes tend to fade into a blur of anti-aliasing.
- Keep paths and stroke edges on whole or half units where you can, so that edges line up with the pixel grid.
- Leave enough padding inside the viewBox that the outer half of each stroke is not clipped.
- Consider a simplified small-size version of the mark with heavier or fewer strokes, rather than relying on one SVG to work at every size.
- Check the rendered result at real display sizes in the browsers you care about, because rendering of fractional strokes can vary.
Check that the file actually contains strokable paths
A .svg extension does not guarantee editable vector paths. An SVG can wrap an embedded raster image, such as a PNG or JPEG stored in an image element. stroke-width has no effect on the pixels inside that image. Some downloaded files, and some previews shown on websites, are raster renderings of a logo rather than the vector source. Open the file in a code editor or a vector tool and look for path, line, polyline or shape elements before assuming the strokes can be adjusted. If the artwork is already outlined, its line weights are part of the fill geometry and cannot be changed with stroke-width either.
If the logo belongs to someone else, being able to download the file does not mean you may change its stroke weights or redistribute an altered version. Permission to modify the artwork, use any included fonts or use the trademark is a separate question from technical access, and it is governed by the owner's licence or brand guidelines.
Limits of this overview
This article explains how the SVG stroke-width property generally behaves and how that affects logo and favicon artwork. It does not assess any particular logo, design tool version or browser. It contains no measured rendering tests. The pixel values in the table are calculated from the viewBox ratio. For a specific file, test the output at its actual display sizes.