This NPM module optimizes SVGs to have a consistent (and small) border on each side and to remove extraneous tags and attributes, so that the resulting files are as small as possible. The code has been tested and refined on hundreds of real world SVGs so as to produce reliable results without distortions or to fail with a clear error if there is an unfixable problem with the source SVG.
It was created to format SVGs for the CNCF Cloud Native Landscape and has been extracted out to be usable by any application looking for reliable SVG formatting. It is a dependency of landscapeapp which now powers multiple interactive landscapes.
svg-autocrop provides the following functionality on each SVG on which it acts:
<tspan>element since the text will not render reliably if the specified fonts are not installed (instead, you can convert the text to an image so that it will reliably render anywhere)
svg-autocrop requires a transparent or a white background to work correctly.
These directions will let you manually optimize SVGs on a Mac:
Install (do these once)
terminaland hit return to open. For each of the commands below, it's easiest to copy and paste from here into the terminal window.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"to install Homebrew
brew install node
cd ~/Documents; mkdir -p svg/input; mkdir -p svg/output; open ~/Documents/svgto create an
svgfolder in your Documents folder with input and output folders inside it
npm install -g svg-autocropto install the latest version of the svg-autocrop command
inputand drag in one or more SVGs that you want to optimize.
terminaland hit return to open
cd ~/Documents/svgto go to the proper directory
npm run fix
brew update && brew upgrade && npm update -g
You can recursively autocrop multiple SVGs (while non-SVG files are ignored) with the command:
node fix --recursive ../artwork/
(Do this from the svg-autocrop directory and set the directory to where you have images to autocrop.)