search

svg / svgo

⚙️ Node.js tool for optimizing SVG files
https://svgo.dev/
MIT License
20.91k stars 1.38k forks source link

How to crop padding space around SVG? #1215

Open dejurin opened 4 years ago

dejurin commented 4 years ago
Снимок экрана 2020-02-03 в 21 28 40
Investigamer commented 3 months ago

I know this is really old, but I have been scouring the world trying to find a way to do this with SVGO or some other NPM package. The only two npm related solutions I've found appear to be abandoned. Literally the only thing I've managed to use with real success is Inkscape from CLI, but its not exactly ideal. I found an old thread related to this question in SVGO's issues but it was dismissed as out of project scope. How is fitting the viewbox to the shape and eliminating extraneous margins not considered a potential optimization idea? If its been done in the past, it can be done again and it should be integrated into this project as an official plugin.

GreLI commented 3 months ago

It's about editing than something related to optimization and SVGO. But you can make viewBox smaller to focus 'window' of what SVG image shows. Or use some editor to crop images/decrease canvas.

AmrAlSayed0 commented 2 months ago

It would be great if SVGO could do this. UI/UX designers usually handoff svg files with annoying padding around it and it forces me to either go through each svg file and check and remove the padding or use it as is in the project but account for the padding in EVERY SINGLE IMAGE!!

SVGO could follow all the paths and determine the min and max X and Ys and crop the svg to be that. Shouldn't be hard.

GreLI commented 2 months ago

@AmrAlSayed0 well, you can write a custom plugin for that. There are some caveats, however, with strokes that can have different joints types and filters. So, writing such general purpose plugin isn't that easy task, aside it's not about optimizing and there are little support for developing SVGO.

But isn't it easier to ask designers to deliver better suited svg files? Also, if you are exporting svg from Figma, there are ways to select better frames. You can see them in the left panel.

GreLI commented 2 months ago

Also, there are some tips for doing something like that at https://github.com/svg/svgo/issues/2005#issuecomment-2168264317