Недавно наткнулся на статью о том, как автор блога "Очередной PHP блог" делал анимированное лого. Хочу заранее предупредить, что я не собираюсь хвастаться более правильным решением, а объяснить, что не стоит делать так, как делал данный программист. Когда я наткнулся на эту статью, я увидел GIF анимацию и уже собирался наговорить всякого на автора, однако, он использовал SVG, а это хорошо.
Потому, что делать лого в растровом формате (JPG, PNG, GIF) не стоит, лучше в SVG (ибо, пора векторной графике идти на замену растровой). Если требуется конвертировать лого в растровый формат, вас никто не держит, просто векторная графика отображается лучше и весит меньшею
Автор объясняет процесс разработки лого и как он добивался минимального размера. Я посмотрел на принцип работы анимаци и понял, что так делать нельзя. Конечно хорошо то, что он сделал лого в SVG, но делать анимированное лого в виде спрайта, не есть хорошо (в данном случае).
Как утверждает автор, он перевел SVG в SVGZ и сжал спрайт, тем самым получив из 180 кб в 67 кб.. И тут он не соврал, это очень хорошая практика. Файл действительно весит 67 кб.
Ну вот и все - подготовительная работа завершена, и теперь приступим к анимации логотипа.
Нет, это пока только начало. Сейчас я покажу как сделать ту же анимацию только одним SVG изображением.
Слева, лого которое делал я, справа лого автора. Честно говоря, когда я увидел эту статью, я не стал смотреть полную версию и срисовал это лого с GIF изображения на Adobe Illustrator + Sketch. Дизайнер из меня конечно не ахти, сделал как смог.
Я просто использую одну SVG, для каждого зубчатого колеса я использую свой идентификатор. С помощью JS, я сделал вращение объекта. Конечно есть еще другие варианты, но CSS криво прокручивал эти колеса и я сделал такой вариант.
Если еще и сжать эту SVG, как сжимает автор то это даст еще лучший эффект + сжать какой-нибудь утилитой.
Если примерно определить процент сжатия: 180 / 67 * 100 = 37% 12 * 37 / 100 = 4,44 кб
Думаю статья вам была интересной и вы поняли как надо работать с анимацией для лого. Я как и писал в начале, не собирался показать, что автор данного блога поступил неправильно. Он все делал хорошо, но, делать такого рода анимацию не есть правильно.