Maintain Stroke Width Across Sizes (SVG vector-effect)

Ever scaled an SVG and watched the strokes get thicker? The fix is the SVG attribute/CSS property vector-effect="non-scaling-stroke", which keeps the visual stroke width constant even when the icon scales. Modern browsers support it broadly; Internet Explorer does not.

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

• Pro — consistent UI weight: 1px remains 1px as the icon grows/shrinks (great for responsive UI and hover zoom).
• Pro — simple: one attribute on paths or on a group affects all child strokes.
• Con — tiny sizes: at very small exports (e.g., 12×12) fractional alignment can still blur joins/caps. Consider outlining strokes to filled paths.
• Con — legacy tools: older renderers and IE don’t support it; outline strokes or export bitmaps for those targets.

Export & prepare your SVG in IconVectors

1. Open or create your icon:
   • File → Open… (Ctrl+O) or New Icon (Ctrl+N). Work on a square grid (e.g., 24×24).
   • Use currentColor for fill/stroke to theme in code.

   

Apply non‑scaling stroke (inline attribute or CSS)

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>

   Putting it on <g> applies to all child shapes. Scale the SVG (CSS size or transforms) and the stroke remains visually 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)

For very small exports (e.g., favicon‑sized UI), live strokes may produce fractional alignment and anti‑alias blur. In those cases, outline the stroke to a fill and tweak nodes at whole‑pixel coordinates.

• IconVectors: Path → Outline Stroke Path (Ctrl+J), then optionally Path → Simplify Path… to reduce points.
• Check crispness: preview at 100% zoom; adjust joins/caps or nudge nodes to pixel centers.
• Export bitmaps when needed for legacy/bitmap‑only targets via File → Export → Export to Multiple Bitmaps (Shift+Ctrl+F3).

Troubleshooting

• Stroke still scales: ensure the attribute is on the stroked shape (or a parent <g>). Some older engines only honored it under transforms; modern browsers handle CSS sizing and transforms.
• IE/legacy PDF/print tools: they may ignore vector-effect. Outline strokes before export.
• Animations/dashes: some libraries compute pathLength/dash arrays before vector effects; outline if behavior is inconsistent.