CSS можно использовать для стиля и анимации векторной графики, так же, как оно используется для стиля и анимировать HTML элементов.В этой статье, которая является модифицированной стенограмма беседы Недавно я gave 1 на CSSconf ЕС и с фронта, я пойду предпосылок и методов для работы с CSS в SVG.
Я также перейти, как экспортировать и оптимизировать SVGs, методы для встраивания их и как каждый влияет на стили и анимации, применяемые, и тогда мы будем на самом деле стиль и анимировать с помощью CSS .
Introduction
Scalable Vector Graphics (SVG) является формат изображения вектор на основе XML для двумерной графики с поддержкой интерактивности и анимации.Другими словами, SVGs являются XML-теги, которые делают формы и графики, и эти формы и графики можно взаимодействовать с и анимированные так же, как HTML элементы могут быть .
Анимации и интерактивность можно добавить с помощью CSS или JavaScript.В этой статье мы сосредоточимся на CSS .
Есть много причин, почему SVGs являются большими и почему вы должны их использовать сегодня:
- SVG графика масштабируемой и разрешение-independent.Они прекрасно смотрятся везде, от высокого разрешения Retina “” экранов печатные СМИ .
- SVGs есть очень хорошо браузера support 2 .Откаты для не поддерживающих браузеров легко осуществить, тоже, как мы увидим позже в этой статье .
- Из 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 6 среди дизайнеров в последнее время и набирают popularity __43 | | 7__7 , с большим количеством ресурсов иtools 8 создаются в последнее время для улучшения рабочего процесса .
Выберите любой редактор для создания SVGs.После выбора вашего любимого редактора и создание SVG, но до внедрения его на веб-странице, вы должны экспортировать его в редакторе и очистить его, чтобы сделать его готовы работать с .
Я буду ссылаться на экспорт и оптимизации в SVG, созданного в Illustrator.Но рабочий относится к почти любой редактор, для Иллюстратор специфических вариантов, кроме мы пойдем на следующий .
Для экспорта SVG из Illustrator, начать, перейдя в “Файл” → “Сохранить как”, а затем выберите “.svg” из расширений файлов выпадающее меню.После того как вы выбрали .svg расширение, панель будет появляться, содержащий набор опций для экспорта SVG, например, какая версия SVG для использования, нужно ли вставлять изображения в графический или сохранить их внешне и ссылку на них вSVG, и как добавить стили в SVG (с помощью атрибутов презентацию или с помощью свойства CSS в <style> элемента) .
Следующее изображение показывает лучшие настройки, чтобы выбрать при экспорте SVG для веб:
9
Причины опции выше являются лучшими объясняются в превосходной статье Майкл Chaize в “ Экспорт SVG для веб С Illustrator CC __17 | 11 .”
Какой графический редактор вы ни выбрали, это будет не выводится совершенно чистой и оптимизированы code.SVG файлы, особенно те, экспортируемые из редакторов, как правило, содержат много избыточной информации, например, мета-данные из редактора, комментарии, пустые групп, значения по умолчанию, без оптимальных значений и другой материал, который может быть безопасно удалены или преобразованы, не затрагиваяоказание SVG.И если вы используете SVG, что вы не создаете сами, то код почти наверняка не является оптимальным, так что использование автономного инструмента оптимизации целесообразно .
Некоторые инструменты для оптимизации SVG код там.__27 Питера Collingridge в | SVG Editor 12 является онлайн инструмент, который вы вводите SVG кода в прямо или путем загрузки файла SVG и что тогда дает вам несколько вариантов оптимизации, как удаление избыточного кода, комментарии,пустые группы, пробел и более.Одним из вариантов позволяет указать количество десятичных знаков координат точки .
13
Оптимизатор Петра может также автоматически перемещать встроенные свойства SVG к блоку стиле в верхней части документа.Хорошая вещь об этом является то, что, когда вы проверяете опцию, вы можете увидеть результат оптимизации живого, что позволяет вам лучше решить, какие оптимизации сделать.Некоторые оптимизации может в конечном итоге | breaking__24 свой SVG.Например, одно десятичное место should обычно достаточно.Если вы работаете с пути тяжелых файла SVG, уменьшая количество знаков после запятой в 12:56 может сократить размер вашего файла на целых два раза.Однако, это можетТакже полностью разорвать SVG.Так, будучи в состоянии предварительного просмотра оптимизации большой плюс .
Инструмент Петра является одним сайте.Если вы предпочитаете автономный инструмент, попробуйте SVGO 15 (“О” для “оптимизатор”), Node.js-инструмент, который поставляется с красиво и просто перетащить и падение GUI 16 .Если вы не хотите использовать онлайн-инструмент, это один хорошая альтернатива .
Следующий скриншот (показывая путь на картинке выше) является просто до и после-иллюстрация инструмент, сколько Петра оптимизирует SVG .
17 Обратите внимание на размер исходного SVG по сравнению с оптимизированной версии.Не говоря уже, оптимизированная версия гораздо более читабельным .
После оптимизации SVG, он готов быть встроен в веб-страницы и дополнительно заказной или анимированный с помощью CSS .
Стайлинг SVGs С CSS
Линия между HTML и CSS ясно: HTML о содержании и структуре, и CSS о взгляде.SVG размывает эту линию, по меньшей мере.SVG 1.1 не требует CSS для стиля SVG узлов — стили были применены к SVG элементов с использованием атрибутов, известные как __ 0 “атрибутов представления.” |
Атрибуты презентации, сокращение для установки свойства CSS для элемента.Думайте о них как особых свойств стиля.Они даже способствовать каскада стиле, но мы вернемся к тому, что в скором времени .
Следующий пример показывает, SVG фрагмент, который использует представление атрибутов стилистики “границу” (stroke) и “Цвет фона” (fill) из звездной полигона:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px" viewBox="0 0 300 300">
<polygon
fill = "#FF931E"
stroke = "#ED1C24"
stroke-width = "5"
points = "279.1,160.8 195.2,193.3 174.4,280.8 117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 "/>
</svg>
fill, stroke и stroke-width атрибуты презентация атрибутов .
В SVG, подмножество всех свойств CSS может быть установлен атрибуты SVG, и наоборот.SVG спецификация перечислены атрибуты SVG, которые могут быть установлены в качестве CSS properties __43 | 18 .Некоторые из этих атрибутов являются общими с CSS, такие как opacity, и transform, в частности, в то время как некоторые из них не, например, fill, stroke, и stroke-width, в частности .
В SVG 2, этот список будет включать в себя 34 ~ | y, width, height, cx, cy и несколько других атрибутов представления, которые не были возможны, чтобы установить с помощью CSS в SVG 1.1,Новый перечень атрибутов можно найти в SVG 2specification 19 .
Еще один способ установить стили в SVG элемента использовать свойства CSS.Так же, как в HTML, стили могут быть установлены на элементе, используя встроенный стиль атрибуты:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 300px; height: 300px;" viewBox="0 0 300 300">
<polygon
style = "fill: #FF931E; stroke: #ED1C24; stroke-width: 5;"
points = "279.1,160.8 195.2,193.3 174.4,280.8 117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 "/>
</svg>
Стили также могут быть установлены в наборах правил в <style> тега.<style> тег может быть помещен в <svg> тегу:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px" viewBox="0 0 300 300">
<style type="text/css">
<![CDATA[
selector {/* styles */}
]]>
</style>
<g id=".."> … </g>
</svg>
И он может быть помещен за его пределами, если вы встраивания SVG в линию в документе:
<!DOCTYPE html><!-- HTML5 document -->
<html>
<head> … </head>
<body>
<style type="text/css">
/* style rules */
</style>
<!-- xmlns is optional in an HTML5 document →
<svg viewBox="0 0 300 300">
<!-- SVG content -->
</svg>
</body>
</html>
И если вы хотите, чтобы полностью отдельный стиль от разметки, то вы могли бы всегда ссылаются на внешние таблицы стилей из файла SVG, используя <?xml-stylesheet> тег, как показано ниже:
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width=".." height=".." viewBox="..">
<!-- SVG content -->
</svg>
Стиль Cascades
Мы упоминали ранее, что атрибуты представления являются своего рода свойства особый стиль, и что они просто сокращение для установки свойства CSS на SVG узла.По этой причине, это имеет смысл только, что SVG атрибуты представления будет способствовать каскада стиле .
Действительно, атрибуты представления рассчитывать как низкоуровневые “автор стилей” и переопределить с помощью любых других определений стиля: внешние таблицы стилей, документ стилей и встроенных стилей .
Следующая диаграмма показывает порядок стилей в каскаде.Стили ниже в схеме переопределяют над ними.Как вы можете видеть, презентация атрибутов стилей перекрываются всех других стилей для тех, специфичные для пользовательского агента, за исключением .
20 Например, в следующем фрагменте кода, элемент круг SVG был составлен.Цвет заливки круга будет розовые, которая перекрывает синюю заливку указанный в представлении атрибутов .
<circle cx="100" cy="100" r="75" fill="blue" style="fill:deepPink;" />
Selectors
Most CSS селекторы можно использовать для выбора элементов SVG.В дополнение к общему типу, селекторы класса и ID, SVGs можно стилизовать с помощью __38 CSS2 в | динамического псевдо-classes 21 (:hover, :active и :focus) и псевдо-classes 22 (:first-child, :visited, :link и :lang. Остальные CSS2 псевдо-классы, в том числе тех, кто имеет дело с генерируется content 23 (например, ::before 57 ~ и |), не являются частью определения языка SVG и, следовательно, не имеют никакого влияния на стильSVGs .
Следующее простое анимация цвета заливки круга из глубокого розового до зеленого, когда он завис над используя селектор тегов и :hover псевдо-класс:
<style>
circle {
fill: deepPink;
transition: fill .3s ease-out;
}
circle:hover {
fill: #009966;
}
</style>
Гораздо более впечатляющие эффекты могут быть созданы.Простой, но очень хороший эффект наступает от Iconic 24 | __9 набор иконок, в которых лампочка горит, когда завис над. Демо | effect__5 __12 | 25 доступен .
Notes
Из атрибуты представления выражаются в виде атрибутов XML, они чувствительны к регистру.Например, при указании цвета заливки элемента, атрибут должен быть записан в виде fill="…", а не Fill="…" .
Кроме того, ключевые значения, для этих атрибутов, таких как italic 63 ~ в |, также чувствительны к регистру и должны быть указаны с помощью точного случай, определенный в спецификации, которая определяет, что значение .
Все другие стили, заданные в свойствах CSS — ли в атрибуте стиля или <style> тега или внешнего стилей — подчиняются правилам грамматики, указанных в спецификациях CSS, которые, как правило, меньше, чувствительны к регистру.Это, как говорится, SVG “Стайлинг” 26 Технические рекомендует использовать точные имена свойств (обычно, строчные буквы и дефисы), как определено в спецификации CSS и выражающие все ключевые слова в том же случае, как того требует атрибутов представления, и не воспользовавшись возможностью CSS, чтобы игнорировать регистр .
Анимация SVGs С CSS
SVGs могут быть анимированы так же, как HTML элементы могут, используя CSS ключевых кадров анимации и свойства или с помощью CSS переходы .
В большинстве случаев, сложные анимации, как правило, содержат какой-то трансформации — перевод, вращения, масштабирования и / или наклоне .
В большинстве отношениях, SVG элементы реагируют на transform 66 ~ и | таким же образом, что HTML элементы делают.Тем не менее, несколько неизбежных различиях в результате того, что, в отличие от HTML элементов, SVG элементы не регулируется модели коробки и, следовательно, не имеют полей, границ, обивка или содержимого коробки .
По умолчанию, преобразование координат из HTML элемента в (50%, 50%), который является центром элемента.Напротив, преобразования происхождение давал SVG элемента позиционируется в начале текущего системе координат пользователя, который (0, 0) точка, в верхнем левом углу холста .
Предположим, у нас есть HTML <div> и SVG <rect> элемент:
<!DOCTYPE html>
…
<div style="width: 100px; height: 100px; background-color: orange"> </div>
<svg style="width: 150px; height: 150px; background-color: #eee">
<rect width="100" height="100" x="25" y="25" fill="orange" />
</svg>
Если были были повернуть оба на 45 градусов, не меняя по умолчанию преобразования координат, мы получили бы следующий результат (красный кругуказывает на положение преобразования координат):
27
Что делать, если мы хотели, чтобы повернуть элемент SVG вокруг своего центра, а не верхний левый угол холста SVG?Мы должны явно установить происхождение преобразования с использованием transform-origin недвижимость .
Настройка преобразования координат на HTML элемента проста: Любое значение указать будет установлен по отношению к пограничной поле .
В SVG, превратить происхождение может быть установлено с использованием либо процентное значение или абсолютная величина (например, пикселей).Если вы укажете трансформировать происхождения значение в процентах, то значение будет установлено по отношению к ограничительной рамки элемента, который включает в себя ход, используемый для рисования ее границы.Если вы укажите трансформировать начало в абсолютных значениях, то он будет установлен по отношению к текущей системе координат SVG холста пользователя .
Если бы мы были установить преобразования координат из <div> и <rect> из предыдущего примера в центр, используя процентные значения, мы хотели бы сделать это:
<!DOCTYPE html>
<style>
div, rect {
transform-origin: 50% 50%;
}
</style>
Результате преобразования будет выглядеть так:
29
Это, как говорится, на момент написания, установив преобразования координат в процентных значений в настоящее время не работает в Firefox.Это известны bug 31 .Так, на данный момент, лучше всего использовать абсолютные значения, так что преобразования себя, как ожидалось.Вы по-прежнему можете использовать процентные значения для WebKit браузерах, хотя .
В следующем примере, у нас есть вертушки на палочке, что мы будем чередовать с помощью CSS анимации.Чтобы колесовращаться вокруг своего центра, мы установим ее преобразование координат в пикселях и процентах:
<svg>
<style>
.wheel {
transform-origin: 193px 164px;
-webkit-transform-origin: 50% 50%;
-webkit-animation: rotate 4s cubic-bezier(.49,.05,.32,1.04) infinite alternate;
animation: rotate 4s cubic-bezier(.49,.05,.32,1.04) infinite alternate;
}
@-webkit-keyframes rotate {
50% {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate {
50% {
transform: rotate(360deg);
}
}
</style>
<!-- SVG content -->
</svg>
Вы можете проверить живой результат на Codepen 32 .Обратите внимание, что, в момент написания, CSS 3D преобразования not аппаратное ускорение при использовании на SVG элементов;они имеют тот же профиль производительности в SVG преобразования атрибутов.Тем не менее, Firefox does ускорить преобразования на SVGs в какой-то степени .
Анимация SVG Paths
Там нет никакого способа, чтобы анимировать SVG путь от одной формы к другой в CSS.Если вы хотите, чтобы morph пути — что, анимировать с одного пути на другой —, то вам нужно будет использовать технологию для того времени.Если вы сд …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров