Css svg fill при наведении. Стилизация SVG с помощью CSS: возможности и ограничения

Youtube

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

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

SVG атрибуты и CSS свойства

Грань между HTML и CSS очевидна. HTML отвечает за контент и структуру, CSS за отображение. В SVG эта грань размыта, если не сказать больше. Это главная причина того, что текстовые поля и фигуры обычно контролируются с помощью атрибутов элемента, а не CSS:

В этом примере мы рисуем прямоугольник, который закрашивается с помощью атрибута fill . Цвет и ширина внешней рамки прямоугольника задана атрибутами stroke и stroke-width . Но вы также можете стилизовать прямоугольник следующим образом, используя CSS:

Мы просто использовали атрибуты, как CSS свойства. Хотя, это работает не для всех атрибутов. Вы не сможете задать этом способом позицию и значения ширины и высоты. Мы просто будем использовать атрибут y , а также width и height .

Также как и в HTML мы можем работать с классами или идентификаторами любого элемента. Таким образом, мы определили бы представление для множества SVG элементов через стилизованный класс.

Поскольку SVG не делает различий между областями head и body , таблицы стилей и сам контент делят между собой SVG элемент, что сопоставимо с HTML элементом.

Использование псевдоклассов

В SVG возможно использование псевдоклассов, таких как:hover , даже в содействии с CSS3 свойством transition .

Реализовав этот пример, мы увидим, что при наведении курсора на элемент, с заданным для него классом example, цвет заливки изменится с красного на синий. Чтобы все это работало как следует, не вставляйте SVG с помощью тега img . Лучше используйте embed или iframe:

При использовании тега img сам SVG отобразится корректно. Но hover -эффект и переходы будут проигнорированы. Помимо свойства transition мы также можем использовать transform . В этом случае элементы будут масштабироваться или вращаться.

Используя CSS3, не забывайте добавлять вендорные префиксы, чтобы обеспечить поддержку как можно большего числа современных браузеров. В то время как Chrome и Firefox безупречно справляются с отрисовкой, Internet Explorer отказывается показывать ваше творение, хотя он вполне способен показать эти CSS3 свойства, если применить их к HTML.

Медиа запросы и SVG

Если вы хотите настроить адаптацию вашего SVG под определенные разрешения, просто используйте медиа запросы, прямо внутри него:

В этом примере, элементы для которых задан класс example не будут показываться, как только видимая ширина экрана станет меньше 800 пикселей. Будьте внимательны, здесь говориться не о ширине документа, а о ширине элемента несущего SVG.

SVG — это новый стандарт для векторных изображений в браузере. Векторные редакторы, такие как Adobe Illustrator, позволяют напрямую сохранить файл в данном формате, а у современных браузеров нет никаких проблем с правильным отображением SVG. Так как SVG графика состоит из разметки, она может быть создана и модифицирована в вашем любимом текстовом редакторе, который вы используете для HTML. Даже есть возможность стилизовать SVG с помощью CSS, но здесь есть несколько тонкостей.

Разделительная линия между HTML и CSS - довольно прямая. HTML отвечает за содержании и структуру, а CSS заботится о внешности проектов. В SVG эта линия размыта. Это главная причина, почему текст и формы в SVG, как правило, контролируется с помощью атрибутов элементов а не CSS:

В этом примере мы нарисовали прямоугольник, который закрашен с помощью fill. Цвет и прочность внешней рамки прямоугольника определяется атрибутами stroke и stroke-width.. Но, прямоугольник можно стилизовать точно также используя CSS:

Однако это не срабатывает для всех атрибутов. Вы не сможете определить позиции и значения для ширины и высоты данным образом. Мы просто будем придерживаться атрибутов y , width и height.

Так же, как и в HTML мы могли бы работать с классами и ID на любом элементе. Таким образом, мы бы задали внешний вид множеству элементов в SVG с помощью стилизованного класса.

Использование псевдо-классов

Использование псевдо-классов таких как:hover - возможно в SVG , даже в сочетании с CSS3 свойством transition.

Внедрив этот пример, hover элементы несущие example класс, приведет к изменению цвета с красного на синий. Чтобы это работало должным образом, убедитесь, что SVG не вставлен как Img. Лучше выберите Embed или Iframe:

Использование Img поможет отобразить SVG должным образом. Но, hover эффекты и transitions будут игнорироваться. Кроме transition мы могли бы использовать transform, тем самым позваляя элементам масштабироватьсь или поворачиваться.

При использовании CSS3 не забудьте добавить vendor префиксы, для поддержания максимального количества современных браузеров. В то время как у Chrome и Firefox нет никаких проблем с безупречным рендерингом, Internet Explorer откажется показыивать ваши творения даже в самой последней версии, в то время как он вполне способен показывать эти свойства CSS3 при использовании в HTML.

Медиа запросы и SVG

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

Этот пример гарантирует, что элементы класса example не будут показываться, как только видимая ширина падает ниже 800 пикселей. Знайте, что не ширина документа определяет это, но ширина элемента несущая ваш SVG.

В этом примере, элементы класса example не будет показаны, так как заданная ширина всего лишь 500 пикселей. Медиа запросы в SVG также полезны для оптимизации графики для печати.


На сегодняшний день существует уже не один способ создавать SVG
 анимацию. Это можно сделать с помощью тега, который вставляется прямо в код SVG
. Есть специальные библиотеки, такие как Snap.svg
 или SVG.js
.
Мы рассмотрим немного другой подход: с помощью встроенного SVG
 (SVG кода прямо в HTML) и анимации отдельных частей прямо через CSS
.
Я недавно поэкспериментировал с этим методом, в проекте для моей альма-матер Wufoo
, так, чтобы немного освежить в памяти тему, которую мы будем здесь рассматривать.
В моих последних проектах SVG
 использовались редко, поэтому, думаю, эта статья представляет собой прекрасную возможность уделить ему больше внимания.
Окончательный вид анимации очень простой. Вот как она выглядит:
Посмотреть на CodePen

Давайте рассмотрим, как это делается.
1. Составляем список элементов, которые мы будем использовать
Может показаться, что здесь много работы на манер как нарисовать сову, но эта статья посвящена анимации, так что с графикой давайте разберемся как можно быстрее.
Мой план заключался в том, чтобы сделать супер простую рекламу Wufoo
, использовав их классический логотип, цвета и корпоративный стиль. А затем добавить немного креатива:
Создать эффект, будто буквы убегают со страницы. Wufoo
 — это веселое слово, пусть буквы тоже будут веселыми;
За день до этого мы разработали дизайн футболки, на лицевой стороне которой был изображен динозавр, а на задней надпись: «Быстрый. Умный. Грозный
». Это черты, которые присущи и динозаврам, и Wufoo
. Не говоря уже о том, что мы обыграли слово «FORMidble
» (грозный). Поэтому я захотел сделать так, чтобы в анимационном блоке появлялись и исчезали эти слова;
Чтобы связать эти слова с динозавром, у нас будет появляться голова T-Рекса, а затем быстро исчезать. При этом будет выводиться слово «Быстрый
», что будет еще одним интересным связующим звеном для элементов.
Все эти элементы я загрузил в Illustrator
:
Обратите внимание, как очерчены тексты логотипа и слогана. Это означает, что они являются просто векторными фигурами, и к ним легко можно применять эффекты, как в SVG
, так и в
Текст, который вы видите, «Быстрый.
» так и остается в Illustrator
 в формате текста.
Когда я сохраню файл в Illustrator
, надпись останется элементом.
2. Сохраняем в формате SVG
Illustrator
 поддерживает функцию сохранения в формате SVG
:


Вы можете открыть этот SVG
-файл в редакторе кода и увидеть в нем код SVG
:


3. Вычищаем SVG, задаем классы для фигур
Вы можете пропустить код через SVGO
, чтобы оптимизировать его и убрать ненужные элементы типа DOCTYPE
 и тому подобное.
Но нам сейчас более важно задать различные имена классов для фигур, таким образом, мы сможем выбрать их в CSS
 и производить разные действия!
4. Вставляем SVG
Вы можете скопировать этот SVG
-код и вставить его прямо в HTML, в то место, где вы хотите выводить блок. Но это всего лишь примитивный шаблон.
Вы можете сделать что-то вроде этого:

 
 ...
5. Анимация!
Теперь все эти фигуры загнаны в DOM
, и мы можем позиционировать их и задавать стили, как и для любого другого элемента HTML. Давайте сделаем это.
Предположим, мы хотим использовать 10-секундную временную шкалу:
Сначала выпадают и исчезают слова
Первое, что мы хотим сделать, это вывести поочередно слова «Быстрый. Умный. Грозный.
» Каждое слово будет показываться в течение одной секунды.
Так мы создаем анимацию, в которой показ каждого слова занимает 10% времени:
@keyframes hideshow {
 0% { opacity: 1; }
 10% { opacity: 1; }
 15% { opacity: 0; }
 100% { opacity: 0; }
}
Затем указываем первое слово и длительность всей анимации в 10 секунд (10% из которых составляет 1 секунда):
Text-1 {
 animation: hideshow 10s ease infinite;
}
Следующие два слова сначала будут скрытыми (opacity: 0;
), а затем используем ту же анимацию, только с задержкой во времени, чтобы следующие слова выводились немного позже:
Text-2 {
 opacity: 0;
 animation: hideshow 10s 1.5s ease infinite;
}
.text-3 {
 opacity: 0;
 animation: hideshow 10s 3s ease infinite;
}
Дополнительные 0,5 секунды нужны для того, чтобы задать интервал между выводом каждого следующего слова.
Прыгающие буквы
Как только мы задали анимацию для этого элемента, приступаем к эффектам для букв в слове Wufoo
, которые должны прыгать в сторону вот так:

Хитрость тут в том, что мы создаем анимационный эффект, который длится всего 5 секунд, но запускаем его один раз вперед, а затем в обратном направлении.
Таким образом, он будет соответствовать нашему 10-секундному графику, и располагаться посередине временной шкалы. Нам остается только задать параметры для прокручивания эффекта анимации в одном направлении, потому что при обратной прокрутке он просто вернется на исходную позицию.
Эффекты для каждой буквы имеют небольшую задержку во времени, поэтому они перемещаются не все одновременно, а одна за другой:
Wufoo-letter {
 animation: kaboom 5s ease alternate infinite;
 &:nth-child(2) {
 animation-delay: 0.1s;
 }
 &:nth-child(3) {
 animation-delay: 0.2s;
 }
 &:nth-child(4) {
 animation-delay: 0.3s;
 }
 &:nth-child(5) {
 animation-delay: 0.4s;
 }
}
@keyframes kaboom {
 90% {
 transform: scale(1.0);
 }
 100% {
 transform: scale(1.1);
 }
}
Приведенный выше SCSS
-код — это просто короткая версия, он не включает в себя префиксов (которые понадобятся вам на практике).
Я думаю, что animation-delay
 это свойство, которое было бы полезно взять из оригинального CSS
. Это выглядело бы более аккуратно, когда буквы сдвигаются с небольшой задержкой.
И наконец, динозавр
После того, как в блоке промелькнули эти надписи, снизу выезжает голова динозавра. Несмотря на то, что фигура динозавра состоит из большого количества элементов, мы можем позиционировать их все вместе с помощью тега позиционирования (группа), который содержит в себе все эти элементы.
Поскольку для позиционирования анимации эффективнее использовать преобразования, мы сделаем это с помощью keyframes
:
@keyframes popup {
 0% {
 transform: translateY(150px);
 }
 34% {
 transform: translateY(20px);
 }
 37% {
 transform: translateY(150px);
 }
 100% {
 transform: translateY(150px);
 }
}
Мы хотим, чтобы этот фрагмент анимации выводился в «последние
» приблизительно 3 секунды. Этот цикл на самом деле работает все 10 секунд, но собственно видимые эффекты вы будете наблюдать в течение последних 3 секунд.
Когда translateY
 (150 пикселей) применен в эффекте, динозавр перемещается так далеко вниз вне поля блока, что вы его не видите.
Но в течение 37% времени этой анимации (около 3 секунд) вы видите, что он медленно двигается вверх, а затем быстро убирается вниз.
Когда мы применим эту анимацию, мы убедимся что:
Динозавр сначала скрыт;
Вывод этого фрагмента анимации задерживается во времени, так что он начинается сразу после того, как буквы в слове логотипа закончили свой пляс (совершили смешение в сторону и вернулись на место).
Trex {
 transform: translateY(150px);
 animation: popup 10s 6.5s ease infinite;
}
Динозавр падает вниз как раз в последнюю секунду так, чтобы сразу после этого в блоке снова появилось слово «Быстрый
» (интервал воспроизведения анимации установлен на infinite
, чтобы она запускалась по кругу снова и снова). Это привносит немного веселой синергии.
6. Делаем блок кликабельным / интерактивным объявлением
Одной из полезных особенностей SVG
 является возможность масштабировать объекты до любого размера без потери качества.
Чтобы создать встроенный блок SVG
 с сохранением оригинального качества изображений, мы можем использовать технику ol’ padded box
.

 ...

.wufoo-ad-wrap {
 height: 0;
 padding-top: 100%;
 position: relative;
}
.wufoo-ad {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
Идея заключается в том, что «обертка
» всегда будет принимать форму квадрата, отталкиваясь от значения его ширины. Затем мы задаем абсолютные значения позиции SVG
 внутри этого идеального квадрата, размеры которого подгоняются, исходя из ширины.
Поскольку это объявление (которое, конечно, должно быть кликабельным), то в качестве содержащего контейнера вместо 
, вы можете использовать , просто убедитесь, что вы установите его в качестве display: block;
.
Подробная статья об оформлении содержимого в элементе SVG  и преодолении связанных с этим проблем.
 Графика в формате SVG особо часто применяется для создания иконок и одной из самых распространенных техник для этого являются SVG-спрайты с использованием SVG use для инстанцирования иконок в нужном месте документа.
 Инстанцирование иконок или любого другого содержимого SVG в элементе  вызывает сложности при оформлении отдельных экземпляров. Цель этой статьи - дать вам обзор некоторых возможных способов обойти ограничения оформления, связанные с использованием  .
 Но перед тем как начать, давайте быстро рассмотрим основную структуру и группирование элементов в SVG, постепенно перейдя к  , DOM, а затем вернемся обратно к CSS. Мы разберем, почему оформление  может вызвать сложности и как их преодолеть.
 Краткий обзор структуры SVG, группирования и ссылок на элементы в SVG
 SVG включает в себя 4 основных элемента для определения, структурирования и создания ссылок на содержимое SVG в документе. Эти элементы дают возможность многократного использования изображений, оставляя код читаемым и поддерживаемым. Из-за природы SVG некоторые из этих элементов имеют функциональность, аналогичную соответствующим командам в графических редакторах.
 4 основных группирующих и связывающих элемента SVG это  ,  ,  and  .
 Элемент  (сокращение от “group”) используется для логической группировки наборов связанных графических элементов. В терминах графических редакторов (типа Adobe Illustrator) элемент  по функционалу похож на функцию “Сгруппировать объекты”. Вы также можете думать о группе как о слое в графическом редакторе.
 Группирование элементов полезно в тех случаях, когда вы хотите применить стиль ко всем элементам группы, а также, когда вы хотите анимировать все элементы группы, сохранив соотношение между ними.
 Элемент  используется для задания многих вещей, в основном это задание паттернов типа градиентов, которые затем можно использовать для заливки других элементов SVG. Его можно использовать для задания любых элементов, которые вы собираетесь использовать где-либо на холсте.
 Элемент  комбинирует возможности  и  в том, что используется для группирования элементов с заданием шаблона, на который можно ссылаться в других участках документа. В отличие от  ,  не используется для задания паттернов; как правило он используется для создания символов типа иконок, которые затем применяются во всем документе.
 У элемента  есть еще одно важное преимущество: он принимает атрибут viewBox , который позволяет масштабирование внутри любой области видимости.
 Элемент  позволяет вам использовать в любом месте документа ранее определенный элемент. Он позволяет многократно использовать элементы, дает функциональность подобную копированию-вставке в графическом редакторе. С ним можно использоваться как отдельный элемент, так и группа, заданная в  ,  или  .
 Чтобы использовать элемент вам надо передать ссылку на этот элемент, идентификатор - это атрибут xlink:href и спозиционировать его, задав атрибуты x и y . Вы можете применить стили к элементу  и они будут каскадироваться на содержимое этого элемента.
 Но что является содержимым  ? Куда он клонируется? И как каскад CSS работает с ним?
 Перед тем как ответить на эти вопросы и с учетом того, что мы только по-быстрому разобрали структуру и группирование SVG, стоит упомянуть пару статей,которые позволят вам узнать больше об этих элементах, а также об атрибуте viewBox в элементе  :
 Структурирование, группировка и ссылки в SVG - Элементы g, use, defs и symbol
 Разбираемся в системе координат SVG (Часть 1): Viewport, viewBox и PreserveAspectRatio
SVG  и теневой DOM
 Когда вы ссылаетесь на элемент с помощью  , ваш код выглядит примерно так:
 
 


 
На экране отображается иконка, содержимое которой определено внутри  , но на самом деле это содержимое элемента  , которое является клоном  .
 Но элемент  это всего лишь один самозакрывающийся элемент - в нем нет контента между открывающим и закрывающим тегами, так куда же клонируется содержимое  ?
 Ответ - в теневой DOM
 (почему-то он всегда у меня ассоциируется с Бэтменом, не знаю почему).
 Что такое теневой DOM?
 Теневой DOM идентичен обычному DOM, за исключением того, что вместо того, чтобы быть частью дерева основного документа, узлы теневого DOM относятся к фрагменту документа, который является параллельным основному, но недоступным для его скриптов и стилей. Это дает авторам возможность создавать модульные компоненты, инкапсулируя скрипты и стили. Если вы когда-либо использовали элемент video или диапазонный ввод в HTML5 и не поняли, откуда появлялись элементы управления видеоплеером или слайдер, то ответ тот же - теневой DOM.
 В случае с элементом SVG  , содержимое, на которое он ссылается, клонируется в фрагмент документа, “хостящийся” в  . В данном случае  это теневой хост.
 Итак, содержимое  (клон или копия элемента, на который он ссылается) присутствует внутри теневого фрагмента документа.
 Другими словами, содержимое находится там, но оно невидимое. Такое же, как и содержимое обычного DOM, но не доступное высокоуровневым средствам, таким как селекторы CSS и JavaScript, скопированное в фрагмент документа, привязанный к  .
 Теперь, если вы дизайнер, вы можете подумать: “ОК, я понял, но есть ли способ проверить этот субдокумент и увидеть его содержимое”. Ответ - да, вы можете просматривать содержимое теневого DOM, используя инструменты разработки в Chrome (в Firefox на данный момент эта функция не доступна). Но для начала вам надо активировать инспектора теневого DOM во вкладке General на панели настроек. Это подробно описано .
 После того, как вы активировали инспекцию теневого DOM в инструментах разработчика, вы можете видеть клонированные элементы на панели элементов, также как и элементы обычного DOM. На следующем изображении показан пример элемента  , ссылающегося на содержимое элемента  . Обратите внимание, что “#shadow-root” и его содержимое являются клоном содержимого  .
 
 Используя инструменты разработчика Chrome, вы можете инспектировать содержимое элемента use внутри теневого DOM (“#shadow-root”, строка выделена серым цветом). На этом скриншоте инспектируется логотип Codrops из примера, который мы будем рассматривать в следующем разделе.
 Глядя на инспектируемый код, вы можете увидеть, что теневой DOM очень похож на обычный, за исключением того, как он обрабатывается CSS и JavaScript основного документа. Существуют также иные различия между ними, которые мы не будем рассматривать в этой статье по причине их объема, поэтому если вы хотите узнать больше, я рекомендую вам следующие статьи:
 Теневой DOM 101 (перевод на Frontender.info)
 Введение в теневой DOM (Видео)
С учетом моего ограниченного опыта взаимодействия с теневым DOM, я рассматриваю его как обычный DOM, который нужно по другому обрабатывать в части доступа CSS и JavaScript к его элементам. Это то, что важно для нас при работе с SVG: как воздействовать на содержимое  внутри теневого DOM, ведь нам важно иметь возможность оформлять его. Весь смысл использования  это возможность создавать различные копии элемента и в большинстве случаев нам надо иметь возможность стилизовать каждую копию по-разному. Например, это может быть лого в двух цветовых темах или многоцветные иконки для разных цветовых тем. Так что для нас важно иметь возможность сделать это с помощью CSS.
 Как было сказано, содержимое теневого DOM недоступно для CSS в отличие от обычного DOM. Так как нам стилизовать его? Мы не можем использовать путь к потомкам типа такого:
Use path#line {
 stroke: #009966;
}
 
Потому как у нас нет доступа к теневому DOM с помощью обычных CSS селекторов.
 Возможно, вы, как и я ожидаете, что презентационные атрибуты имеют самую высокую специфичность среди всех стилевых правил. Ведь обычно внешние стили переписываются внутренними декларациями, а те в свою очередь переписываются строчными стилями атрибутов - они имеют максимальную специфичность, а, соответственно, и приоритет перед остальными стилями. И хотя это ожидание имеет смысл, действительный механизм работы отличен.
 На самом деле, презентационные атрибуты рассматриваются как низкоуровневые “авторские таблицы стилей” и они переписываются остальными стилевыми декларациями: внешними, внутренними и инлайновыми стилями. Их единственная сила это приоритет перед унаследованными стилями. И все.
 Теперь, когда мы выяснили это, вернемся к нашему элементу  и его содержимому.
 Мы знаем, что мы не можем задать стили внутри  , используя CSS селекторы.
 Но мы также знаем, что как и в случае с элементом  , стили примененные к  будут унаследованы всеми его потомками (которые находятся в теневом DOM).
 Итак, сначала попытаемся изменить цвет заливки (fill) элемента внутри  , применив селектор к самому элементу  с расчетом, что каскад и наследование сделают свое дело.
 Однако, это вызывает пару вопросов:
 Цвет заливки будет унаследован всеми потомками
 элемента  , даже теми, к которым вы не хотите применять стили (но если внутри  у вас всего один элемент, то этой проблемы не будет).
 Если вы экспортировали SVG из графического редактора или по каким-либо иным причинам не можете изменять код SVG, тогда вы в конечном итоге будете работать с SVG, к которому уже применены презентационные атрибуты (если вы явно не отмените это при экспорте в формат SVG) и значения этих атрибутов будут иметь приоритет над унаследованными от  .
И даже если вы можете редактировать код SVG и можете избавиться от них, я настоятельно рекомендую этого не делать по следующим причинам:
 Удаление атрибутов ради последующей установки определенных свойств сбросит значения этих свойств на дефолтные, а это, как правило, черная заливка и обводка (применительно к цветам).
 Сбрасывая значения, вы вынуждаете себя задавать стили для всего набора свойств.
 Презентационные атрибуты, которые изначально заданы, являются отличным запасным вариантом на случай возникновения проблем с внешними стилями. Если CSS не загрузится, у ваших иконок будет по-прежнему привлекательный вид.
Итак, у нас есть эти атрибуты, но при этом мы хотим оформить различные экземпляры иконок по разному.
 Это делается за счет вынуждения презентационных атрибутов к унаследованию стилей, заданных  или нахождения способа обойти переопределения этих значений. Чтобы сделать это, нам придется использовать всю мощь каскадирования CSS.
 Давайте начнем с простых примеров и постепенно перейдем к сложным.
 Переписывание значений презентационных атрибутов с помощью CSS
 Презентационные атрибуты переписываются любой декларацией стилей. Мы можем это использовать, для того, чтобы презентационный атрибут получил значение, унаследованное от стилей  .
 Это просто благодаря ключевому слову CSS inherits . Взгляните на следующий пример - иконка мороженого, нарисованная одним контуром, цвет которого мы хотим изменять в разных экземплярах. Иконка создана Эрин Агноли из Noun Project .
 
 
Содержимое нашей иконки с мороженым (path) определено внутри элемента  , а, значит, оно по умолчанию не будет выводится на холст.
 Мы выводим множественные экземпляры иконки с помощью  .
 

 
Ширину и высоту иконок мы задаем с помощью CSS. Я использую те же размеры, что и у viewBox , но они не должны быть идентичными. Однако, чтобы избежать избытка пустого пространства внутри SVG, убедитесь, что вы сохраняете соотношение между сторонами.
Icon {
 width: 100px;
 height: 125px;
}
 
С этим кодом мы получили следующий результат:
 
 Заметьте, что благодаря добавленным черным рамкам вокруг наших SVG вы видите границы каждого из них, в том числе и первого, в котором содержимое не рендерится. Запомните: SVG-документ, в котором вы определили symbol будет выводится на страницу, но без содержимого
. Чтобы предотвратить это, используйте свойство display: none на первом SVG. Если вы не спрячете SVG с определениями иконок, он будет выводится на экран даже если вы не зададите для него размеры - он займет дефолтные 300 на 150 пикселей (это значение по умолчанию для незамещаемых элементов в CSS) и вы получите ненужный вам пустой блок на экране.
 Теперь попробуем изменить цвет заливки для каждого экземпляра иконки:
Use.ic-1 {
 fill: skyblue;
}
use.ic-2 {
 fill: #FDC646;
}
 
Цвет заливки иконок по-прежнему не меняется, так как унаследованный цвет переписывается атрибутом fill="#000" в элементе path . Чтобы это не произошло, нам надо вынудить path унаследовать цвет:
Svg path {
 fill: inherit;
}
 
Вуаля! Цвета, заданные элементам  теперь применяются к path каждого из них. Проверьте демо и поэкспериментируйте со значениями, создавая экземпляры и задавая им разные цвета:
 Теперь эта техника работает, после того как мы вынудили содержимое  унаследовать стили. Но во многих случаях это не совсем то, что вам нужно. Есть и другие способы оформления, к некоторым из них мы сейчас перейдем.
 Оформление содержимого  с помощью свойства CSS all
 Некоторое время назад, при работе над иконкой, активируемой с помощью  , мне надо было, чтобы один из элементов внутри него унаследовал все стили  , такие как fill , stroke , stroke-width , opacity и даже transform . Таким образом, мне надо было контролировать все эти атрибуты через CSS, сохраняя при этом в разметке все презентационные атрибуты в качестве запасного варианта.
 Если вы столкнетесь с похожей задачей, вы, вероятно, решите, что она займет слишком много времени, если все делать в CSS:
Path#myPath {
 fill: inherit;
 stroke: inherit;
 stroke-width: inherit;
 transform: inherit;
 /* ... */
}
 
Рассмотрев этот сниппет, вы заметите паттерн, а, значит, имело бы смысл объединить все указанные свойства в одно и задать ему значение inherit .
 К счастью, нам поможет свойство CSS all . В моем справочнике по CSS упоминается использование свойства all для оформления SVG, но стоит освежить наши знания.
 Используя свойство all мы можем сделать так:
Path#myPath {
 all: inherit;
}
 
Это прекрасно работает во всех браузерах, поддерживающих all , однако надо учитывать следующий важный момент: эта декларация задает элементу наследование буквально всех свойств его родителя, в том числе и тех, которые вы не хотите задавать элементу. Поэтому, если вы не хотите, чтобы стилизовались все свойства CSS, вам это не подойдет - это крайняя мера и она частично подходит только тогда, когда у вас есть нестилизованный элемент и полный контроль над его свойствами в CSS. Если вы используете эту декларацию и не определяете значения для всех свойств CSS, они будут каскадироваться пока не найдут значение для наследования, в большинстве случаев это дефолтные стили браузера.
 Заметьте, что это относится только к атрибутам, которые можно устанавливать с помощью CSS, а не к атрибутам, задаваемым только в SVG. Если атрибут может быть задан с помощью CSS - он унаследует стили, иначе нет.
 Возможность активировать наследование презентационными атрибутами всех стилей  , но что если у вас иконка, состоящая из нескольких элементов и вы не хотите, чтобы все они унаследовали один и тот же цвет заливки? Что если вы хотите применять множество различных цветов заливки для разных потомков? Задание одного стиля в  уже не подходит. Нам нужно что-то другое, чтобы каскадировать нужные цвета к нужным элементам.
 Использование переменной CSS currentColor для оформления содержимого 
 Использование переменной CSS currentColor в сочетании с техникой, описанной выше, позволяет определить два цвета для элемента, а не один. Год назад Фабрис Вайнберг написал об этом .
 Идея состоит в том, чтобы одновременно применять к  свойства fill и color , а затем каскадировать эти свойства к содержимому  , используя возможности переменной currentColor . Посмотрим на пример кода, чтобы понять, как это работает.
 Предположим, мы хотим оформить это минималистичное лого Codrops, используя 2 цвета - один для передней капли, а второй для задней.
 
 Во-первых, начнем с кода для этого изображения: у нас есть symbol , содержащий описание иконки и три экземпляра  , создающие три экземпляра лого.
 



 
Если мы зададим цвет заливки (fill) в элементе  для каждого экземпляра, этот цвет будет унаследован обоими каплями, что не является нашей целью.
 Поэтому вместо определения цвета заливки и каскадирования его обычным способом, мы будем использовать переменную currentColor , чтобы меньшая капля на переднем плане была другого цвета и это значение мы зададим с помощью свойства color .
 Для начала нам надо вставить currentColor туда, где мы хотим применить этот цвет - это будет место в разметке, где определяется иконка, то есть внутри  . Теперь этот фрагмент выглядит так:
 
 
Затем нам надо удалить презентационный атрибут fill из второй капли и позволить ей унаследовать цвет заливки (fill) от элемента  с помощью inherit .
 Если бы мы использовали ключевое слово inherit , чтобы вынудить презентационные атрибуты унаследовать значения от  , обе части унаследовали бы одинаковое значение, а currentColor не имела бы никакого эффекта. Поэтому в этой технике нам надо удалить тот атрибут, который мы хотим задать через CSS, а оставить только тот, в котором мы будем использовать currentColor .
 
 
Теперь, используя свойства fill и color в  мы добавим стили к капле из логотипа:
Codrops-1 {
 fill: #4BC0A5;
 color: #A4DFD1;
}
.codrops-2 {
 fill: #0099CC;
 color: #7FCBE5;
}
.codrops-3 {
 fill: #5F5EC0;
 color: #AEAFDD;
}
 
Каждый элемент  получает собственное значение fill и color . В каждом из них цвет fill каскадируется и заполняет первый контур, не имеющий атрибута fill , а цвет свойства color используется для задания атрибута fill во втором контуре.
 Так что произошло следующее: значение текущего цвета просочилось в стили содержимого элемента  за счет использования переменной currentColor . Изящно, не правда, ли?
 Вот демо с использованным кодом:
 Этот двухцветная техника отлично подходит для двухцветных лого. В своей статье Фабрис создал три различных версии лого Sass, изменяя цвет текста относительно фона.
 Ключевое слово currentColor это единственная доступная переменная CSS на данный момент. Однако, если бы у нас было бы больше переменных, могли бы мы их использовать для заполнения еще большего количества значений в содержимом  ? Да, могли бы. Амелия Беллами-Ройдс год назад представила концепцию этого в своем блоге на Codepen . Посмотрим, как это работает.
 Будущее: оформление содержимого  c помощью переменных CSS
 
 Код робота содержит все составляющие его цвета:
 
 
Теперь, мы не будем использовать переменные CSS в качестве значений атрибута fill для каждого контура. Вместо этого мы будем их использовать в качестве цветов заливки используя свойство CSS fill , сохранив на месте все атрибуты fill . Эти атрибуты будут использоваться в качестве запасного варианта для браузеров, не поддерживающих переменные CSS - изображение будет выглядеть в своем изначальном виде, если переменные CSS не работают.
 С добавленными переменными код будет следующим:
 
 
Так как инлайновые теги style переписывают презентационные атрибуты, браузеры с поддержкой CSS-переменных будут использовать эти переменные для задания цвета заливки (fill). А браузеры, не поддерживающие их, будут использовать атрибут fill .
 Затем нам надо задать значения для переменных в CSS. Но сначала инстанцируем изображение с помощью  :
 
 
После этого зададим значения переменных для use , чтобы они могли каскадироваться к его содержимому. Выбранные вами цвета создадут цветовую схему рисунка. Так как в нашем роботе используется три основных цвета, мы назовем их primary , secondary и tertiary .
 #robot-1 {
 --primary-color: #0099CC;
 --secondary-color: #FFDF34;
 --tertiary-color: #333;
}
 
Вы по-прежнему можете использовать свойства fill и color вместе с этими переменными, но вы можете вполне обойтись и без этого. Итак, с цветами заданными в наших переменных, робот выглядит так:
 
 Вы можете использовать сколько угодно копий изображения и для каждой из них задать набор различных цветов, создав различные темы. Это частично полезно, когда вы хотите оформить лого различными способами в зависимости от контекста и в других подобных случаях.
 Как было упомянуто, браузеры, не поддерживающие CSS-переменные используют заданные презентационные атрибуты в качестве запасного варианта, а браузеры с поддержкой переменных CSS используют их для заполнения свойства fill и переписывания атрибутов. Но что происходит, если браузер поддерживает переменные CSS, но вы забыли задать эти переменные в стилях или задали некорректное значение?
 Для нашего робота-хипстера мы задали три переменных и только несколько его фрагментов не зависят от них - ведь он изначально разрабатывался для возможной темизации. Поэтому если вы запустите этот код в браузере с поддержкой переменных CSS и удалите все декларации с объявлением этих переменных, вы получите следующий результат:
 
 Если значения переменных не заданы или не корректны, браузер будет использовать свой цвет по умолчанию, а это обычно черный цвет для заливки и обводки в SVG.
 Обойти это можно, задав другой цвет в качестве запасного варианта для поддерживающих браузеров. Синтаксис переменных CSS позволяет сделать так: вместо передачи функции var() имени переменной в качестве аргумента, вы передаете два аргумента, разделенных запятой - имя переменной и запасной вариант, в данном случае это будет значение для презентационного атрибута.
 Итак, теперь код нашего робота выглядит так:
 
 
И это все. Если у какой-либо переменной не будет задано значение, у браузера всегда будет в запасе цвет, заданный в качестве запасного варианта. Замечательно.
 Используя эту технику, вы можете выводить этого робота где угодно на странице с помощью  , задавая для каждого экземпляра разные цвета и получая различные цветовые темы в итоге.
 Вы можете поэкспериментировать с демо, создать сколько угодно копий робота и раскрасить его любыми цветами - не забудьте только, что для этого обязательно надо использовать браузер с поддержкой переменных CSS :
 Если вы просматриваете это демо в браузере с поддержкой переменных CSS, то среди прочих вы увидите голубую с желтым версию робота, как мы и задавали в CSS-переменных. Иначе вы увидите трех одинаковых роботов с цветом запасного варианта.
 Подводя итоги
 Это была большая статья.
 Используя возможности каскада CSS, оформление содержимого  , хранимого в теневом DOM, становится менее сложным. А с переменными CSS (currentColor или с пользовательскими свойствами) мы можем проникнуть в теневой DOM и кастомизировать нашу графику, как хотим, создавая при этом запасной вариант на случай проблем.
 Лично мне очень симпатично сочетание переменных CSS и SVG. Мне нравятся их совместный функционал, особенно в части создания механизма запасного варианта.
 Мы также можем получить другие способы оформления содержимого  в будущем, так как продолжаются дискуссии об использовании переменных CSS в качестве параметров SVG - поэтому данная статья не покрывает все, что можно узнать по этой теме.
 Работа с многократно используемым содержимым SVG является одним из сложных вопросов SVG, это связано с поведением и местом расположения клонируемого кода. Здесь возникает очень много смежных вопросов, которые могут стать темой отдельных статей.

 Продолжение предыдущей статьи “Стилизация SVG с помощью CSS - Часть 1”, посвященной формату векторной графики SVG.

Стилизация с помощью CSS
Между языками HTML и CSS существует четкая и ясная взаимосвязь: язык HTML предназначен для структуризации контента
 на странице; задача языка CSS - внешнее оформление этого контента
. Формат SVG размывает четкие границы этой взаимосвязи. Например, формат версии SVG1.1 не нуждается в CSS для стилизации отдельных элементов SVG-объектов - для этой цели имеются так называемые презентационные атрибуты
.
Презентационные атрибуты
 являются сокращениями CSS-свойств для SVG-элементов. Можно думать об этих атрибутах, как о CSS-свойствах для SVG с особым синтаксисом. К этим свойствам применима каскадность стилей, но в этой статье мы поступим более кратким способом.
Показанный ниже пример является кодом, в котором используются презентационные атрибуты
 для стилизации границы многоугольника в виде пятиконечной звезды:
 
В этом примере атрибуты
 1
 fill

 , или , абсолютно не похожи на свои CSS-аналоги.
В формате SVG2 имеются несколько презентационных атрибутов
, таких как
 1
 x

 ,  1
 y

 ,  1
 width

 ,  1
 height

 ,  1
 cx

 ,  1
 cy

 и некоторые другие, которые невозможно задать с помощью CSS в SVG1.1. Список новых SVG-атрибутов можно посмотреть по этой ссылке - SVG2 спецификация .
Другим способом стилизации SVG-элементов является использование для этой цели CSS-свойств. Точно также, как и в случае в HTML-элементами, CSS-свойства могут быть заданы с помощью inline-стиля:

 "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
Как уже говорилось ранее, презентационные атрибуты
 являются специальной разновидностью свойств и что они представляют из себя просто сокращение CSS-свойств, применимых к SVG-элементам. Исходя из вышесказанного, логично предположить, что к презентационным SVG-атрибутам также, как и CSS-свойствам, применимо такое понятие как каскад стилей
.
Презентационные атрибуты позиционируются как “авторские стилевые правила” и могут быть переопределены любыми другими определениями: внешними таблицами стилей, внутренними таблицами стилей или же inline-стилями.
Диаграмма ниже показывает порядок расположения стилей в каскаде стилей. Чем ниже расположены стили в этой таблице, тем большим количеством вышележащих стилей они могут быть перезаписаны. В нашем случае презентационные стили могут быть переопределены почти всеми другими стилями, кроме стилей агента пользователя
:

Например, представленный ниже образец кода является кругом, написанным на SVG. Цвет заливки круга в виде атрибута с помощью правила , , и .
Замечания
Так как презентационные атрибуты имеют XML-синтаксис, то они чувствительны к регистру
. Например, при задании цвета заливки SVG-элемента атрибут должен быть записан как
 в ,  1