WP Экспресс

Как создать анимированный логотип с помощью SVG и CSS

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

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

В этой статье мы научим вас работать с SVG и  комбинировать этот формат с CSS для создания  анимированного логотипа.

Почему масштабируемая векторная графика такая классная

Несмотря на свое название — Scalable Vector Graphics, это вообще не графический формат, а язык XML-разметки (очень похоже на XHTML или XOXO). Этот специфический язык разметки используется  для создания векторных двухмерных изображений, которые можно уменьшать или увеличивать без потери резкости. Перед тем как мы начнем говорить о его свойствах, давайте посмотрим на код, лежащий за простым SVG-файлом, Пример ниже воссоздает копию лого Adobe, используя для этого векторную обводку и атрибут заполнения для раскрашивания. Вы можете спокойно скопировать эту картинку, используя ваш любимый текстовый редактор (сохраняем, как файл .svg).

SVG in action.

Как вы можете заметить, такие изображения, изменяющие свой размер без потерь качества,  могут пригодиться при строительстве отзывчивого сайта. Как бы то ни было, если графические изображения векторные, то, когда речь идет о сложных изображениях, они требую неоправданно большое количество данных. Из-за этого факта, 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 и так был вполне компактен для начала работы (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:

Теперь мы переключаемся на наш файл styles.css…

…который выглядит вот так:

adobe-logo-hover-animation

Если вместо мигающей анимации вы хотите добавить эффекты заливки и штрихов в туже самую SVG-графику, код будет выглядеть так:

Когда все на своих местах, вот как это выглядит:

adobe-logo-fill-and-stroke-animation

Это всего лишь пара простых примеров того, что вы можете сделать, внедрив CSS, когда дело касается анимирования SVG графики, но если вам нужно реальное вдохновение, давайте взглянем на пример того, что можно достигнуть, используя другие техники, такие как группировка, трансформации, поворот, изменение размера и даже CSS keyframe:

See the Pen Breaking Bad by Tim Pietrusky (@TimPietrusky) on CodePen.

И наконец, мы должны упомянуть, что CSS-анимация имеет некоторые ограничения. К примеру, она не позволяет изменять форму элемента; для этого вам нужно будет обратиться к JavaScript-анимации.

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

Источник

Related Articles

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Close

Обнаружен Adblock

Уважайте труд вебмастера. Пожалуйста, отключите свой блокировщик рекламы.