svgo-add-viewbox

Github Build Codacy Badge Codebeat Badge CodeFactor Badge DeepScan grade Analytics

SVGO Add viewBox

An SVGO plugin to add viewBox attribute based on width and height attributes

Visitor stats

GitHub stars GitHub forks GitHub watchers GitHub followers

Code stats

GitHub code size in bytes GitHub repo size GitHub language count GitHub top language GitHub last commit

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 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
  2. Use the option to specify a custom plugin.
  3. Install this module from NPM
npm install svgo-add-viewbox --save-dev
# or
yarn add svgo-add-viewbox -D
  1. import the module in your svgo.config.js file:
import addViewBox from 'svgo-add-viewbox';
  1. In the plugins array in your svgo.config.js file add the following:
plugins: [
	// ... more plugins
	addViewBox
	// ... more plugins
];
  1. Arguments
  • overwrite - boolean - defaults to true - If set to false will preserve any existing viewBox attribute on your input SVG files.

Usage:

plugins: [
	// ... more plugins
	{
		...addViewBox,
		params: {
			overwrite: false
		}
	}
	// ... more plugins
];
  1. Execute your SVG transformation NPM script.

LICENSE

MIT


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