Skip to content

Export SVG with "non-scaling-stroke" applied #55

@dylanrose

Description

@dylanrose

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions