SVG 최적화

GUI 도구

SVGOMG

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

SVGOMG - SVGO's Missing GUI

로컬 개발 환경

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

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

$ npm install

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

$ npm run serve

SVGO Compressor

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

SVGO Compressor for Sketch App

CLI 도구

SVGO

SVGO(SVG Optimizer)는 SVG 벡터 그래픽 파일을 최적화하기위한 Nodejs 기반 도구입니다.

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

SVGO의 작동 원리가 궁금하다면 hot it works(번역) 글을 읽어보세요.

설치

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

$ npm install -g svgo

사용법

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

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

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

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

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

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

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

• SVGOMG

• Grunt – grunt-svgmin

• Gulp – gulp-svgmin

• Mimosa – mimosa-minify-svg

• OSX Folder Action – svgo-osx-folder-action

• webpack loader – image-webpack-loader

• Telegram Bot – svgo_bot

• PostCSS plugin – postcss-svgo

• Inkscape plugin – inkscape-svgo

• Sketch plugin - svgo-compressor

• macOS app - Image Shrinker