Overview

Flutter 프로젝트에서 PNG 아이콘을 SVG로 교체한 경험을 정리한 글이다.
단순히 "SVG가 낫다"는 이야기가 아니라, 실제로 교체했을 때 파일 수와 용량이 어떻게 바뀌었는지,
그리고 SVG 최적화 도구인 svgo를 언제 쓰면 좋고 언제는 피해야 하는지까지 다룬다.

---

왜 PNG에서 SVG로 바꿨나

Flutter에서 래스터 이미지(PNG)를 사용하면 화면 밀도별로 파일을 따로 준비해야 한다.

assets/images/icon_playdata_rating_panel.png ← 1x
assets/images/2.0x/icon_playdata_rating_panel.png ← 2x
assets/images/3.0x/icon_playdata_rating_panel.png ← 3x

아이콘 1개에 파일 3개. 아이콘이 9개면 27개. 관리 포인트도 3배다.

SVG는 벡터라서 파일 1개로 모든 밀도를 커버한다.
해상도가 올라가도 깨지지 않고, pubspec.yaml에 assets/icons/ 하나만 등록하면 끝이다.

---

실제 교체 결과

아이콘	PNG 합계 (1x+2x+3x)	SVG	절감
a	2,363 B	1,196 B	+1,167 B
b	2,040 B	1,097 B	+943 B
c	3,571 B	595 B	+2,976 B
d	3,519 B	12,257 B	-8,738 B
e	3,808 B	2,369 B	+1,439 B
f	4,570 B	1,234 B	+3,336 B
g	4,270 B	2,364 B	+1,906 B
h	2,179 B	1,727 B	+452 B
i	3,073 B	1,992 B	+1,081 B
합계	29,393 B	24,831 B	+4,562 B

파일 수: 27개 → 10개 (-17개)

용량 절감은 ~4.5 KB로 크지 않다. 근데 d.svg가 눈에 띈다.
SVG 혼자 12 KB — PNG 3장 합계(3.5 KB)의 3배 이상이다.
Figma나 Illustrator에서 export할 때 불필요한 메타데이터와 과도한 path 좌표가 그대로 들어간 것이다.
이게 svgo를 써야 하는 이유다.

---

SVG 최적화: svgo

설치 없이 바로 실행

npx는 Node.js에 포함된 도구라 별도 설치 불필요. Node.js만 있으면 된다.

전체 SVG 일괄 처리

npx svgo assets/icons/{your_svg_asset}.svg

전역 설치 후 사용

npm install -g svgo
svgo assets/icons/{your_svg_asset}.svg

언제 실행하면 좋나?

디자이너에게 SVG를 받자마자 실행하는 게 제일 좋다.
Figma/Illustrator export 파일에는 편집 잔재(불필요한 group, transform, 소수점 6자리 좌표 등)가 많다.

svgo 기본 옵션만으로 보통 50~70% 감소를 기대할 수 있다.

CI에 넣어두는 것도 방법이다. PR에 SVG가 포함되면 자동으로 최적화하도록 구성하면
매번 신경 쓸 필요가 없다.

실행하면 안 되는 경우

• 애니메이션 SVG (SMIL)
  — svgo가 애니메이션 관련 속성을 날려버릴 수 있다.

• 의도적인 메타데이터가 있는 경우
  — title, desc, aria-* 같은 접근성 속성이나 라이선스 정보가 포함된 SVG는 기본 옵션으로 실행하면 같이 제거된다.

# title, desc 유지하면서 최적화
npx svgo --disable=removeTitle,removeDesc assets/icons/{your_svg_asset}.svg

렌더링 결과가 달라지는 경우 — 드물지만 복잡한 path나 clip-path가 있는 SVG는
최적화 후 시각적으로 달라질 수 있다. 실행 후 반드시 눈으로 확인할 것.

코드 변경 포인트

교체 전 (PNG):

Image(
  image: assetImageNamed('{icon_png}'),
  width: 24.w,
  height: 24.w,
)

교체 후 (SVG):

SvgPicture.asset(
  'assets/icons/{icon_svg}.svg',
  width: 24.w,
  height: 24.w,
)
flutter_svg 패키지가 필요하다.

pubspec.yaml:

dependencies:
  flutter_svg: ^2.0.10+1

결론

용량 절감 자체는 크지 않았다. 진짜 이득은 파일 관리 단순화다.
아이콘 1개당 3개 파일을 유지하던 구조가 1개로 줄었고,
새 아이콘을 추가할 때도 1배율 파일 하나만 넣으면 된다.

다만 SVG를 받는 즉시 svgo로 최적화하는 습관이 중요하다.
최적화 안 된 SVG는 PNG보다 오히려 무거울 수 있다.