svg-autocrop

svg-autocrop

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 <text> or <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.

For more information on recommended rules for collecting logos, please see the guidelines for the CNCF Cloud Native Landscape.

svg-autocrop has been developed by Andrey Kozlov and Dan Kohn of CNCF.

Manually Optimizing SVGs

These directions will let you manually optimize SVGs on a Mac:

Install (do these once)

1. Type Cmd-space, enter terminal and hit return to open. For each of the commands below, it's easiest to copy and paste from here into the terminal window.
2. Enter: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" to install Homebrew
3. Enter: brew install node
4. Type cd ~/Documents; mkdir -p svg/input; mkdir -p svg/output; open ~/Documents/svg to create an svg folder in your Documents folder with input and output folders inside it
5. Enter: npm install -g svg-autocrop to install the latest version of the svg-autocrop command

Process SVGs

1. In Finder, go to Documents:svg:input and drag in one or more SVGs that you want to optimize.
2. If terminal is not already running, type Cmd-space, enter terminal and hit return to open
3. Type cd ~/Documents/svg to go to the proper directory
4. Type npm run fix
5. If no errors print out, you should see the optimized SVGs in an output folder
6. Double-click on each SVG so that it opens in Chrome. Manually verify that the SVG does not look any different (except cropped)

Update

1. Every month or so, you should update the software: brew update && brew upgrade && npm update -g

Autocropping multiple SVGs

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.)

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 images folder

Vulnerability reporting

Please open an issue or, for sensitive information, email [e-mail].