logoredraws.com

Keeping SVG Stroke Width Constant When Scaling

How the SVG non-scaling-stroke setting keeps line thickness fixed as artwork resizes, when it suits logos, and when outlining strokes is the safer delivery choice.

Published

Contents
  1. The short answer
  2. How the property is written
  3. Practical details that affect whether it works
  4. Why this usually conflicts with proportional logo scaling
  5. Comparing the three approaches
  6. Design-tool settings are a separate issue
  7. Checking a logo file before changing its strokes

The short answer

To keep a stroke the same visible thickness while an SVG grows or shrinks, apply vector-effect="non-scaling-stroke" to the stroked shapes. By default, SVG strokes scale with the artwork: if a viewBox is stretched to four times its size, a stroke-width of 2 renders four times as thick. With non-scaling-stroke, the browser calculates the stroke in the coordinate space of the rendered output rather than the artwork's own coordinates. The line weight stays fixed while the shapes resize.

For most logo marks, though, constant stroke width is not what you want. A logo is designed to scale proportionally, so its line weights should usually grow and shrink with everything else. Non-scaling strokes are better suited to interface icons, diagrams, charts, maps and hairline outlines, where a consistent on-screen line weight matters more than fixed proportions.

How the property is written

vector-effect can be set as a presentation attribute on an SVG element or as a CSS property. In the example below, the viewBox is 100 units wide and the SVG displays at 400 pixels, a fourfold scale. Without the vector-effect attribute, the circle's stroke would render at about 8 pixels. With it, the stroke renders at 2 pixels.

<svg viewBox="0 0 100 100" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40"
          fill="none" stroke="#000" stroke-width="2"
          vector-effect="non-scaling-stroke"/>
</svg>

The CSS equivalent targets the stroked elements directly:

.mark path,
.mark circle,
.mark line {
  vector-effect: non-scaling-stroke;
}

Practical details that affect whether it works

  • The property is not inherited. Setting it on a group element does not pass it down to the children, so apply it to each stroked shape or use a selector that matches them.
  • Only strokes are affected. Filled shapes, including strokes that have been converted to outlines, still scale normally. Fill-only artwork has no stroke for the property to act on.
  • Embedded raster images are not affected. An SVG that wraps a PNG or JPEG has no vector strokes to hold constant, even though the file extension is .svg.
  • Where the rule lives matters. When an SVG loads as an image or a CSS background, styles on the host page cannot reach inside it, so the attribute or a style block must be authored into the SVG file itself. Inline SVG in the page can be styled from the page's stylesheet.
  • non-scaling-stroke is the value with broad support in modern browsers. SVG 2 defines further values, such as non-scaling-size, non-rotation and fixed-position, but browser support for these has been limited, so do not rely on them without testing.

Why this usually conflicts with proportional logo scaling

A logo's stroke weights are part of its proportions. If the strokes stay fixed while the shapes around them resize, the balance of the mark changes with every size. A favicon-sized rendering can look heavy and crowded, and a large hero rendering can look spindly. That breaks the principle that a logo should look like the same mark at every size.

For that reason, the common practice for logo delivery is to convert strokes to filled outlines before exporting. Outlined shapes scale proportionally in any SVG renderer and don't depend on how a particular program interprets stroke properties. The trade-off is editability: an outlined stroke can no longer have its width changed with one numeric value. Many designers therefore keep a separate master file with live strokes.

If a brand needs a different line weight at small sizes, the usual approach is a dedicated small-size or simplified version of the logo, drawn and approved for that purpose. A runtime rendering effect is not a substitute for that design work.

Comparing the three approaches

Approach | Stroke behavior when resized | Typical fit | Main caveat
Default scaling stroke | Thickness grows and shrinks with the artwork | Logos and illustrations meant to keep proportions | Stroke width still depends on renderer support for stroke properties
vector-effect: non-scaling-stroke | Thickness stays fixed in rendered output | Icons, charts, diagrams, maps, hairline outlines | Changes the mark's proportions at each size; support outside browsers varies
Strokes outlined to filled paths | Behaves as filled shapes and scales proportionally | Final logo delivery files | Line weight is no longer editable as a single value

Design-tool settings are a separate issue

Editing applications have their own options for whether strokes scale when you resize an object. Illustrator's Scale Strokes & Effects setting and Inkscape's toggle for scaling stroke width with objects are examples. These settings control what happens to the artwork while you edit it. They don't add vector-effect to an exported file. A logo resized in a design tool with stroke scaling turned off ends up with new stroke values baked into its geometry, which is different from a file that keeps its strokes constant at display time.

Support for vector-effect also varies outside web browsers. The available evidence doesn't confirm how specific design applications, PDF converters or rendering libraries handle the property when they import or convert SVG. If a file will be opened or converted outside a browser, test it in each target program rather than assuming the effect carries over.

Checking a logo file before changing its strokes

Before adding non-scaling-stroke to a logo, confirm what the file actually contains. The .svg extension alone doesn't guarantee editable vector paths. The file may hold outlined shapes with no strokes, live strokes, an embedded raster image, or a mix of these. Opening the markup in a text editor and looking for stroke and stroke-width attributes, path elements and image elements is a quick way to tell.

Changing stroke behavior in someone else's logo also counts as modifying the artwork. Being able to download a logo file does not by itself grant permission to alter it or to use its fonts or trademarks. Check the brand owner's usage terms or guidelines before delivering a modified version.