GitHub release GitHub issues GitHub last commit Build Status npm npm Analytics


Add viewBox to 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.


  1. NodeJS
  2. NPM or Yarn
  3. SVGO installed and configured - you should have a svgo.config.js file. If you don't, the default config file will be used.
  4. Some SVG files which have width and height attribute but lack the viewBox attribute.


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 (, 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-viewbox

As an NPM script

First install the module as a development dependency

npm i svgo-viewbox --save-dev

# or

yarn add svgo-viewbox -D

then add a new NPM script in your package.json file:

	"scripts": {
		"svgo-viewbox": "svgo-viewbox -i ./assets/images/svg -f ./svgo.config.js"

From the command line

First install the module globally

npm i -g svgo-viewbox

# or

yarn global add svgo-viewbox

then use it in your terminal

svgo-viewbox -i ./assets/images/svg -f ./svgo.config.js

Without installing

npx svgo-viewbox -i ./assets/images/svg -f ./svgo.config.js



Connect with me:


Support and sponsor my work:

Send me your message

Trusted by

  • Duke University brand image
  • Emailio brand image
  • E.ON brand image
  • Kinetik Automotive brand image
  • Robert Ladkani brand image
  • SOD 64 brand image
  • Three11 brand image
  • dmarcian brand image
  • htmlBurger brand image
  • htmlBoutique brand image
  • 2create brand image