SVG vector-effect non-scaling-stroke Explained

The vector-effect="non-scaling-stroke" attribute in SVG ensures that an element’s stroke width remains constant regardless of any scaling, zooming, or transformations applied to the graphic. By default, when an SVG scales up or down, its stroke width scales proportionally, often leading to excessively thick or hairline-thin borders. Applying non-scaling-stroke detaches the stroke width from coordinate transformations, making it an essential tool for responsive web design, icon systems, maps, and interactive data visualizations.

The Problem with Default SVG Scaling

When an SVG element is resized via CSS, HTML dimensions, or SVG transform attributes (such as scale()), the entire coordinate system scales.

For instance, if a path has a stroke-width="2" and the entire SVG is scaled up by a factor of four, the rendered stroke width becomes 8 pixels. Conversely, scaling down a graphic makes strokes shrink, often rendering them invisible or blurry. This default behavior is problematic when designing user interfaces where uniform line weights are required across different screen sizes.

How non-scaling-stroke Works

The vector-effect attribute specifies the vector effect to use when drawing an object. When set to non-scaling-stroke, the rendering engine calculates the stroke width in screen pixels after all coordinate transformations (viewBox scaling, CSS transforms, and SVG transforms) have been applied.

As a result, a 2-pixel stroke will always render at exactly 2 pixels on the screen, regardless of whether the shape itself is shrunk to fit a mobile screen or enlarged to fill a desktop display.

Syntax and Usage

You can apply non-scaling-stroke either directly as an SVG attribute or via CSS.

Inline SVG Attribute

<svg viewBox="0 0 100 100" width="400" height="400">
  <circle cx="50" cy="50" r="40" 
          stroke="black" 
          stroke-width="2" 
          fill="none" 
          vector-effect="non-scaling-stroke" />
</svg>

CSS Implementation

.scalable-icon path,
.scalable-icon circle {
  vector-effect: non-scaling-stroke;
}

Common Use Cases

• Responsive Icon Sets: UI icons can be resized dynamically to fit buttons, navigation bars, or hero sections while maintaining a consistent visual weight and line thickness.
• Interactive Maps and GIS: When users zoom into a map, geographic boundaries and roads retain a crisp, readable line width rather than expanding to cover entire regions.
• Data Visualization and Charts: Grid lines, trend lines, and axes maintain a clean 1-pixel appearance regardless of chart resizing or canvas zooming.
• CAD and Technical Drawings: Architectural blueprints and schematics remain legible during pan-and-zoom interactions.

Browser Support

vector-effect="non-scaling-stroke" is widely supported across all modern web browsers, including Chrome, Firefox, Safari, and Edge. It is a standard feature of the SVG specification that provides fine-grained visual control over vector graphics in responsive environments.