Install SVGO With Reasonable Defaults, Part Two

Thu, 06 Apr 2023 11:04:19 -0400

We’re back with another SVGO configuration you’ll probably want: disabling ID minification.

SVGO has a default plugin called cleanupIds that takes every ID in the SVG (e.g. clip0_506_1332) and minifies it to a. This works okay until there are two different SVG’s on the page. When that happens, the ID’s become invalid and conflicting HTML and your images don’t compose correctly.

Disable this in the SVGO config file:

// svgo.config.js

module.exports = {
 plugins: [
 {
 name: 'preset-default',
 params: {
 overrides: {
 cleanupIds: false,
 },
 },
 },
 ],
};

Install SVGO With Reasonable Defaults

Wed, 22 Mar 2023 08:43:18 -0400

A project I’m working on uses SVGO to clean and minify SVG files. There’s one problem: SVGO by default removes the viewBox attribute, which comes embedded in the SVG’s I receive and have stylistic meaning in my codebase.

You can override this default by using an SVGO config file:

// svgo.config.js
module.exports = {
 plugins: [
 {
 name: 'preset-default',
 params: {
 overrides: {
 removeViewBox: false,
 },
 },
 },
 ],
};

Applied like so:

Svg on Jake Worth

Install SVGO With Reasonable Defaults, Part Two

Install SVGO With Reasonable Defaults