https://github.com/scriptex/svgo-viewbox

Add viewBox attribute to your SVGs and then optimize them with SVGO
https://github.com/scriptex/svgo-viewbox

svg-images svg-optimizer svgo viewbox

Last synced: 10 months ago
JSON representation

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

Host: GitHub
URL: https://github.com/scriptex/svgo-viewbox
Owner: scriptex
License: mit
Created: 2020-10-26T13:42:24.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2024-04-22T10:13:10.000Z (over 1 year ago)
Last Synced: 2024-05-02T06:13:52.164Z (over 1 year ago)
Topics: svg-images, svg-optimizer, svgo, viewbox
Language: JavaScript
Homepage: https://atanas.info/portfolio/open-source/svgo-viewbox
Size: 300 KB
Stars: 6
Watchers: 3
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

[![GitHub release](https://img.shields.io/github/release/scriptex/svgo-viewbox.svg)](https://github.com/scriptex/svgo-viewbox/releases/latest)
[![GitHub issues](https://img.shields.io/github/issues/scriptex/svgo-viewbox.svg)](https://github.com/scriptex/svgo-viewbox/issues)
[![GitHub last commit](https://img.shields.io/github/last-commit/scriptex/svgo-viewbox.svg)](https://github.com/scriptex/svgo-viewbox/commits/master)
[![Build Status](https://travis-ci.com/scriptex/svgo-viewbox.svg?branch=master)](https://travis-ci.com/scriptex/svgo-viewbox)
[![npm](https://img.shields.io/npm/dt/svgo-viewbox.svg)](https://www.npmjs.com/package/svgo-viewbox)
[![npm](https://img.shields.io/npm/v/svgo-viewbox.svg)](https://www.npmjs.com/package/svgo-viewbox)
[![Analytics](https://ga-beacon-361907.ew.r.appspot.com/UA-83446952-1/github.com/scriptex/svgo-viewbox/README.md)](https://github.com/scriptex/svgo-viewbox/)

# 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 or to a single SVG file.

## 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

```sh
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-viewbox
```

### As an NPM script

First install the module as a development dependency

```sh
npm i svgo-viewbox --save-dev

# or

yarn add svgo-viewbox -D
```

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

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

### From the command line

First install the module globally

```sh
npm i -g svgo-viewbox

# or

yarn global add svgo-viewbox
```