Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 9 days 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 (over 3 years ago)
Default Branch: master
Last Pushed: 2024-04-28T05:34:02.000Z (6 months ago)
Last Synced: 2024-05-02T06:13:52.010Z (6 months 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

        [![Github Build](https://github.com/scriptex/svgo-add-viewbox/workflows/Build/badge.svg)](https://github.com/scriptex/svgo-add-viewbox/actions?query=workflow%3ABuild)

[![Codacy Badge](https://app.codacy.com/project/badge/Grade/34d3d75710534dc6a38c3584a1dcd068)](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)

[![Codebeat Badge](https://codebeat.co/badges/d765a4c8-2c0e-44f2-89c3-fa364fdc14e6)](https://codebeat.co/projects/github-com-scriptex-svgo-add-viewbox-master)

[![CodeFactor Badge](https://www.codefactor.io/repository/github/scriptex/svgo-add-viewbox/badge)](https://www.codefactor.io/repository/github/scriptex/svgo-add-viewbox)

[![DeepScan grade](https://deepscan.io/api/teams/3574/projects/5257/branches/40799/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3574&pid=5257&bid=40799)

[![Analytics](https://ga-beacon.atanas.info/api/analytics?account=UA-83446952-1&page=github.com/scriptex/svgo-add-viewbox&pixel)](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

![GitHub stars](https://img.shields.io/github/stars/scriptex/svgo-add-viewbox?style=social)

![GitHub forks](https://img.shields.io/github/forks/scriptex/svgo-add-viewbox?style=social)

![GitHub watchers](https://img.shields.io/github/watchers/scriptex/svgo-add-viewbox?style=social)

![GitHub followers](https://img.shields.io/github/followers/scriptex?style=social)

## Code stats

![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/scriptex/svgo-add-viewbox)

![GitHub repo size](https://img.shields.io/github/repo-size/scriptex/svgo-add-viewbox?style=plastic)

![GitHub language count](https://img.shields.io/github/languages/count/scriptex/svgo-add-viewbox?style=plastic)

![GitHub top language](https://img.shields.io/github/languages/top/scriptex/svgo-add-viewbox?style=plastic)

![GitHub last commit](https://img.shields.io/github/last-commit/scriptex/svgo-add-viewbox?style=plastic)

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: