Non-Scaling Stroke for SVG Icons

Scale a stroked SVG icon up and its outline gets visibly heavier, because the browser multiplies stroke-width by the same factor as the geometry. Set vector-effect="non-scaling-stroke" on the path or its group and the stroke is rendered in screen pixels after the transform, so a 2px line stays 2px at 16px, 24px, or 96px.

This is a presentation attribute defined in SVG 2, also settable as the CSS property vector-effect. Chrome, Edge, Firefox, and Safari have shipped it for years; Internet Explorer never supported it, and a few PDF/print pipelines ignore it (see the trade-offs below).

Pros and cons of vector-effect="non-scaling-stroke"

• Pro — constant UI weight: a 2px stroke reads as 2px at every rendered size, so an icon used in a 16px menu and a 48px empty-state keeps the same line weight without per-size SVGs.
• Pro — one attribute, whole icon: set it on a wrapping <g> and every child stroke inherits it, instead of editing each path.
• Con — sub-pixel blur when tiny: below roughly 16x16, a constant stroke can land between device pixels and the anti-aliasing softens caps and joins. Outlining the stroke to a filled path (covered below) gives you pixel control.
• Con — not universal: IE ignores it, and some PDF, print, and older SVG-to-bitmap renderers drop it. For those targets, outline the strokes or export a raster.

Prepare your SVG in IconVectors

1. Open or create your icon:
   • File -> Open... (Ctrl+O) or New Icon (Ctrl+N), working on a square grid such as 24x24 so stroke widths land on whole-pixel coordinates.
   • Set fill and stroke to currentColor so the icon inherits its color from CSS once it ships.

   

Apply non-scaling stroke (inline attribute or CSS)

You can set the effect two ways. Use the inline attribute when you want it baked into the icon file; use SVG-scoped CSS when you would rather toggle it with a class.

1. Inline attribute (path or group)

   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <g vector-effect="non-scaling-stroke"
        stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round">
       <path d="M4 12 9 17 20 6"/>
     </g>
   </svg>

   On the <g> it covers every child path. Size the SVG with CSS (width/height) or a transform: scale() and the rendered stroke stays at 2px.

2. SVG-scoped CSS

   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <style>
       .ns { vector-effect: non-scaling-stroke; }
     </style>
     <path class="ns" d="M4 12 9 17 20 6"
           stroke="currentColor" stroke-width="2" fill="none"/>
   </svg>

When to convert strokes to paths (tiny sizes)

Below about 16x16, a live stroke can sit between device pixels and blur at the caps and joins even with non-scaling-stroke on. When you need that crispness, outline the stroke to a filled shape and place its nodes on whole-pixel coordinates.

• Outline the stroke: Path -> Outline Stroke Path (Ctrl+J), then Path -> Simplify Path... to drop redundant nodes.
• Check crispness: preview at 100% zoom and nudge nodes to pixel centers so caps and joins land on the grid.
• Export rasters for bitmap-only targets: File -> Export -> Export to Multiple Bitmaps (Shift+Ctrl+F3).

Troubleshooting

• Stroke still scales: confirm the attribute is on the stroked shape or a parent <g>. Older engines honored it only under SVG transforms; current browsers also respect CSS sizing.
• IE or legacy PDF/print export: these can ignore vector-effect, so outline the strokes before exporting to those formats.
• Animated or dashed strokes: some libraries compute pathLength and dash arrays before applying vector effects. If the dash spacing drifts, outline the stroke first.