Add
viewBoxto SVG files using SVGO
Node JS script which uses SVGO and a custom plugin in order to add viewBox attribute to all SVG files in a folder or to a single SVG file.
- NodeJS
- NPM or Yarn
- SVGO installed and configured - you should have a
svgo.config.jsfile. If you don't, the default config file will be used. - Some SVG files which have
widthandheightattribute but lack theviewBoxattribute.
svgo-viewbox --help
# Usage
# $ svgo-viewbox --arg1 --arg2
#
# Options
# --input, -i path to folder which contains SVG files or a single svg file, defaults to current working directory
# --svgo-file, -f path to SVGO configuration file in JS format (https://github.com/svg/svgo#configuration), defaults to the built-in SVGO configuration
#
# Examples
# $ svgo-viewbox --input ./assets/images/svg --svgo-file ./svgo.config.js
# $ svgo-viewbox -i ./assets/images/svg
# $ svgo-viewbox -i ./assets/images/svg/file.svg
# $ svgo-viewboxFirst install the module as a development dependency
npm i svgo-viewbox --save-dev
# or
yarn add svgo-viewbox -Dthen add a new NPM script in your package.json file:
{
"scripts": {
"svgo-viewbox": "svgo-viewbox -i ./assets/images/svg -f ./svgo.config.js"
}
}First install the module globally
npm i -g svgo-viewbox
# or
yarn global add svgo-viewboxthen use it in your terminal
svgo-viewbox -i ./assets/images/svg -f ./svgo.config.jsnpx svgo-viewbox -i ./assets/images/svg -f ./svgo.config.jsMIT
Connect with me:
Support and sponsor my work:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent