Как создать анимированный логотип с помощью SVG и CSS
Доброго дня всем читателям. Небольшой набор качественной анимации, присутствующей на вашем сайте, должен вызвать положительные эмоции у ваших посетителей, ведь весь интернет медленно движется в сторону использования HTML5 для веб-анимации, но, стоит помнить, что ее использование также может привести к возникновению некоторых сложностей.
SVG (масштабируемая векторная графика) дает нам неплохую альтернативу, так как позволяет использовать великолепный API среди прочих преимуществ, и такую графику можно анимировать, используя капельку CSS-креатива.
В этой статье мы научим вас работать с SVG и комбинировать этот формат с CSS для создания анимированного логотипа.
Почему масштабируемая векторная графика такая классная
Несмотря на свое название — Scalable Vector Graphics, это вообще не графический формат, а язык XML-разметки (очень похоже на XHTML или XOXO). Этот специфический язык разметки используется для создания векторных двухмерных изображений, которые можно уменьшать или увеличивать без потери резкости. Перед тем как мы начнем говорить о его свойствах, давайте посмотрим на код, лежащий за простым SVG-файлом, Пример ниже воссоздает копию лого Adobe, используя для этого векторную обводку и атрибут заполнения для раскрашивания. Вы можете спокойно скопировать эту картинку, используя ваш любимый текстовый редактор (сохраняем, как файл .svg).
<svg viewBox='0 0 105 93' xmlns='http://www.w3.org/2000/svg'></pre> <path d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/> </svg>
Как вы можете заметить, такие изображения, изменяющие свой размер без потерь качества, могут пригодиться при строительстве отзывчивого сайта. Как бы то ни было, если графические изображения векторные, то, когда речь идет о сложных изображениях, они требую неоправданно большое количество данных. Из-за этого факта, SVG широко используется только в логотипах, инфографиках или обычных графиках.
Кроме того, вы также можете использовать встроенные графические эффекты (например, фильтры или режимы смешивания), а также доступный DOM API. Если вы уже знакомы с CSS и JavaScript, то вам будет просто управляться с файлами SVG. Их гибкость позволяет вам, например, создавать SVG-файлы на стороне сервера и модифицировать их, не имея доступа к специальным инструментам (о которых мы поговорим позже).
SVG можно легко анимировать, используя CSS, но сначала давайте узнаем, как работать с SVG, используя специальные инструменты.
Как работать с SVG
Как упоминалось выше, вы можете работать с SVG и голыми руками, но зачем, если есть замечательные инструменты для создания и манипулирования SVG-файлами, которые позволяют ограничить работу с кодом простым редактированием CSS и анимации.
Adobe Illustrator, Inkscape и Sketch для Mac – это самые популярные решения. В случае с Illustrator процесс создания файлов очень прост, так как готовые изображения можно экспортировать, используя опцию ‘Save as’ SVG. В процессе сохранения вы можете заметить опцию, которая называется SVG Profiles, с несколькими вариантами, перечисленными в выпадающем меню: SVG Tiny (лучше всего подходит для смартфонов) и SVG Basic(профиль, который используется для PDA), но мы будем использовать SVG 1.1.
Единственный минус использования данных инструментов заключается в том, что они добавляют много метаданных в сопутствующий код, что приводит к созданию слишком тяжелые файлов. Так что масштабируемую векторную графику в большинстве случаев нужно оптимизировать перед тем, как использовать ее на своем сайте.
Давайте рассмотрим в качестве примера SVG-файл с Android-лого до и после оптимизации:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 105"></pre> <g fill="#97C024" stroke="#97C024" stroke-linejoin="round" stroke-linecap="round"> <path d="M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h39v-31z" stroke-width="12"/> <path d="M32,5l5,10M64,5l-6,10 " stroke-width="2"/> </g> <path d="M22,35h51v10h-51zM22,33c0-31,51-31,51,0" fill="#97C024"/> <g fill="#FFF"> <circle cx="36" cy="22" r="2"/> <circle cx="59" cy="22" r="2"/> </g> </svg>
Мы удалили пробелы, дефолтные атрибуты, стили и прочие ненужные данные, и вот, что получилось:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 105"><g style="fill:#97C024;stroke-linejoin:round;stroke:#97C024"><path d="M14 40v24M81 40v24M38 68v24M57 68v24M28 42v31h39v-31z" stroke-width="10"/><path d="M32 5l5 10M64 5l-6 10" stroke-width="2"/></g><path d="M22 35h51v10h-51zM22 33c0-31 51-31 51 0" fill="#97C024"/><g fill="#FFF"><circle cx="36" cy="22" r="2"/><circle cx="59" cy="22" r="2"/></g></svg>
Хотя исходный файл SVG и так был вполне компактен для начала работы (0.5kB), процесс оптимизации позволил уменьшить размер файла на 12.5% (стало 0.4kB). В случае более сложных изображений, вы заметите более внушительное уменьшение размера фала и увеличение скорости загрузки сайта при наличии там SVG-элементов.
Для упрощения этого процесса мы советуем использовать инструменты типа SVG Optimizer (доступен онлайн) и SVGO, который использует app. с открытым исходным кодом и создан на базе Node.js.
Теперь давайте посмотрим, как мы можем использовать CSS для анимации графики, созданной с использованием этого языка разметки.
Создание анимированного лого с использованием SVG и CSS
SVG имеет нативный синтаксис исключительно для анимации, который называется SMIL и позволяет вам анимировать атрибуты вашей графики напрямую с использованием XML-разметки.
Но, стоит заметить, что Internet Explorer никогда не предоставлял поддержку для SMIL, а разработчики Chrome говорят об отказе от поддержки этого синтаксиса в пользу CSS и веб-анимации.
Давайте взглянем на некоторые примеры. Помните SVG Adobe-лого, которое мы представили ранее? Мы будем использовать простую мигающую анимацию и эффект перехода для изменения его цвета. Мы начнем с обозначения класса векторного контура, а затем добавим эффекты в этот класс в наш файл стилей. Вот как будет выглядеть HTML:
<!DOCTYPE html></pre> <html> <head> <title>SVG Transitions</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- The Adobe Logo recreated using SVG --> <svg viewBox='0 0 105 93' xmlns='http://www.w3.org/2000/svg'> <path class="adobe-logo" d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/> </svg> </body> </html>
Теперь мы переключаемся на наш файл styles.css…
/* --------------------------
Here we add a little padding and specify a width.
--------------------------- */
body {
padding-top: 5em;
}
svg {
width: 33.32%;
float: left;
}
/* --------------------------
Now we add the actual animation.
--------------------------- */
.adobe-logo {
transition: .3s ease-out;
}
.adobe-logo:hover {
fill: #3881cc;
}
…который выглядит вот так:
Если вместо мигающей анимации вы хотите добавить эффекты заливки и штрихов в туже самую SVG-графику, код будет выглядеть так:
/* --------------------------
Fill and strokes.
--------------------------- */
.adobe-logo {
stroke: #fee16e;
}
.adobe-logo:hover {
fill: #feae6e;
stroke-width: 8;
}
.adobe-logo {
transition: .3s ease-out;
}
Когда все на своих местах, вот как это выглядит:
Это всего лишь пара простых примеров того, что вы можете сделать, внедрив CSS, когда дело касается анимирования SVG графики, но если вам нужно реальное вдохновение, давайте взглянем на пример того, что можно достигнуть, используя другие техники, такие как группировка, трансформации, поворот, изменение размера и даже CSS keyframe:
…
See the Pen Breaking Bad by Tim Pietrusky (@TimPietrusky) on CodePen.
И наконец, мы должны упомянуть, что CSS-анимация имеет некоторые ограничения. К примеру, она не позволяет изменять форму элемента; для этого вам нужно будет обратиться к JavaScript-анимации.
Если вы решили работать с CSS-анимацией для SVG, не пренебрегайте правилом, данным выше: используйте подходящий инструмент для редактирования графики, а потом оптимизируйте полученный SVG-код. Помните, что используя эту технику, вы сможете создавать только сравнительно простую анимацию.
