What is SVGO?

SVGO, or Scalable Vector Graphics Optimizer, optimizes SVG files by making them smaller and more efficient without compromising on quality. It does so by removing unnecessary data like metadata, comments, hidden elements, and redundant or default attributes. This reduces file size and improves loading times.

Installing SVGO

With Trunk Check, you can automatically install and configure SVGO along with any relevant linters in a few straightforward steps. Here's how:

First, if you haven't already installed Trunk CLI, you can do so with the command below:

1curl https://get.trunk.io -fsSL | bash

Next, you can initialize Trunk from the root of your git repository:

1trunk init

This command will scan your repository and create a .trunk/trunk.yaml file that enables all linters, formatters, and security analyzers, recommended by Trunk Check. This includes SVGO if applicable to your project.

To see all available linters Trunk Check installed, simply run:

1trunk check list

If you find SVGO is not automatically enabled, you can do so by running:

1trunk check enable svgo

Alternatively, to disable SVGO run the command below. To disable other tooling applied by Trunk Check, simply replace svgo with the respective tool you're looking to disable.

1trunk check disable svgo

For more details on Trunk Check setup, see here.

Configuring SVGO

Most linters provide some mechanism to tweak their configuration, e.g. .eslintrc or Cargo.toml. Trunk is aware of all the ways individual tools are configured and supports them. This means linters you've already configured will continue to work exactly the same, just now supercharged by Trunk Check.

Like many linters with Trunk, SVGO works out of the box so there's no need to set up a custom configuration. If you're interested in other tooling outside of SVGO, check out our open-source repository to see how we define and support 90+ linters.

Running SVGO

To check your code with SVGO, run the command below. This command executes SVGO, along with any other linters Trunk Check has enabled on files you've modified. Since Trunk is git-aware, it knows what you've changed, and by adding batched execution and caching, you end up with a much faster and smoother way to run SVGO and other tools.

1trunk check

If you prefer to check files you've modified with SVGO only, run the following:

1trunk check --filter=svgo

Although we'd recommend against it depending on the size of your repository, you can check all files with SVGO by running the command below.

1trunk check --all --filter=svgo

In most scenarios, you'll want to execute against modified files. Since Trunk is git-aware, it knows what you've changed, and by adding batched execution and caching, you end up with a much faster and smoother way to run SVGO and other tools.

Updating Trunk Check & SVGO

To upgrade the Trunk CLI along with all plugins and linters in your trunk.yaml simply run:

1trunk upgrade

We highly recommend running on the latest validated versions of tools as updates will frequently include important security fixes and additional valuable checks. Trunk only auto-suggests linter upgrades to versions that we have tested and support, so you may see a slight lag time when a new linter version is released.

Upgrade will also recommend new tools that have become applicable since the last time your repository was scanned. This can be a result of using new technologies in your repository or Trunk itself adding support for more tools. If you don't like a particular recommendation, you can always run trunk check disable <linter> to teach trunk not to recommend it.

Recommended Linters to Pair with SVGO

While SVGO is an optimizer, pairing it with linters ensures your SVGs are not only efficient but clean and standard-compliant. Some recommended linters include:

• ESLint: With the right plugins, ESLint can lint inline SVGs in your JavaScript or TypeScript files.

• Stylelint: If you're using SVGs within your CSS, Stylelint can help keep your styles consistent and error-free.