Оживим веб-страницу анимированным векторным логотипом!
Векторные изображения SVG (Scalable Vector Graphics) - один из самых популярных форматов картинок в Интернете. В отличие от растровых форматов (.png, .jpeg), векторные изображения не распадаются на пиксели при приближении, не требуют разного разрешения для разных экранов и, по сравнению с другими картинками, "весят" очень мало - любое SVG изображение это, по сути, XML-файл, который можно открыть текстовым редактором. В нем заданы координаты фигур, их цвета, порядок расположения и другие атрибуты, которые формируют законченное изображение.
В веб-разработке, это позволяет работать с векторной графикой совсем на другом уровне, по сравнению с растровыми картинками. Конечно, мы можем вставить SVG-изображение с помощью <img src="url-картинки" />, но гораздо интереснее встроенный SVG: с небольшими корректировками, мы можем вставить XML-код векторного изображения прямо в HTML-разметку. Так мы можем встраивать красивые логотипы, кнопки и панели, спиннеры и индикаторы, а самое главное, мы получаем полный контроль над ними из нашего кода.
Одна из востребованных анимаций - саморисующийся логотип, или его элементы. В этом туториале мы научимся двум самым распространенным способам достижения эффекта сампрорисовки, и Вы сможете применять эти принципы в своих проектах.
Три основных способа анимации SVG в веб-разработке: SMIL, CSS и JavaScript, а также их сочетания. В данном туториале, мы будем пользоваться CSS и всего парой служебных строчек JavaScript. Так что, если Вы пока знакомы только с HTML и CSS, трудностей не возникнет!
Переходите по ссылке, Вас ждет интерактивный туториал, оставляйте комментарии!
Удачи!