svgo-viewbox

Add viewBox attribute to your SVGs and then optimize them with SVGO

Usage no npm install needed!

<script type="module">
  import svgoViewbox from 'https://cdn.skypack.dev/svgo-viewbox';
</script>

README

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

svgo-viewBox

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.

Dependencies

  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.

Usage

svgo-viewbox --help

#	Usage
#	  $ svgo-viewbox --arg1 --arg2
#
#	Options
#	  --input, -i		path to folder which contains SVG files
#	  --svgo-file, -f 	path to SVGO configuration file in JS format (https://github.com/svg/svgo#configuration)
#
#	Examples
#	  $ svgo-viewbox --input ./assets/images/svg --svgo-file ./svgo.config.js
#     $ svgo-viewbox --i ./assets/images/svg

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

Support this project

Tweet Donate Become a Patron Buy Me A Coffee

LICENSE

MIT