SVG 애니메이션을 PNG로 구우면 왜 항상 정지 프레임인가

가이드 · 2026-08-19 최종 확인

움직이는 로고나 아이콘 SVG를 PNG로 변환했더니 애니메이션이 통째로 사라지고 첫 장면 한 컷만 남는 경험을 해본 적이 있을 겁니다. 이건 변환 도구가 버그가 있어서가 아니라, SVG를 PNG로 굽는 과정 자체의 구조적 한계입니다. 이 가이드에서는 SVG가 왜 애니메이션을 가질 수 있는 포맷인지, 브라우저가 SVG를 PNG로 바꿀 때 내부적으로 어떤 일이 일어나는지, 그리고 애니메이션이 있는 SVG를 그대로 움직이는 이미지로 남기고 싶을 때 쓸 수 있는 대안을 순서대로 풀어봅니다.

1. SVG는 왜 애니메이션이 가능한 포맷인가

SVG(Scalable Vector Graphics)는 픽셀 값을 나열하는 JPG·PNG 같은 래스터 포맷과 달리, 도형을 좌표와 수식으로 기술하는 XML 기반 벡터 포맷입니다. 원·사각형·경로(path) 같은 요소가 "이 좌표에서 이 반지름으로 원을 그려라" 같은 텍스트 명령으로 저장되기 때문에, 그 명령에 시간 축을 더하는 것도 자연스럽게 가능합니다. SVG는 SMIL 방식의 ``·`` 태그로 속성값을 시간에 따라 바꾸거나, 일반 CSS의 `@keyframes`·`transition`을 그대로 적용해 색상·위치·크기·투명도를 움직일 수 있습니다. 즉 SVG 파일 하나에 "정적인 그림"과 "그 그림이 시간에 따라 어떻게 바뀌는지에 대한 규칙"이 함께 들어있는 셈입니다. 반면 PNG는 가로세로 픽셀 격자에 색상 값을 채워 넣은 한 장의 스냅샷일 뿐이라 애초에 시간이라는 축을 담을 자리가 없습니다.

2. Canvas 렌더링이 "그 순간"만 캡처하는 이유

브라우저에서 SVG를 PNG로 변환할 때 가장 흔히 쓰는 방식은 SVG 파일을 `` 태그나 Image 객체로 불러온 뒤, ``의 `drawImage()` 메서드로 그 이미지를 캔버스 위에 그려 픽셀 데이터를 추출하는 것입니다. 이 과정에서 Image 객체는 SVG 문서를 파싱하고 첫 렌더링을 마친 시점에 "로드 완료" 이벤트를 발생시키는데, `drawImage()`는 바로 이 시점의 렌더링 결과를 캔버스에 그립니다. 문제는 이 로드 완료 시점이 애니메이션 타이머가 아직 시작되지 않았거나 막 시작된 0초 지점이라는 것입니다. Canvas API는 SVG 안에 어떤 애니메이션이 얼마나 진행 중인지 전혀 알지 못하며, 오직 "지금 이 순간 화면에 렌더링된 상태"만 픽셀로 옮겨 그릴 뿐입니다. 그 결과 원본 SVG에 회전·이동·색상 변화 같은 시간 기반 애니메이션이 아무리 정교하게 들어있어도, PNG에는 애니메이션이 시작되기 전의 초기 상태 한 프레임만 고정되어 남습니다. 이는 특정 변환 도구만의 한계가 아니라, "정지 이미지 포맷은 원래 애니메이션을 표현할 수 없다"는 PNG 자체의 근본적 제약과 "Canvas는 그 순간의 스냅샷만 찍을 뿐 애니메이션 타이밍을 알지 못한다"는 렌더링 API의 특성이 겹쳐서 생기는 결과입니다.

3. 움직이는 이미지로 남기고 싶다면 — GIF·APNG·WebM

애니메이션이 있는 SVG를 PNG 한 장이 아니라 실제로 움직이는 이미지 파일로 남기려면, 애초에 여러 장의 프레임을 순서대로 저장할 수 있는 포맷을 선택해야 합니다. 가장 널리 쓰이는 방법은 SVG 애니메이션을 일정한 시간 간격으로 여러 번 캡처해 GIF로 묶는 것입니다. GIF는 여러 프레임과 각 프레임의 재생 시간을 함께 저장하는 포맷이라 어디서나 호환되지만, 색상 수(256색)에 제약이 있어 그라데이션이 많은 SVG는 색이 뭉개질 수 있습니다. 더 높은 화질이 필요하면 APNG(Animated PNG)가 대안이 될 수 있는데, PNG와 같은 트루컬러·투명도를 유지하면서도 여러 프레임을 저장할 수 있습니다. 애니메이션이 길거나 부드러운 움직임이 중요하다면 화면 녹화 방식으로 WebM이나 MP4 영상 파일을 만드는 방법도 있습니다. 이 경우 SVG가 실제로 애니메이션되는 모습을 화면에 띄운 채 녹화하기 때문에 원본과 동일한 움직임이 그대로 보존됩니다. 반대로 지금처럼 정지 이미지 하나만 필요하다면(예: 아이콘·썸네일용) PNG 변환이 오히려 정확히 의도한 결과이며, 이때는 애니메이션이 없는 정적 SVG를 변환하거나 원하는 프레임 시점을 직접 지정해 캡처하는 방식이 더 적합합니다.

4. 정리 — 변환 전에 확인할 것

• 목적이 정지 이미지인지 움직이는 이미지인지 먼저 확인: 앱 아이콘·썸네일처럼 정지 이미지가 필요하면 PNG 변환이 맞는 선택입니다.
• 움직이는 결과물이 필요하면 포맷부터 바꾸기: PNG를 아무리 다시 변환해도 애니메이션은 살아나지 않으므로 GIF/APNG/영상 포맷으로 접근해야 합니다.
• 원본 SVG의 애니메이션 방식 확인: SMIL 태그인지 CSS 애니메이션인지에 따라 캡처 도구가 프레임을 추출하는 방식이 달라질 수 있습니다.

자주 묻는 질문