썸네일 출처 : https://en.wikipedia.org/wiki/File:Toy_train_SMIL.svg

썸네일이 GIF도 APNG도 아닌 것 같은데 움직이는 것처럼 보인다면 착각이 아니다.

Synchronized Multimedia Integration Language

SMIL은 원래 다양한 멀티미디어 데이터를 동기화해 프레젠테이션하기 위해 타이밍, 레이아웃을 지정할 수 있는 마크업 언어이다.
그렇기 때문에 보통 과거 <embed>와 외부 어플리케이션(ActiveX)를 통해 실행되는 멀티미디어를 동기화시키기 위해 사용되었으나, IE와 XML 기반 데이터와 함께 잘 사용되지 않게 되었다.

SVG SMIL Animation

하지만 이 시리즈는 SVG에 대한 정리이므로, 이 글에서는 SVG에 적용되는 SMIL Animation에 대해서만 정리할 예정이다.

SMIL Animation을 구글에 검색해보면 이미 사장(Deprecated)되었다거나 CSS 애니메이션으로 대체된 형식이라는 주장이 가득하다. (결론부터 말하자면 아니다.)
구글 크롬에서 사용하지 않기로 결정했다는 2015년도의 크로미움 포럼의 글이 그 근거인데, 포럼의 첫 글에서도 CSS 애니메이션으로 병합하기 위한 움직임이라고 표명하고 있긴 하다.
실제로 위의 글이 처음 작성되었을때의 파장이 워낙 커서, 보통 여기까지만 알고 이후에 어떻게 되었는지까지는 모르는 편이다.
W3 SVG Working Group의 관련 이슈
반대 의견과 SMIL 애니메이션 지지를 요청하는 글

해당 포럼의 정확한 결론은 SMIL Animation의 Deprecation이 Suspended 된 것이다.
즉 SMIL Animation을 사용하지 않겠다고 선언한 것을 보류했다는 뜻으로,
15개월간의 수많은 반대 의견과 기능이 충분하지 못한 CSS 애니메이션으로 인해 위 포럼 게시자는 섣부른 제거 결정이었음을 인정하고, 한동안 CSS 애니메이션과 SMIL을 같이 사용하는 것으로 결정되었다.

...For example, the most common use case of SMIL is to animate SVG content inside image tags. While in theory CSS animations can animate this content, there are still missing features and bugs on all platforms that make SMIL a better option for now. For example, motion-path, path morphing, and the subset of SVG properties for which animation is supported all vary between platforms and browsers.
...예를 들어 SMIL의 가장 일반적인 사용 사례는 이미지 태그 내에서 SVG 콘텐츠를 애니메이션화하는 것입니다. 이론상으로는 CSS 애니메이션이 이 콘텐츠를 애니메이션화할 수 있지만, 현재 SMIL을 더 나은 옵션으로 만드는 모든 플랫폼에는 여전히 누락된 기능과 버그가 있습니다. 예를 들어 모션 경로, 경로 모핑 및 애니메이션이 지원되는 SVG 속성의 하위 집합은 모두 플랫폼과 브라우저에 따라 다릅니다.

그 후 6년이 지난 2023년, 현재의 모든 상용 브라우저는 SMIL 애니메이션을 정상적으로 지원한다.

SMIL Animation은 충분히 강력하다

SVG SMIL Animation의 특징인 Path 애니메이션으로 표현한 역대 배트맨 로고
위 이미지는 단일 SVG 파일이다.
출처 : http://tavmjong.free.fr/blog/?p=1262

위 포럼의 결론처럼 CSS 애니메이션은 충분히 좋지만, SVG SMIL 애니메이션을 완벽히 대체할수는 없는 상황이다.
몇가지 예시를 들어보자.

SMIL 애니메이션은 애초에 XML(SVG)와 함께 개발되어, 최적화되어 있다.
CSS 애니메이션은 확실히 문서 요소에 대한 애니메이션을 적용하는데는 부족함이 없지만, SVG는 그래픽 마크업으로서 <defs>의 도형 요소를 위한 보조 요소가 존재한다.
문서 요소의 크기, 위치, 각도 등과 같은 레이아웃을 중점적으로 지원하는 CSS 애니메이션으로는 보통 SVG의 <defs>에서 표현되는 filter와 gradient와 같은 요소의 특성값을 변경하는 애니메이션을 지정할 수 없다.

CSS 애니메이션은 HTML 요소에 대해서는 인라인 특성값을 참조하는데 문제가 없지만,
CSS 자체의 한계로 SVG 요소에서 사용되는 특성값과의 충돌을 보장할 수 없어 MDN의 SVG에 CSS 적용하기 튜토리얼에서도 하나하나 테스트해보는 수밖에 없다(It's easiest just to test and find out what is available and what isn't.)고 써 있는 수준이다.
(재미있는 부분은, 구글의 SVG 애니메이션에 대한 고민이 농담이 아니었는지 크롬에서는 SVG 요소에 대한 CSS 특성값을 지원한다.)

SMIL 애니메이션의 특징은 SVG의 Path를 사용할 수 있다는 부분이다.
이 글의 썸네일과 현재 단락의 인용문에서 볼 수 있는 예제 이미지가 Path와 SMIL 애니메이션을 적용한 예시로,
썸네일에서는 <mpath>를 사용한 path 경로를 따라 움직이는 도형 그룹이 열차가 있으며, 배트맨 로고에서는 <path> 내부의 <animate>를 통해 큐빅 베지어 패스의 기준점과 제어점을 편집했다.

가장 큰 장점으로, SMIL은 원래 이름부터 Synchronized인 만큼 각 애니메이션에 대해 논리적인 연결이 가능하다.
CSS 애니메이션을 사용해보면서 느낀 가장 큰 단점이 모든 시작, 지연 시간 기준을 절대값으로만 설정해야 한다는 것이다.
애니메이션 키프레임 테이블을 따로 작성해두고 작업하는것 자체도 끔찍하지만, 더 큰 문제는 키프레임 수치와 애니메이션, 요소에 대한 논리적 연결성이 떨어진다는 부분이다.
SMIL 애니메이션의 경우 begin="anPathWalk.end"과 같은 특성값을 통해, 다른 애니메이션 요소의 종료 시점을 통해 연속적인 애니메이션을 지정할 수 있다.

마무리

사실 SMIL 애니메이션의 가장 큰 문제는 언제 CSS 애니메이션이 표준이 될지나, 사람들이 사장된 표준인 줄 안다거나 등이 아니다.
문제는 타임라인을 적용 가능한 편집 도구가 없는 것으로, 전적으로 코드 에디터를 통한 수기 작성이 최선인 현 상황이다.
(이 때문에 잘 사용되지 않아 사장된 형식이 아니냐라고 한다면 할 말은 없다...)
그 때문인지 그럴싸한 예제를 찾기도 어려운 것도 사실이다.
하지만, 이전에 구현 환경상 JS 라이브러리 의존적인 Lottie/Bodymovin에서 보안 문제가 발생해 골치를 썩힌 경험이 있어 한번쯤은 개인 프로젝트에서 사용해보고 싶은 애니메이션 방식이어서, 이를 목표로 더 깊게 공부할 계획이다.