GIF처럼 느껴지는 SVG

• 움직이는 SVG 이미지는 고해상도를 유지하면서도 파일 크기가 매우 작음 (49KB)
• 기존 GIF와 비슷한 시각적 효과를 주지만, 실제로는 SVG 애니메이션 기능을 활용
• Github README.md 파일에서도 직접 사용할 수 있음
• asciinema와 svg-term-cli 툴을 이용해 터미널 세션 녹화 → SVG 애니메이션으로 변환 가능
• SVG의 애니메이션 요소(<animate>, <animateTransform>, <animateMotion>)를 활용

움직이는 SVGs의 특징

• SVG로 만든 움직이는 이미지는 기존 GIF처럼 보이지만, 실제로는 SVG의 벡터 기반 애니메이션 기능을 사용함
• 이 방식은 파일 크기가 매우 작고, 화질 손실 없이 크기 변경 및 확대/축소가 가능
• Github의 README.md 같은 곳에도 바로 활용 가능한게 큰 장점
• 예시로, 49KB 크기의 고해상도 움직이는 parrot SVG가 소개됨

만드는 방법

• asciinema를 통해 터미널 세션을 녹화함
• 녹화된 asciinema 파일을 svg-term-cli 툴로 변환하여 SVG 애니메이션 파일로 만듦
• 생성된 SVG 파일은 README.md에 쉽게 추가할 수 있음
• 작성자는 bespoken 등 여러 프로젝트에서 이 방식을 적극 활용 중

SVG 애니메이션의 동작 원리

• SVG 스펙에는 이미 애니메이션 기능이 내장되어 있음
  • <animate>: 개별 속성을 시간에 따라 애니메이션화함
  • <animateTransform>: 회전, 크기 조절, 이동 등 변환 애니메이션 적용 가능
  • <animateMotion>: 경로를 따라 객체를 움직임
• svg-term-cli는 이러한 SVG의 내장 애니메이션 기능을 활용해 동작함