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:
- Autocrops by temporarily converting to a bitmap and scanning to find the bounding rectangle of non-transparent pixels
- Adds a viewbox so that the SVG will not be distorted if placed in a rectangle with a different ratio
- Uses aggressive settings of svgo to remove a large amount of useless or redundant information and runs 5 times to eliminate pointless nested groups
- Standardizes the SVG header to the minimum necessary to reliably render
- Fails with an error if the SVG includes a raster image (such as a PNG or JPEG), as these do not scale seamlessly and needlessly add to the file size
- Fails with an error on SVGs that contain a
<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)
- Optionally adds a title since that is displayed as the title in the browser tab
svg-autocrop requires a transparent or a white background to work correctly.
Manually Optimizing SVGs
These directions will let you manually optimize SVGs on a Mac:
Install (do these once)
- Type Cmd-space, enter
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
- In Finder, go to
inputand drag in one or more SVGs that you want to optimize.
- If terminal is not already running, type Cmd-space, enter
terminaland hit return to open
cd ~/Documents/svgto go to the proper directory
npm run fix
- If no errors print out, you should see the optimized SVGs in an
- Double-click on each SVG so that it opens in Chrome. Manually verify that the SVG does not look any different (except cropped)
- Every month or so, you should update the software:
brew update && brew upgrade && npm update -g
Debugging the project
- npm test will run a full check on all the images in the fixture folder
- CAPTURE=1 npm test will run an svg-autocrop on all images in the fixture folder and then save results
- MATCH=kubernetes npm test will run a check only on files matching kubernetes in the
- CAPTURE=1 MATCH=kubernetes npm test will run an svg-autocrop only on files matching kubernetes in the fixture folder
- npm fix will convert svg images in the