開発者のためのSVG最適化：SVGO、ビルドパイプライン、CI/CD統合

# CLI -- 単発ファイルとCIスクリプト
npx svgo input.svg -o output.svg --config svgo.config.js

# ディレクトリを一括最適化
npx svgo -f ./src/icons -o ./dist/icons --config svgo.config.js

// Node API -- ビルドパイプライン統合
import { optimize } from \'svgo\';
import { readFileSync, writeFileSync } from \'fs\';

const result = optimize(readFileSync(\'icon.svg\', \'utf8\'), {
  multipass: true,
  plugins: [
    \'preset-default\',
    \'removeDimensions\',
    { name: \'removeAttrs\', params: { attrs: \'(data-.*|class)\' } },
  ],
});
writeFileSync(\'icon.opt.svg\', result.data);

module.exports = {
  multipass: true,
  plugins: [
    {
      name: \'preset-default\',
      params: {
        overrides: {
          removeViewBox: false,
          convertPathData: { floatPrecision: 2, transformPrecision: 3 },
          mergePaths: { force: true },
        },
      },
    },
    \'removeDimensions\',
    \'sortAttrs\',
    { name: \'removeAttrs\', params: { attrs: [\'xml:space\', \'data-name\'] } },
  ],
};

<!-- 最適化前：680バイトの無駄 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" id="Layer_1" x="0px" y="0px" width="200px" height="200px"
     viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;"
     xml:space="preserve">
  <!-- Generator: Adobe Illustrator 28.0 -->
  <metadata><rdf:RDF><rdf:Description/></rdf:RDF></metadata>
  <defs><linearGradient id="unused_grad">...</linearGradient></defs>

<!-- 最適化後：クリーンで本番対応 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">

<!-- 最適化前：12桁の小数精度 -->
<path d="M10.123456789012 20.987654321098 C15.111111111111 25.222222222222
  30.333333333333 40.444444444444 45.555555555555 50.666666666666"/>

<!-- 最適化後：2桁の小数精度、視覚的に同一 -->
<path d="M10.12 20.99C15.11 25.22 30.33 40.44 45.56 50.67"/>

<!-- インラインスタイル：肥大化するが自己完結型 -->
<path style="fill:#ff0000;stroke:#000;stroke-width:2" d="..."/>
<path style="fill:#ff0000;stroke:#000;stroke-width:2" d="..."/>

<!-- 統合された<style>：より小さく、自己完結型 -->
<style>.a{fill:#f00;stroke:#000;stroke-width:2}</style>
<path class="a" d="..."/>
<path class="a" d="..."/>

<!-- プレゼンテーションattribute：最小、インラインSVGに最適 -->
<path fill="#f00" stroke="#000" stroke-width="2" d="..."/>

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
}, { rootMargin: \'200px\' });

document.querySelectorAll(\'img[data-src$=".svg"]\' ).forEach(img => observer.observe(img));

import svgLoader from \'vite-svg-loader\';
export default defineConfig({
  plugins: [svgLoader({
    svgoConfig: { multipass: true, plugins: [\'preset-default\', \'removeDimensions\'] },
  })],
});

{ test: /\\.svg$/, use: [
  { loader: \'svg-url-loader\', options: { limit: 8192 } },
  { loader: \'svgo-loader\', options: { configFile: \'./svgo.config.js\' } },
]}

config.module.rules.push({
  test: /\\.svg$/,
  use: [\'@svgr/webpack\', {
    loader: \'svgo-loader\',
    options: { configFile: \'./svgo.config.js\' },
  }],
});