Skip to content

scriptex/svgo-bimi

Repository files navigation

svgo-bimi

A specialized CLI tool and SVGO plugin to optimize and validate SVGs for BIMI (Brand Indicators for Message Identification) compliance.

Installation

Install the package globally or as a development dependency:

# Install globally
npm install -g svgo-bimi

# Or install as a dev dependency
npm install --save-dev svgo-bimi

Usage

Via npx (Recommended)

You can run the tool without installing it locally by using npx:

npx svgo-bimi -f path/to/logo.svg -o ./dist

Via Local Installation

If installed globally or in your project:

svgo-bimi -f <path-to-svg> -o <output-directory>

As SVGO plugin

// svgo.config.js
import { svgoBimiPlugin } from 'svgo-bimi';

export default {
	// ...
	plugins: [
		// ...
		svgoBimiPlugin
		// ...
	]
	// ...
};

Disclaimer: Currently, SVGO doesn't support the SVG Tiny 1.2 standard so it's almost impossible to add version="1.2" to the optimized file using SVGO alone. More about this here. If you insist on using svgo-bimi as a plugin for SVGO, you must add the version="1.2" and baseProfile="tiny-ps" attributes using your own implementation.

Options

Flag Description Required
"-f, --file" Path to the source SVG file Yes
"-o, --output" Directory to save the optimized file (default: .) No

Adobe Illustrator Troubleshooting

Adobe Illustrator is the most common tool for creating BIMI logos, but its default export settings often break compliance.

  1. "My logo turned into a black blob" Cause: Illustrator often uses CSS Classes or <style> blocks. BIMI requires Inline Attributes. Fix: When exporting, set CSS Properties to Presentation Attributes instead of Style Elements.
  2. "Embedded bitmaps detected" Cause: You might have a raster image (PNG/JPG) placed inside your Illustrator file. Fix: You must use Object > Image Trace or manually redraw the shape with the Pen tool to make it a true vector.
  3. "Font tags detected" Cause: You left the brand name as editable text. Fix: Select all text and go to Type > Create Outlines (Shift + Ctrl/Cmd + O). BIMI does not support font files.
  4. Recommended Export Settings When using File > Save As > SVG: SVG Profile: SVG Tiny 1.2 Type: Convert to outline CSS Properties: Presentation Attributes Decimal Places: 2 (helps keep file size under 32KB)

BIMI Compliance Checklist

  1. Version: Must be 1.2.
  2. Base Profile: Must be tiny-ps.
  3. No Bitmaps: No .png, .jpg, or Base64 encoded images.
  4. No Scripts: Interactive elements are strictly forbidden.
  5. Aspect Ratio: Must be 1:1 (Square).
  6. Size: Files must be 32KB or smaller.

Development & Testing

This project uses the native Node.js test runner.

Start local development

npm start

Run tests

npm test

License

MIT


Connect with me:

                     

Support and sponsor my work:

About

A specialized CLI tool and SVGO plugin to optimize and validate SVGs for BIMI (Brand Indicators for Message Identification) compliance

Resources

License

Stars

Watchers

Forks

Contributors