babel-plugin-minify-svg-matrix

A Babel plugin that minifies SVG filter matrix values in JSX at build time. It removes unnecessary whitespace, strips trailing zeros, and normalizes number formatting — shrinking the output without affecting how the SVG renders.

The Problem

When writing SVG filters, developers often format matrix values for readability with multi-line alignment, indentation, and clean decimal formatting:

<feColorMatrix
  type="matrix"
  values="
    0.33 0.33 0.33 0 0
    0.33 0.33 0.33 0 0
    0.33 0.33 0.33 0 0
    0    0    0    1 0
  "
/>

Bundlers and minification tools see these values as plain strings and leave them untouched. All that whitespace ships to the client as dead weight.

The Solution

This plugin transforms those matrix values into compact single-line strings:

<feColorMatrix
  type="matrix"
  values=".33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 1 0"
/>

Optimizations applied

| Rule | Before | After | |------|--------|-------| | Collapse whitespace to single spaces | 0.33   0.33  0.33 | 0.33 0.33 0.33 | | Strip leading integer zeros | 0.33 | .33 | | Strip trailing decimal zeros | 1.5000 | 1.5 | | Remove integer-only .0 suffix | 18.000 | 18 | | Strip leading zeros in integers | 0089 | 89 |

Supported SVG elements and attributes

| Element | Attribute | |---------|-----------| | <feColorMatrix> | values | | <feConvolveMatrix> | kernelMatrix | | <feFuncR> | tableValues | | <feFuncG> | tableValues | | <feFuncB> | tableValues | | <feFuncA> | tableValues |

Production-only

The plugin is disabled when NODE_ENV is "development", so your source code remains readable during development. It activates automatically in production builds.

Installation

# npm
npm install --save-dev babel-plugin-minify-svg-matrix

# yarn
yarn add --dev babel-plugin-minify-svg-matrix

# pnpm
pnpm add --save-dev babel-plugin-minify-svg-matrix

Usage

Add the plugin to your Babel configuration (the plugin is zero-config):

{
  "plugins": ["babel-plugin-minify-svg-matrix"]
}

Works with React Compiler

The plugin is compatible with babel-plugin-react-compiler. It processes JSX before or after the React compiler pass, so order does not matter.

License

MIT