How to use the command svgo (with examples)

SVGO is a Node.js-based tool used for optimizing Scalable Vector Graphics (SVG) files. It applies a series of transformation rules (plugins) to reduce the file size of SVG files without affecting their visual quality. This article aims to illustrate various use cases of the svgo command.

Use case 1: Optimize a file using the default plugins

Code:

svgo test.svg

Motivation: In this use case, we optimize a single SVG file named “test.svg” using the default set of plugins provided by SVGO. This will overwrite the original file with the optimized version.

Explanation:

• svgo is the command to run the SVGO tool.
• test.svg is the input SVG file to be optimized.

Example output:

Optimized test.svg (original file is overwritten).

Use case 2: Optimize a file and save the result to another file

Code:

svgo test.svg -o test.min.svg

Motivation: In this use case, we want to preserve the original SVG file and create a new optimized SVG file with a different name. This is useful when we want to keep backups of both the original and optimized files.

Explanation:

• svgo is the command to run the SVGO tool.
• test.svg is the input SVG file to be optimized.
• -o test.min.svg specifies the output file path and name for the optimized SVG file.

Example output:

test.min.svg created as an optimized version of test.svg.

Use case 3: Optimize all SVG files within a directory

Code:

svgo -f path/to/directory/with/svg/files

Motivation: In this use case, we optimize all SVG files within a specified directory. This is useful when we have a collection of SVG files that need optimization without altering their file names.

Explanation:

• svgo is the command to run the SVGO tool.
• -f path/to/directory/with/svg/files specifies the directory path containing the SVG files to be optimized.

Example output:

All SVG files within the directory path/to/directory/with/svg/files have been optimized.

Use case 4: Optimize all SVG files within a directory and save the resulting files to another directory

Code:

svgo -f path/to/input/directory -o path/to/output/directory

Motivation: In this use case, we optimize all SVG files within a specified input directory and save the resulting optimized files to another output directory. This allows us to keep the original files intact and store the optimized versions separately.

Explanation:

• svgo is the command to run the SVGO tool.
• -f path/to/input/directory specifies the directory path containing the SVG files to be optimized.
• -o path/to/output/directory specifies the directory path where the optimized SVG files will be saved.

Example output:

All SVG files within the input directory have been optimized and saved to the output directory.

Use case 5: Optimize SVG content passed from another command, and save the result to a file

Code:

cat test.svg | svgo -i - -o test.min.svg

Motivation: In this use case, we optimize the SVG content passed from another command, such as the cat command. This is useful when we want to optimize SVG content generated dynamically and save it to a file.

Explanation:

• cat test.svg simply outputs the content of the test.svg file.
• | is the pipe operator to pass the output of the previous command as input to the next command.
• svgo -i - reads the SVG content from the standard input (piped input).
• -o test.min.svg specifies the output file path and name for the optimized SVG file.

Example output:

test.min.svg created as an optimized version of the SVG content passed from another command.

Use case 6: Optimize a file and print out the result

Code:

svgo test.svg -o -

Motivation: In this use case, we want to optimize a single SVG file and print out the result directly on the console. This is useful when we need to view the optimized content without saving it to a file.

Explanation:

• svgo is the command to run the SVGO tool.
• test.svg is the input SVG file to be optimized.
• -o - specifies that the optimized SVG content should be printed on the console.

Example output:

Optimized version of test.svg printed on the console.

Use case 7: Show available plugins

Code:

svgo --show-plugins

Motivation: In this use case, we want to view the list of available plugins that can be used with SVGO. This is useful when we want to explore and customize the optimization process by enabling or disabling certain plugins.

Explanation:

• svgo is the command to run the SVGO tool.
• --show-plugins displays the list of available plugins provided by SVGO.

Example output:

Available plugins:
- plugin1
- plugin2
- plugin3
...

Conclusion:

The svgo command provides a range of options to optimize SVG files. Whether we need to optimize a single file, multiple files within a directory, or process SVG content from a command, SVGO offers flexibility and control over the optimization process. By enabling or disabling specific plugins, we can fine-tune the optimization to meet our specific requirements.