Перейти до вмісту

Анімований SVG

Зображення SVG з анімаціями SMIL або CSS: відтворюється браузером у HTML, анімовані фігури в PowerPoint і OpenDocument, анімований GIF там, де вони не можуть цього виразити, початковий стан у PDF і зображеннях.

Зображення SVG, що анімується саме, записується як будь-яке зображення:

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

Що зчитується

Анімації, записані в самому файлі SVG: SMIL (animate, animateTransform, animateMotion, animateColor, set, з begin, dur, repeatCount, fill, calcMode, keyTimes і keySplines) та CSS (@keyframes з властивостями animation, transform-origin і transform-box). Те, що не розпізнано, наприклад подія на кшталт begin="click", пропускається й повідомляється попередженням: ніщо не відкидається мовчки.

Що показує кожен вивід

  • HTML: браузер сам відтворює анімації.
  • PowerPoint (--pptx) і OpenDocument (--odp): кожен анімований елемент є окремою фігурою, а його анімації стартують разом зі слайдом: рух, обертання і масштаб, прозорість, перехід між двома кольорами. Рух елемента вибирається у власні моменти анімації, тож прискорення, кілька ключових кадрів і обертання навколо іншої точки точні. Повтори (також indefinite), затримки та зворотні ходи переносяться.
  • Кадри: коли анімацію не можна виразити так (контур, що деформується, лінія, що малюється, нахил), усе зображення рендериться у власні моменти анімації й вбудовується як анімований GIF, який відтворюють PowerPoint та Impress. Це обмежено: 12 кадрів на секунду, щонайбільше 240 кадрів, 16 мільйонів пікселів на всі кадри разом.
  • PDF (--pdf) і зображення (--images): вони не можуть анімуватися. Малюнок показано в початковому стані, без JavaScript і без RichMedia, а одне попередження називає анімовані зображення.

Кожне анімоване зображення отримує один рядок попередження з кодом svg-animation, що каже, як його перенесено: нативно чи кадрами і чому.

Підтримка за виводом

МожливістьHTMLPowerPointOpenDocumentPDF і зображення
Зсув, рух уздовж контурувідтворюєтьсянативнонативнопочатковий стан
Обертання і масштаб навколо будь-якої точкивідтворюєтьсянативнонативнопочатковий стан
Радіус кола, розмір прямокутника (без обведення)відтворюєтьсянативнонативнопочатковий стан
Прозорість елемента з однієї фігуривідтворюєтьсянативнонативнопочатковий стан
Колір заливки або обведення, від одного кольору до іншоговідтворюєтьсянативнонативнопочатковий стан
Повтори, затримки, зворотні ходи, утримання в кінцівідтворюєтьсянативнонативнопочатковий стан
Прискорення, кілька ключових кадріввідтворюєтьсянативно (з вибіркою)нативно (з вибіркою)початковий стан
Кроки, дискретні змінивідтворюєтьсякадрикадрипочатковий стан
Деформація контуру, зсув штрихів, атрибути положення і розміру, градієнтивідтворюєтьсякадрикадрипочатковий стан
Нахил, віддзеркалення, кілька годинників в одному елементі, вкладені анімовані елементивідтворюєтьсякадрикадрипочатковий стан
Подіївідтворюєтьсяне переноситься (попередження)не переноситься (попередження)початковий стан

Локальні файли

Локальне зображення читається лише з --allow-local-files, з теки презентації, як у marp-cli. Без цього параметра зображення лишається поза експортами, а збирання повідомляє про це через local-file-blocked, називаючи файл, його слайди та параметр. Файл, якого не існує, повідомляється як local-file-missing.

Обмеження

SVG є недовіреним вхідним записом, тому він обмежений: 8 МіБ SVG, 50 000 елементів, 2 000 анімацій, 256 ключових кадрів однієї анімації, 60 секунд часової шкали та 240 кадрів. Малюнок, що перевищує межу, відхиляється з попередженням, а збирання триває.

Що перевірено

LibreOffice Impress (macOS) відкриває файли PowerPoint і OpenDocument і зберігає кожну анімацію під час повторного збереження в обох форматах. Keynote (macOS) імпортує фігури та анімований GIF; його анімації не перевіряли. PowerPoint: ще не перевірено.

Created on by tannevaled

Modified on by tannevaled

KindsПакети тем