https://github.com/scriptex/svgo-add-viewbox
SVGO plugin which adds "viewBox" attribute based on "width" and "height" attributes
https://github.com/scriptex/svgo-add-viewbox
svg-transform svgo svgo-plugin viewbox
Last synced: 12 months ago
JSON representation
SVGO plugin which adds "viewBox" attribute based on "width" and "height" attributes
- Host: GitHub
- URL: https://github.com/scriptex/svgo-add-viewbox
- Owner: scriptex
- License: mit
- Created: 2021-06-03T04:35:37.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-04-28T05:34:02.000Z (almost 2 years ago)
- Last Synced: 2024-05-02T06:13:52.010Z (almost 2 years ago)
- Topics: svg-transform, svgo, svgo-plugin, viewbox
- Language: JavaScript
- Homepage: https://atanas.info/portfolio/open-source/svgo-add-viewbox
- Size: 202 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
[](https://github.com/scriptex/svgo-add-viewbox/actions?query=workflow%3ABuild)
[](https://www.codacy.com/gh/scriptex/svgo-add-viewbox/dashboard?utm_source=github.com&utm_medium=referral&utm_content=scriptex/svgo-add-viewbox&utm_campaign=Badge_Grade)
[](https://codebeat.co/projects/github-com-scriptex-svgo-add-viewbox-master)
[](https://www.codefactor.io/repository/github/scriptex/svgo-add-viewbox)
[](https://deepscan.io/dashboard#view=project&tid=3574&pid=5257&bid=40799)
[](https://github.com/scriptex/svgo-add-viewbox/)
# SVGO Add viewBox
> An SVGO plugin to add `viewBox` attribute based on `width` and `height` attributes
## Visitor stats
## Code stats
This plugin adds the `viewBox` attribute to your SVGs based on the `width` and `height` attributes. The difference between this plugin and the built-in [`removeDimensions`](https://github.com/svg/svgo/blob/master/plugins/removeDimensions.js) plugin is that `svgo-add-viewbox` does not remove the `width` and `height` of your SVGs.
In order to use this plugin correctly, your SVGs should have their `width` and `height` attributes specified.
## Usage
**v2.x.x or 3.x.x of this plugin should be used with SVGO v3 and above.**
**v1.x.x of this plugin should be used with SVGO v2.**
1. Create a `svgo.config.js` file following the [official configuration guide](https://github.com/svg/svgo#configuration)
2. Use the option to specify a custom plugin.
3. Install this module from NPM
```sh
npm install svgo-add-viewbox --save-dev
# or
yarn add svgo-add-viewbox -D
```
4. `import` the module in your `svgo.config.js` file:
```javascript
import addViewBox from 'svgo-add-viewbox';
```
5. In the `plugins` array in your `svgo.config.js` file add the following:
```javascript
plugins: [
// ... more plugins
addViewBox
// ... more plugins
];
```
6. Arguments
- `overwrite` - boolean - defaults to `true` - If set to `false` will preserve any existing `viewBox` attribute on your input SVG files.
Usage:
```javascript
plugins: [
// ... more plugins
{
...addViewBox,
params: {
overwrite: false
}
}
// ... more plugins
];
```
7. Execute your SVG transformation NPM script.
## LICENSE
MIT
---
Connect with me:
---
Support and sponsor my work:
