Svgo-autocrop NPM

svgo-autocrop

Plugin which can be added to svgo.

Reduces viewBox to minimum possible size so no wasted transparent space around svg.

This plugin focuses on making svgs as consistent as possible. It's great for taking multiple libraries of 1000s of svgs, removing all padding, removing deprecated/redundant tags and replacing the arbitrary colors svg libraries tend to use with a set color (we recommend setting 'currentColor' so the color is inherited/easily modifiable from html/css). Tested with heaps of free svg libraries like Bootstrap Icons, Entypo+, Fontawesome and Google's Material Design Icons and more using this config file.

Example Input

<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
   <rect x="5" y="5" width="10" height="10" fill="#000"/>
</svg>

Example Output

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
   <rect x="0" y="0" width="10" height="10" fill="#000"/>
</svg>

Example Output if using {setColor: 'currentColor'} as parameters

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
   <rect x="0" y="0" width="10" height="10" fill="currentColor"/>
</svg>

Parameters

Parameter	Default	Recommended	Description
autocrop	`true`	`true`	Disable auto cropping. Useful if you only want to use the `removeClass` or `setColor` functionality described below.
includeWidthAndHeightAttributes	`undefined`	`false`	If `undefined`, only updated width/height if SVG already has width/height (this is the default). If `true`, writes width/height. If `false`, deletes width/height (which we recommend so your SVG always scales). If `true`, you should also disable svgo's default `removeViewBox` plugin and optionally enable svgo's `removeDimensions` plugin - see example-config.js below for how to do this.
padding	`undefined`	`undefined`	Either number, object defining {top, bottom, left, right} or function accepting the parameters `(viewboxNew, viewbox?, ast?, params?, info?)` where viewboxNew should be updated with the required padding. We don't recommend specifying padding on your SVG - padding should be defined in your css.
removeClass	`false`	`true` (typically can be safely set to `true`)	If `true`, removes `class` attribute if encountered. Good for Bootstrap Icons which unnecessarily include the svg name in the class.
removeStyle	`false`	`true` (typically can be safely set to `true`)	If `true`, removes `style`/`font-family` attribute if encountered. Good for lower quality that redundantly include styling that's never actually used.
removeDeprecated	`false`	`true`	If `true`, then deletes `<svg version/baseProfile>` attributes. Also deletes other non-standard/not useful attributes like `sketch:type`/`data-name`/etc.
setColor	`undefined`	`'currentColor'`	If defined, replace all colors with color specified. Usually set to `'currentColor'` so color is inherited/easily modifiable from html/css. If multiple colors are encountered, how this is handled is defined by the `setColorIssue` property.
setColorIssue	`"warn"`	`'warn'` or `'fail'`	Defines the action to take when `setColor` is set and multiple colors are encountered. If `'warn'`, then a warning is outputted to the console that your will be converted from a multicolor/multitone to a single color/monotune using the 'setColor' specified. If `'fail'`, then an error is thrown instead of being logged as a warning. If `'rollback'`, then is still autocropped but translate back to (0,0)/'removeClass'/'setColor' will be undone/rolled back. If `'ignore'`, then all colors are changed to the 'setColor' specified without any warnings/errors.
disableTranslate	`false`	`false`	Global override you generally shouldn't need - disables attempt to translate back to (0, 0) if not already (0,0), also has the effect of disabling `removeClass`, `removeDeprecated` and `setColor`. If this is set to `true`, then this plugin will only autocrop, nothing else. This can be safely left enabled, but added just in case someone needs it or whats to disable all the extra functionality this plugin supports.
disableTranslateWarning	`false`	Set to `true` if the warning becomes annoying	Disable warning when translation back to (0, 0) fails, or `removeClass`, `removeDeprecated` and `setColor` fails. If this warning is annoying you, just set this to true. FYI In many cases these warnings are only outputted on the first pass, but by the second pass the warning no longer needs to be outputted because the svgo plugins have all worked together to remove the problem.
debug	`false`	`false`	Debug option: Log old/new viewbox to console
debugWriteFiles	`false`	`false`	Debug option: If `true`, then writes "${srcSvg}.png" and "${srcSvg}.html" file to disk for easier debugging. If string, then then writes "${debugWriteFiles}.png" and "${debugWriteFiles}.html" file to disk for easier debugging. FYI Setting this to true is an easy way to convert all your SVGs to PNGs.
debugWorkerThread	`false`	`false`	Debug option: Log all worker thread communication. Warning: have to manually terminate terminate application when this is true.

Based off the above, your parameters should typically be {} or {includeWidthAndHeightAttributes: false} or something like {includeWidthAndHeightAttributes: false, removeClass: true, removeStyle: true, removeDeprecated: true, setColor: 'currentColor', setColorIssue: 'fail'}.