В каких случаях используют SMIL вместо CSS?

Применение SVG для стилизации web-сайтов открывает широкие возможности для веб-разработки. Речь идет о масштабируемой векторной графике (Scalable Vector Graphics — SVG), основанной на XML-формате. SVG позволяет создавать изображение с помощью определенных тегов и атрибутов: написанный вами код сгенерирует изображение, которое можно будет менять непосредственно в текстовом редакторе.

Существуют два основных метода анимации SVG-элемента:

• CSS-анимация;
• встроенная в SVG SMIL-анимация (SVG-анимация, базируемая на SMIL и расширяющая его функционал).

Условно, эти два вида анимаций можно разделить на «внешнюю» и «внутреннюю». Если говорить об отличиях, то CSS характеризуется улучшенной браузерной поддержкой, а SMIL – повышенным функционалом. Это если говорить в общих чертах. На самом деле, не так уж просто ответить, что лучше применять. Во многом выбор будет зависеть от поставленной перед вами задачи. Тем не менее можно выделить основные причины выбрать SMIL вместо CSS:

• если надо сделать то, что не смог сделать CSS (к примеру, анимировать неподдерживаемый атрибут и т. п.);
• если требуется более точный контроль над веб-анимацией;
• если нужен морфинг контура;
• если надо синхронизировать анимации;
• если стоит специфическая задача по созданию интерактивных анимаций.

При этом важно понимать, что тот факт, что SMIL надо применять для интерактивных анимаций, совсем не означает, что интерактивную анимацию нельзя сделать посредством CSS. Просто дело в том, что SMIL -- это более функциональный и сложный инструмент. Функциональность -- это плюс, но сложность -- это минус, поэтому использовать SMIL надо только по мере необходимости. То есть можно сказать, что если вам надо создать простую анимацию либо анимацию, где вполне можно обойтись и средствами CSS, то лучше именно так и поступить.

Кто-то скажет, что SMIL-анимация стара как мир, что она понемногу вымирает, что поддержка веб-браузеров хуже, чем у CSS-анимации и т. д. Это все верно, но существует веская причина, почему SMIL до сих пор привлекателен – SMIL может то, на что не способен CSS.

По материалам https://habr.com/ru/post/450924/.