Skip to content
@staticbolt/core

Svgo Plugin

A staticbolt plugin that optimizes SVG files using svgo. It handles both inline <svg> tags in HTML and standalone SVG files on disk. It only runs during production builds.

For SVGs inlined inside CSS, use a PostCSS plugin like cssnano instead.

Installation

The plugin ships as part of @staticbolt/core. You do not need to install anything else.

Usage

In your .staticbolt.ts configuration file:

import { defineConfig } from "@staticbolt/core";
import { htmlSvgoPlugin } from "@staticbolt/core/plugins";


export default defineConfig({
  plugins: [htmlSvgoPlugin()],
});

By default the plugin optimizes all <svg> tags found in HTML and all .svg files under sources/assets/.

Plugin Options

include

  • Type: string[]
  • Default: ["sources/assets/**/*.{svg,svga,svgz}"]

Glob patterns for SVG files to optimize and write to the output directory.

exclude

  • Type: string[]
  • Default: []

Glob patterns for SVG files to skip during optimization.

optimizeInHtml

  • Type: boolean
  • Default: true

When true, inline <svg> tags in HTML files are optimized in place.

svgoConfig

  • Type: Config

Custom svgo configuration. When you leave it unset, the plugin uses a default configuration with multipass enabled and the preset-default plugin. That default keeps element IDs, unknown attributes, and hidden elements.

htmlSvgoPlugin({
  svgoConfig: {
    multipass: true,
    plugins: ["preset-default"],
  },
});