Search code examples
xmlsvgiconsbatch-processingbulk

Bulk Resize SVG Canvas from 14px to 16px


I'm looking for a way to bulk resize around 600 svg icons.

This is an example icon:

<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"/></svg>

The grid is a multiple of 14px. I want to maintain the size of the icon itself (the path), but the canvas itself needs to become a multiple of 16px, and the path needs to remain perfectly centered on the canvas. Reason being these icons will be used at eg. 16px and should still remain and crisp and clear as they would be at 14px.

I know I can simply resize the canvas itself, but my svg knowledge is limited and I do not know how I can reliable center the path on the canvas in a way that would work as described.

Any ideas?


Solution

  • You could also use IcoMoon to do that. After importing your SVGs, press the menu button on top right hand corner of your icon set and choose "Get Info". From there, you can add a padding to all your icons. Negative paddings work too.

    enter image description here