SVG non-scaling-stroke
non-scaling-stroke keeps a shape's stroke width visually constant even when the shape itself is scaled up or down.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Why Strokes Normally Scale with Their Shape
By default, applying a scale transform to an SVG shape scales its stroke width proportionally along with the shape's geometry, which can look wrong for elements like map pin outlines or UI borders that should maintain a consistent visual line weight regardless of how zoomed in or out the containing view currently is.
- Scale transforms normally scale stroke width proportionally by default
- This looks wrong for elements needing a consistent visual line weight
- Common issue in zoomable maps, diagrams, and UI border elements
Applying vector-effect to Fix Stroke Scaling
Setting vector-effect="non-scaling-stroke" on a shape tells the renderer to keep that shape's stroke width fixed in screen pixels regardless of any transform scale applied to it or its ancestors, which is particularly useful in interactive zoomable SVG maps or diagrams where borders should stay a consistent thickness at every zoom level.
- vector-effect="non-scaling-stroke" keeps stroke width fixed in screen pixels
- Works regardless of transform scale applied to the shape or its ancestors
- Particularly useful for zoomable interactive maps and diagram interfaces
Frequently Asked Questions
Does non-scaling-stroke affect the shape's fill in any way?
No, it affects only how stroke width responds to scaling — the shape's fill color and geometry scale normally as expected, only the stroke width itself stays visually constant.
Can I apply non-scaling-stroke to only some shapes in a scaled group?
Yes, the vector-effect property applies per-element, so you can mix shapes that scale their stroke normally with shapes that use non-scaling-stroke within the same scaled group.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG