Стайлинг и анимации SVGs с помощью CSS

CSS можно использовать для стиля и анимации векторной графики, так же, как оно используется для стиля и анимировать HTML элементов.В этой статье, которая является модифицированной стенограмма Обсуждение Недавно я gave ¹ на CSSconf EU ² и От Front ³, я пойду предпосылок и методов для работы с CSS в SVG .

Я также пойти над тем, как экспортировать и оптимизировать SVGs, методы для встраивания их и как каждый из них влияет на стили и анимации, применяемые, и тогда мы будем на самом деле стиль и анимации с CSS .

Introduction

Scalable Vector Graphics (SVG) является векторах на основе XML для двумерной графики с поддержкой интерактивности и анимации.Другими словами, SVGs являются XML-теги, которые делают формы и графику, и эти формы и графики можно взаимодействовать с и анимированные так же, как HTML элементов может быть .

Анимация и интерактивность можно добавить с помощью CSS или JavaScript.В этой статье мы остановимся на CSS .

Есть много причин, почему SVGs являются большими и почему вы должны их использовать сегодня:

SVG графика масштабируемой и разрешение-independent.Они прекрасно смотрятся везде, от высокого разрешения “Retina” экранов печатные СМИ .
SVGs есть очень хорошо браузера support ⁴.Откаты для не поддерживающих эту технологию браузерах легко осуществить, тоже, как мы увидим позже в этой статье .
Из SVGs в основном тексте, они могут быть сжатый, что делает файлы меньше, что их аналоги растровые (JPEG и PNG) .
SVGs являются интерактивным и styleable с CSS и JavaScript .
SVG поставляется с встроенная графика effects таких как обрезание и маскирующих операций, режимов фон смеси и фильтров.Это, в основном равносилен тому, что Photoshop возможности редактирования фотографий прямо в браузере .
SVGs являются accessible.В каком-то смысле, они имеют очень доступную DOM API, что делает их идеальным инструментом для инфографики и визуализации данных и который дает им преимущество над HTML5 Canvas, потому что содержание последнего не доступен.В другом смысле, вы можете проверить каждый и каждый элемент в SVG с помощью инструментов разработчика вашего любимого браузера, как вы можете проверить HTML элементов.И SVGs доступны для чтения с экрана, если вы сделаете их так.Мы пойдем по доступности немного больше в последнем разделе этой статьи .
Несколько tools доступны для создания, редактирования иоптимизации SVGs.И другие инструменты позволяют проще работать с SVGs и сэкономить много времени в наших рабочих процессов.Мы пройдемся по некоторым из этих инструментов рядом .

Экспорт SVGs от графики Редакторы и оптимизации Them

Три наиболее популярных векторных графических редакторов:

Adobe Illustrator является платное приложение из Adobe.Это очень популярный редактор, с красивым интерфейсом и многих возможностей, которые делают его фаворитом большинства дизайнеров .

Inkscape является популярным бесплатная альтернатива.Даже хотя его интерфейс не так хорошо, как иллюстратора, он имеет все, что нужно для работы с векторной графикой .

Эскиз X-только графику, приложение Mac OS.Это не бесплатно либо, но это было сделать rounds ⁸ среди дизайнеров в последнее время и набирают popularity ⁹, с большим количеством ресурсов иtools ¹⁰ создаются в последнее время для улучшения рабочего процесса .

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

Я буду ссылаться на экспорт и оптимизации в SVG, созданного в Illustrator.Но рабочий относится к почти любой редактор, для Illustrator специфических опций, кроме мы пойдем по следующему .

Для экспорта SVG из Illustrator, начать, перейдя в “Файл” → “Сохранить как”, а затем выберите “.svg” от расширений файлов выпадающего меню.После того как вы выбрали .svg расширение, панель будет появляться, содержащий набор опций для экспорта SVG, например, какие версии SVG для использования, нужно ли вставлять изображения в графическом или сохранить их внешне и ссылки на них вSVG, и как добавить стили в SVG (с помощью атрибутов представления или с помощью свойства CSS в <style> элемента) .

Следующее изображение показывает наилучшие настройки для выбора при экспорте SVG для веб: