애니메이션 SVG

스스로 움직이는 SVG 이미지는 다른 이미지와 똑같이 씁니다.

![](spinner.svg)
![w:400](chart.svg)

읽는 것

SVG 파일 자체에 적힌 애니메이션: SMIL(animate, animateTransform, animateMotion, animateColor, set, 그리고 begin, dur, repeatCount, fill, calcMode, keyTimes, keySplines)과 CSS(animation 속성이 있는 @keyframes, transform-origin, transform-box). 이해하지 못하는 것, 예를 들어 begin="click" 같은 이벤트는 빼고 경고로 알립니다. 조용히 버려지는 것은 없습니다.

출력별로 보여 주는 것

• HTML: 브라우저가 애니메이션을 직접 재생합니다.
• PowerPoint(--pptx)와 OpenDocument(--odp): 애니메이션이 있는 요소마다 별도의 도형이 되고, 그 애니메이션은 슬라이드와 함께 시작합니다. 이동, 회전과 크기 조절, 불투명도, 두 색 사이의 변화입니다. 요소의 움직임은 애니메이션 고유의 시각에 표본화되므로 가감속, 여러 키프레임, 다른 점을 중심으로 한 회전이 정확합니다. 반복(indefinite 포함), 지연, 되돌림은 그대로 옮겨집니다.
• 프레임: 애니메이션을 이렇게 표현할 수 없을 때(변형되는 경로, 스스로 그려지는 선, 기울임) 이미지 전체를 애니메이션 고유의 시각에 렌더링하여 애니메이션 GIF로 포함하며, PowerPoint와 Impress가 재생합니다. 한도가 있습니다. 초당 12프레임, 최대 240프레임, 전체 프레임을 합해 1,600만 픽셀입니다.
• PDF(--pdf)와 이미지(--images): 움직일 수 없습니다. 그림은 초기 상태로 표시되고, JavaScript도 RichMedia도 없으며, 경고 하나가 애니메이션 이미지를 알려 줍니다.

애니메이션 이미지마다 코드가 svg-animation인 경고 한 줄이 붙어, 어떻게 옮겨졌는지(네이티브인지, 프레임이라면 그 이유가 무엇인지) 알려 줍니다.

출력별 지원

로컬 파일

로컬 이미지는 --allow-local-files가 있을 때만, 프레젠테이션 폴더에서 읽습니다. marp-cli와 같습니다. 이 옵션이 없으면 이미지는 내보내기에서 빠지고, 빌드가 local-file-blocked로 파일과 해당 슬라이드, 옵션을 밝혀 줍니다. 존재하지 않는 파일은 local-file-missing으로 알립니다.

한도

SVG는 신뢰할 수 없는 입력이므로 한도가 있습니다. SVG 8 MiB, 요소 50,000개, 애니메이션 2,000개, 애니메이션 하나당 키프레임 256개, 타임라인 60초, 프레임 240개입니다. 한도를 넘는 그림은 경고와 함께 거부되고, 빌드는 계속됩니다.

확인한 것

LibreOffice Impress(macOS)는 PowerPoint와 OpenDocument 파일을 열고, 두 형식으로 다시 저장할 때 모든 애니메이션을 유지합니다. Keynote(macOS)는 도형과 애니메이션 GIF를 가져오며, 그 애니메이션은 살펴보지 않았습니다. PowerPoint: 아직 확인하지 않았습니다.