Примеры SVG анимации

Описание

SVG по своим возможностям приближается к запатентованной технологии Adobe Flash, но отличается от неё тем, что SVG является рекомендацией W3C (то есть, стандартом), и тем, что это формат, основанный на XML, в противовес закрытому двоичному формату Flash. Он явно спроектирован для работы с другими стандартами W3C, такими, как CSS, DOM и др.

Создание качественных иконок и анимации поддерживаемых всеми современными браузерами, не требующих высокой производительности устройства и обладающих малым размером для быстрой загрузки при медленном интернете.

Технологии

SVG Формат векторной графики, позволяющий делать легковесные иконки и потрясающую анимацию.
CSS3 самая свежая версия стандарта CSS (это язык, который используется для стилизации и организации макета веб-страниц) которая привнесла много нововведений в разработку веб-интерфейсов.
Чистый Javascript без использования фреймворков и библиотек, что повышает скорость загрузки и работы сайта, за счет сокращения количества загружаемых файлов и сокращения объема кода.

Особенности дизайна

Анимация рисования логотипа и эффект ввода текста с клавиатуры с разными интервалами появления букв при каждом запуске. ссылка на demo.

Эффект свечения иконок при наведении для сайта светотехнической компании. ссылка на demo.

Анимация вращающейся шестеренки в появлением иконки и выезжающим текстом. ссылка на demo.

Кнопка с анимированной рамкой, анимация запускается при появлении кнопки на экране. ссылка на demo

Особенности реализации

Не ограниченная масштабируемость без потери качества изображения.
Позволяет создавать сложную управляемую анимации в web. Изображения svg легко модифицируются при помощи CSS и javascript(расположение, форма, размер, пропорции, цвет, заливка и все прочие свойства составляющих частей изображения).
Увеличение скорости загрузки сайта, за счет малого размера файлов svg и уменьшения количества загружаемых файлов(svg можно встроить в HTML, не нужно делать несколько изображений для разных разрешений экрана).