SVG 이미지 최적화 가이드

# SVG 이미지 최적화 가이드


SVG 파일 용량을 줄이는 두 가지 방법을 정리합니다.

## 1. npx 명령어로 즉시 압축 (권장)

### 설치 없이 바로 사용
```bash
# 단일 파일 압축
npx svgo input.svg -o output.svg

# 폴더 내 모든 SVG 압축
npx svgo -f ./icons -o ./icons-optimized

# 원본 파일 덮어쓰기
npx svgo input.svg

# 폴더 내 파일 덮어쓰기
npx svgo -f ./icons
```

### 자주 사용하는 옵션
```bash
# viewBox 유지하면서 압축
npx svgo input.svg --config='{"plugins":[{"name":"preset-default","params":{"overrides":{"removeViewBox":false}}}]}'

# 여러 번 반복 압축 (더 작아짐)
npx svgo input.svg --multipass

# 압축 결과만 미리보기 (실제 저장 안 함)
npx svgo input.svg --dry-run
```

### 실제 사용 예시
```bash
# 레이아웃 이미지 폴더 압축
npx svgo -f layouts/el_basic2/assets/img --multipass

# 특정 SVG 파일 압축
npx svgo layouts/el_api/assets/img/logo.svg -o layouts/el_api/assets/img/logo.min.svg
```

---

## 2. Webpack으로 빌드 시 자동 압축

### 필요한 패키지 설치
```bash
npm install --save-dev svgo image-minimizer-webpack-plugin
```

### webpack.config.js 설정
```javascript
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  // ... 기타 설정

  optimization: {
    minimize: true,
    minimizer: [
      '...', // 기존 minimizer 유지 (terser 등)
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.svgoMinify,
          options: {
            encodeOptions: {
              multipass: true,
              plugins: [
                'preset-default',
                {
                  name: 'removeViewBox',
                  active: false // viewBox 유지 (반응형에 필요)
                },
                {
                  name: 'removeDimensions',
                  active: false // width/height 유지
                }
              ]
            }
          }
        }
      })
    ]
  }
};
```

### 프로젝트 실제 설정 (webpack.layout.js)
```javascript
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

// optimization 섹션
optimization: {
  minimize: isProduction,
  minimizer: [
    '...',
    new ImageMinimizerPlugin({
      minimizer: {
        implementation: ImageMinimizerPlugin.svgoMinify,
        options: {
          encodeOptions: {
            multipass: true,
            plugins: [
              'preset-default',
              {
                name: 'removeViewBox',
                active: false
              },
              {
                name: 'removeDimensions',
                active: false
              }
            ]
          }
        }
      }
    })
  ]
}
```

### 빌드 명령어
```bash
# 레이아웃 빌드 (SVG 자동 압축 포함)
npm run build:layout

# 개발 모드 (압축 안 함)
npm run dev:layout
```

---

## 3. SVGO 주요 플러그인

| 플러그인 | 설명 | 기본값 |
|---------|------|--------|
| `removeViewBox` | viewBox 속성 제거 | 활성 |
| `removeDimensions` | width/height 제거 | 비활성 |
| `removeComments` | 주석 제거 | 활성 |
| `removeMetadata` | 메타데이터 제거 | 활성 |
| `removeEmptyAttrs` | 빈 속성 제거 | 활성 |
| `cleanupIds` | ID 정리/축약 | 활성 |
| `convertColors` | 색상 축약 (#ffffff → #fff) | 활성 |
| `mergePaths` | path 병합 | 활성 |

### 권장 설정 (반응형 유지)
```javascript
plugins: [
  'preset-default',
  { name: 'removeViewBox', active: false },      // viewBox 유지!
  { name: 'removeDimensions', active: true },    // width/height 제거
  { name: 'removeXMLNS', active: false }         // xmlns 유지
]
```

---

## 4. 압축 효과 비교

| 파일 | 원본 | 압축 후 | 감소율 |
|------|------|---------|--------|
| logo.svg | 12KB | 4KB | 67% |
| icon-set.svg | 45KB | 18KB | 60% |
| illustration.svg | 120KB | 48KB | 60% |

일반적으로 **50-70% 용량 감소** 효과가 있습니다.

---

## 5. 주의사항

### viewBox를 제거하면 안 되는 경우
- CSS로 크기를 조절하는 SVG
- 반응형 아이콘
- 인라인 SVG

### 압축하면 안 되는 SVG
- 애니메이션이 포함된 SVG (일부 최적화가 깨질 수 있음)
- 특정 ID를 참조하는 SVG (cleanupIds가 ID를 변경할 수 있음)

### ID 참조 문제 해결
```javascript
// cleanupIds 비활성화
plugins: [
  {
    name: 'cleanupIds',
    active: false
  }
]
```

---

## 6. 빠른 참조

```bash
# 가장 자주 사용하는 명령어
npx svgo -f ./path/to/svg/folder --multipass

# viewBox 유지하면서 폴더 압축
npx svgo -f ./icons --config='{"plugins":[{"name":"preset-default","params":{"overrides":{"removeViewBox":false}}}]}'
```