# SVG 최적화

## GUI 도구

### SVGOMG

[SVGO](https://github.com/svg/svgo)의 [GUI 온라인 서비스](https://jakearchibald.github.io/svgomg/)입니다. 사용법은 간단합니다. 좌측 사이드바 메뉴의 `Open SVG` 항목을 눌러 사용자 로컬 컴퓨터에서 SVG 파일을 업로드 하거나, `Paste Markup` 항목을 눌러 복사한 SVG 코드를 붙여넣고 우측 사이드바 메뉴에서 설정할 옵션을 체크/해제합니다. 최종적으로 최적화된 코드를 클립보드에 복사 하거나, 파일로 저장할 수 있습니다.

![SVGOMG - SVGO's Missing GUI](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESJh8eeETUZb8v4hx2%2F-LESQfAUL4kGyj1xvepu%2Fimage.png?alt=media\&token=5fdb5d04-3ec1-4e0f-a480-172382f1ea0a)

#### 로컬 개발 환경

보안을 이유로 온라인 환경을 사용할 수 없는 사용자라면 로컬 컴퓨터 환경에서도 사용할 수 있습니다. [svgomg GitHub 저장소](https://github.com/jakearchibald/svgomg)를 Fork 한 후 `git clone` 명령을 실행해 로컬 컴퓨터로 자료를 다운로드 받습니다.

개발에 필요한 의존 모듈을 로컬 컴퓨터에 설치합니다.

```bash
$ npm install
```

개발 서버를 실행한 후, 사용합니다.

```bash
$ npm run serve
```

### SVGO Compressor

[SVGO Compressor](https://www.sketchapp.com/extensions/plugins/svgo-compressor/)는 [Sketch](https://www.sketchapp.com/) 디자인 도구의 플러그인 입니다. 플러그인 설치 후, `Preferences > Plugins` 메뉴에서 `SVGO Compressor` 항목을 체크하면 SVG 에셋을 내보낼 때 자동 처리됩니다. 필요하다면 `svgo.json` 파일을 수정해 사용자 정의 옵션 설정도 가능합니다.

![SVGO Compressor for Sketch App](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESJh8eeETUZb8v4hx2%2F-LESTN7_L8Hiryvxbkvc%2Fimage.png?alt=media\&token=c4de2e36-9ba8-40f8-bedb-9ee2c532219d)

## CLI 도구

### SVGO

[SVGO](https://github.com/svg/svgo)(SVG Optimizer)는 SVG 벡터 그래픽 파일을 최적화하기위한 Nodejs 기반 도구입니다.

다양한 그래픽 디자인 도구에서 출력된 SVG 파일은 대부분 불필요한 정보가 많이 포함되어 있습니다. SVG 렌더링 결과에 영향을 미치지 않는 디자인 도구의 메타 데이터, 주석, 숨겨지거나 사용 되지 않는 요소 또는 최적이 아닌 값 등등을 안전하게 제거하거나 변환 할 수 있습니다.

SVGO의 작동 원리가 궁금하다면 [hot it works(번역)](https://github.com/svg/svgo/blob/master/docs/how-it-works/ko.md) 글을 읽어보세요.

#### 설치

NPM 설치 명령을 사용하여 svgo 개발 모듈을 전역에 설치합니다.

```bash
$ npm install -g svgo
```

#### 사용법

```bash
# 단일 파일 최적화
$ svgo test.svg

# 확장자가 .svg인 모든 파일 최적화
$ svgo *.svg

# 최적화 된 출력 파일 생성 
$ svgo test.svg -o test.min.svg

# 디렉토리 파일들 최적화
$ svgo -f <디렉토리-경로>

# 디렉토리 인풋 ➜ 아웃풋 생성
$ svgo -f <디렉토리-INPUT> -o  <디렉토리-OUTPUT>
```

```bash
Usage:
  svgo [OPTIONS] [ARGS]

Options:
  -h, --help : Help
  -v, --version : Version
  -i INPUT, --input=INPUT : Input file, "-" for STDIN
  -s STRING, --string=STRING : Input SVG data string
  -f FOLDER, --folder=FOLDER : Input folder, optimize and rewrite all *.svg files
  -o OUTPUT, --output=OUTPUT : Output file or folder (by default the same as the input), "-" for STDOUT
  -p PRECISION, --precision=PRECISION : Set number of digits in the fractional part, overrides plugins params
  --config=CONFIG : Config file or JSON string to extend or replace default
  --disable=PLUGIN : Disable plugin by name, "--disable={PLUGIN1,PLUGIN2}" for multiple plugins
  --enable=PLUGIN : Enable plugin by name, "--enable={PLUGIN3,PLUGIN4}" for multiple plugins
  --datauri=DATAURI : Output as Data URI string (base64, URI encoded or unencoded)
  --multipass : Enable multipass
  --pretty : Make SVG pretty printed
  --indent=INDENT : Indent number when pretty printing SVGs
  -q, --quiet : Only output error messages, not regular status messages
  --show-plugins : Show available plugins and exit

Arguments:
  INPUT : Alias to --input
```

#### 플러그인

SVGO은 플러그인 기반 아키텍처로 거의 모든 최적화가 별도의 플러그인 입니다.\
※ 접근성, 반응형 웹 디자인과 관련된 설정(`*`)은 사용하면 안됩니다.

| 플러그인                                                                                                                | 설명                                                                       |
| ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| [cleanupAttrs](https://github.com/svg/svgo/blob/master/plugins/cleanupAttrs.js)                                     | 줄 바꿈, 후행, 반복 공간 정리 속성                                                    |
| [removeDoctype](https://github.com/svg/svgo/blob/master/plugins/removeDoctype.js)                                   | `doctype` 선언 제거                                                          |
| [removeXMLProcInst](https://github.com/svg/svgo/blob/master/plugins/removeXMLProcInst.js)                           | XML 프로세싱 인스트럭션 제거                                                        |
| [removeComments](https://github.com/svg/svgo/blob/master/plugins/removeComments.js)                                 | 주석 삭제                                                                    |
| [removeMetadata](https://github.com/svg/svgo/blob/master/plugins/removeMetadata.js)                                 | `<metadata>` 제거                                                          |
| [removeTitle](https://github.com/svg/svgo/blob/master/plugins/removeTitle.js)                                       | `<title>` 제거 **\***                                                      |
| [removeDesc](https://github.com/svg/svgo/blob/master/plugins/removeDesc.js)                                         | `<desc>` 제거 **\***                                                       |
| [removeUselessDefs](https://github.com/svg/svgo/blob/master/plugins/removeUselessDefs.js)                           | `<defs>` 내부에 사용되지 않는 요소의 `id` 제거                                         |
| [removeXMLNS](https://github.com/svg/svgo/blob/master/plugins/removeXMLNS.js)                                       | `xmlns`속성 제거                                                             |
| [removeEditorsNSData](https://github.com/svg/svgo/blob/master/plugins/removeEditorsNSData.js)                       | 에디터 네임스페이스, 요소/속성 제거                                                     |
| [removeEmptyAttrs](https://github.com/svg/svgo/blob/master/plugins/removeEmptyAttrs.js)                             | 속성 값이 빈 경우 제거                                                            |
| [removeHiddenElems](https://github.com/svg/svgo/blob/master/plugins/removeHiddenElems.js)                           | 숨겨진 요소 제거                                                                |
| [removeEmptyText](https://github.com/svg/svgo/blob/master/plugins/removeEmptyText.js)                               | 빈 텍스트 요소 제거                                                              |
| [removeEmptyContainers](https://github.com/svg/svgo/blob/master/plugins/removeEmptyContainers.js)                   | 빈 컨테이너 요소 제거                                                             |
| [removeViewBox](https://github.com/svg/svgo/blob/master/plugins/removeViewBox.js)                                   | `viewBox` 속성 제거 **\***                                                   |
| [cleanupEnableBackground](https://github.com/svg/svgo/blob/master/plugins/cleanupEnableBackground.js)               | `enable-background`속성 제거                                                 |
| [minifyStyles](https://github.com/svg/svgo/blob/master/plugins/minifyStyles.js)                                     | [CSSO](https://github.com/css/csso)를 이용하여 \<style> 콘텐츠 최적화               |
| [convertStyleToAttrs](https://github.com/svg/svgo/blob/master/plugins/convertStyleToAttrs.js)                       | CSS스타일을 속성으로 변경                                                          |
| [convertColors](https://github.com/svg/svgo/blob/master/plugins/convertColors.js)                                   | `rgb()` ➔ `#rrggbb`   /  `#rrggbb` ➔ `#rgb`                              |
| [convertPathData](https://github.com/svg/svgo/blob/master/plugins/convertPathData.js)                               | 상대 패스, 절대 패스로 패스 데이터를 변환, 세그먼트를 다른 세그먼트로 변환, 쓸모없는 구분 기호를 제거, 스마트 한 반올림 등 |
| [convertTransform](https://github.com/svg/svgo/blob/master/plugins/convertTransform.js)                             | 나눠진 트랜스폼을 하나로 축소하고, 행렬(matrix)을 짧은 코드로 변환                                |
| [removeUnknownsAndDefaults](https://github.com/svg/svgo/blob/master/plugins/removeUnknownsAndDefaults.js)           | 알 수 없는 요소 내용 및 속성 제거, 기본값으로 `attrs` 제거                                   |
| [removeNonInheritableGroupAttrs](https://github.com/svg/svgo/blob/master/plugins/removeNonInheritableGroupAttrs.js) | 상속받지 않는 그룹의  `presentation` 속성 제거                                        |
| [removeUselessStrokeAndFill](https://github.com/svg/svgo/blob/master/plugins/removeUselessStrokeAndFill.js)         | 불필요한 `stroke`, `fill` 속성 제거                                              |
| [removeUnusedNS](https://github.com/svg/svgo/blob/master/plugins/removeUnusedNS.js)                                 | 사용 되지 않는 네임스페이스 선언 제거                                                    |
| [cleanupIDs](https://github.com/svg/svgo/blob/master/plugins/cleanupIDs.js)                                         | 사용 되지 않은 ID 제거, 사용된 ID 축약(이름 변경)                                         |
| [cleanupNumericValues](https://github.com/svg/svgo/blob/master/plugins/cleanupNumericValues.js)                     | 숫자 값을 고정된 정밀도로 반올림, `px`단위 제거                                            |
| [cleanupListOfValues](https://github.com/svg/svgo/blob/master/plugins/cleanupListOfValues.js)                       | `viewBox` 속성의 숫자 값 반올림                                                   |
| [moveElemsAttrsToGroup](https://github.com/svg/svgo/blob/master/plugins/moveElemsAttrsToGroup.js)                   | 요소 속성을 그룹 요소로 이동                                                         |
| [moveGroupAttrsToElems](https://github.com/svg/svgo/blob/master/plugins/moveGroupAttrsToElems.js)                   | 그룹 요소 속성을 요소로 이동                                                         |
| [collapseGroups](https://github.com/svg/svgo/blob/master/plugins/collapseGroups.js)                                 | 불필요한 그룹 접기                                                               |
| [removeRasterImages](https://github.com/svg/svgo/blob/master/plugins/removeRasterImages.js)                         | 래스터 이미지 제거 (기본 값: 비활성화)                                                  |
| [mergePaths](https://github.com/svg/svgo/blob/master/plugins/mergePaths.js)                                         | 여러 패스를 하나로 병합                                                            |
| [convertShapeToPath](https://github.com/svg/svgo/blob/master/plugins/convertShapeToPath.js)                         | 기본 도형을 \<path> 요소로 변경                                                    |
| [sortAttrs](https://github.com/svg/svgo/blob/master/plugins/sortAttrs.js)                                           | 요소 속성 정렬 (기본 값: 비활성화)                                                    |
| [removeDimensions](https://github.com/svg/svgo/blob/master/plugins/removeDimensions.js)                             | `viewBox` 속성이 있을 경우, `width`/`height` 속성 제거                              |
| [removeAttrs](https://github.com/svg/svgo/blob/master/plugins/removeAttrs.js)                                       | 패턴에 따라 속성 제거 (기본 값: 비활성화)                                                |
| [removeElementsByAttr](https://github.com/svg/svgo/blob/master/plugins/removeElementsByAttr.js)                     | ID, className으로 임의 요소 제거 (기본 값: 비활성화)                                    |
| [addClassesToSVGElement](https://github.com/svg/svgo/blob/master/plugins/addClassesToSVGElement.js)                 | `<svg>`요소에 클래스 이름 추가 (기본 값: 비활성화)                                        |
| [addAttributesToSVGElement](https://github.com/svg/svgo/blob/master/plugins/addAttributesToSVGElement.js)           | `<svg>`요소에 속성 추가 (기본 값: 비활성화)                                            |
| [removeStyleElement](https://github.com/svg/svgo/blob/master/plugins/removeStyleElement.js)                         | `<style>`요소 제거 (기본 값: 비활성화)                                              |
| [removeScriptElement](https://github.com/svg/svgo/blob/master/plugins/removeScriptElement.js)                       | `<script>`요소 제거 (기본 값: 비활성화)                                             |

#### SVGO를 사용하는 외부 프로그램

* [SVGOMG](https://jakearchibald.github.io/svgomg/)
* Grunt – [grunt-svgmin](https://github.com/sindresorhus/grunt-svgmin)
* Gulp – [gulp-svgmin](https://github.com/ben-eb/gulp-svgmin)
* Mimosa – [mimosa-minify-svg](https://github.com/dbashford/mimosa-minify-svg)
* OSX Folder Action – [svgo-osx-folder-action](https://github.com/svg/svgo-osx-folder-action)
* webpack loader – [image-webpack-loader](https://github.com/tcoopman/image-webpack-loader)
* Telegram Bot – [svgo\_bot](https://github.com/maksugr/svgo_bot)
* PostCSS plugin – [postcss-svgo](https://github.com/ben-eb/postcss-svgo)
* Inkscape plugin – [inkscape-svgo](https://github.com/konsumer/inkscape-svgo)
* Sketch plugin - [svgo-compressor](https://github.com/BohemianCoding/svgo-compressor)
* macOS app - [Image Shrinker](https://image-shrinker.com/)

<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://a11y.gitbook.io/graphics-aria/svg-graphics/svg-optimize.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.