non-scaling-stroke is an SVG attribute that preserves the stroke width of an SVG element as it scales.
This is particularly useful for line illustrations or icon libraries that are intended to scale. I use Sketch for a lot of my custom icons for its ease of batch exporting. Currently, when I need the effect I add 'non-scaling-stroke' to exported SVG files manually. This can get very tedious for large batches of icons which i work with regularly.
An option to add vector-effect: non-scaling-stroke to SVG exports would be awesome.
In practice: an SVG circle exported from Sketch:
<g id="Parts" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle id="Oval" stroke="#979797" cx="50" cy="50" r="49.5"></circle>
</g>
non-scaling-stroke added to preserve stroke width:
<g id="Parts" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle vector-effect: non-scaling-stroke id="Oval" stroke="#979797" cx="50" cy="50" r="49.5"></circle>
</g>
non-scaling-stroke is an SVG attribute that preserves the stroke width of an SVG element as it scales.
This is particularly useful for line illustrations or icon libraries that are intended to scale. I use Sketch for a lot of my custom icons for its ease of batch exporting. Currently, when I need the effect I add 'non-scaling-stroke' to exported SVG files manually. This can get very tedious for large batches of icons which i work with regularly.
An option to add vector-effect: non-scaling-stroke to SVG exports would be awesome.
In practice: an SVG circle exported from Sketch:
non-scaling-stroke added to preserve stroke width: