개발자를 위한 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' },
  }],
});