How to Use the Command 'svgo' (with Examples)

Scalable Vector Graphics (SVG) files are a popular choice for web graphics due to their scalability and clarity at any size. However, these files can sometimes be bloated with unnecessary metadata and elements that increase file size without adding any visual value. SVG Optimizer, or ‘svgo’, is a tool written in Node.js designed to streamline SVG files by applying a series of transformation rules or plugins. These plugins can be customized to fit specific optimization needs, resulting in smaller, more efficient SVG files. Here we will explore various use cases for ‘svgo’ and provide detailed examples for each scenario.

Optimize a file using the default plugins (overwrites the original file)

Code:

svgo test.svg

Motivation:

When dealing with SVG files that are larger than necessary, optimizing them can significantly reduce their file size, which leads to faster loading times and better performance on the web. For someone looking to quickly and effortlessly optimize a single SVG file, this command is ideal because it uses default settings to overwrite the original file directly, without any need for additional specifications.

Explanation:

• svgo: Calls the SVG Optimizer tool.
• test.svg: Represents the input file that you want to optimize. This command uses the default set of plugins predefined in SVGO and overwrites the original SVG file with the optimized version.

Example output:

The original test.svg file is overwritten with a smaller, optimized version.

Optimize a file and save the result to another file

Code:

svgo test.svg -o test.min.svg

Motivation:

In scenarios where keeping the original SVG file is important, saving the optimized version to a new file is essential. It allows you to retain the unoptimized file for future reference or editing while working with a more efficient version for your web content.

Explanation:

• svgo: Invokes the SVG Optimizer.
• test.svg: The original SVG file that you want to optimize.
• -o test.min.svg: The -o flag specifies the output file. This tells ‘svgo’ to save the optimized SVG as test.min.svg, preserving the original file.

Example output:

A new file named test.min.svg is created, containing the optimized SVG content.

Optimize all SVG files within a directory (overwrites the original files)

Code:

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

Motivation:

When dealing with a batch of SVG files, optimizing each one manually can be time-consuming. Automating this process to optimize all files contained within a directory saves time and ensures consistency across all SVG assets, which is particularly useful for web developers and designers maintaining a large SVG library.

Explanation:

• svgo: Calls the SVG Optimizer.
• -f path/to/directory/with/svg/files: The -f flag indicates the directory containing the SVG files. All SVG files in this directory will be optimized in place, meaning the original files will be replaced with their optimized versions.

Example output:

Each SVG file within the specified directory is optimized, replacing the original files.

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:

It is often beneficial to organize workflows to ensure original assets are not lost. By specifying different input and output directories, you ensure that the original SVGs remain untouched while their optimized counterparts are saved separately. This is particularly advantageous in collaborative environments or when backups of the original files must be maintained for audit or rollback purposes.

Explanation:

• svgo: Invokes the SVG Optimizer tool.
• -f path/to/input/directory: Directs svgo to process all SVG files within this input directory.
• -o path/to/output/directory: The -o specifies the output directory where optimized SVG files will be saved, distinct from the original files.

Example output:

Optimized SVG files are saved in the specified output directory, leaving the originals intact in the input directory.

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:

This technique is useful when SVG content is generated or modified in a pipeline and needs immediate optimization without creating a separate temporary file. It allows seamless integration of svgo into custom scripts and workflows, which can be particularly powerful when handling dynamically generated SVGs.

Explanation:

• cat test.svg: Outputs the content of test.svg via standard output, which is passed through a pipe (|) to the next command.
• svgo -i -: The -i - option directs svgo to read from standard input, allowing piped data to be optimized.
• -o test.min.svg: The -o flag determines the name of the output file where the optimized content will be saved.

Example output:

An optimized version of the piped SVG content is saved in test.min.svg.

Optimize a file and print out the result

Code:

svgo test.svg -o -

Motivation:

Sometimes, it’s useful to preview the optimizations without affecting the original file. Printing the optimized SVG content to the console gives immediate visibility into the alterations made by svgo, providing feedback for further refinement of optimization settings or plugins without committing these changes to disk.

Explanation:

• svgo: Launches the SVG Optimizer.
• test.svg: Input SVG file for optimization.
• -o -: Outputs the optimized content to the terminal (standard output) instead of a file, using the - as a placeholder to signify the terminal.

Example output:

Optimized SVG data is displayed in the terminal window, showcasing the reduced and simplified SVG code.

Show available plugins

Code:

svgo --show-plugins

Motivation:

Understanding the available plugins is crucial for advanced users who want to fine-tune the optimization process to suit specific needs. Different projects may benefit from different sets of optimization rules, and displaying the available plugins helps in constructing a custom configuration to optimize SVG files more effectively.

Explanation:

• svgo: Runs the SVG Optimizer.
• --show-plugins: Provides a list of all plugins available within svgo, including those enabled by default and those that can be switched on for more specific transformations.

Example output:

A detailed list of plugins is printed, indicating which are currently active by default, along with descriptions of each plugin’s functionality and purpose.

Conclusion:

The versatility of svgo is evident across different scenarios, from single-file optimization to comprehensive directory processing. The tool provides significant flexibility not only in reducing file sizes but also in optimizing SVG files according to particular needs with the help of customizable plugins. Whether you are managing a large batch of SVG files or integrating optimization into a dynamic workflow, svgo represents a powerful addition to any developer or designer’s toolkit to ensure efficient and manageable web graphics.