Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
dylanrose opened this issue Nov 21, 2022 · 1 comment
Open

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

dylanrose opened this issue Nov 21, 2022 · 1 comment

Comments

@dylanrose
Copy link

dylanrose commented Nov 21, 2022

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>
@dylanrose
Copy link
Author

Screen Shot 2022-11-21 at 8 15 25 AM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant