Почему на этот svg не действует фильтр?

Как менять цвет svg-иконки через CSS

Верстальщику часто приходится обыгрывать реакцию иконки при наведении на неё мышки. В случае с svg-картинками можно просто менять их цвет.

Научимся это делать на примере иконки «ВКонтакте»:

Логотип сложный, поэтому svg-код, который его математически описывает, довольно длинный. Посмотрим, как это выглядит в HTML:

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

Обратите внимание на тег (в переводе с английского «путь»). Он позволяет задать любую фигуру компактной строкой — описанием пути от начальной точки до конечной через промежуточные координаты.. Строка с данными задаётся атрибутом d тега

Она содержит команды, которые закодированы набором букв и чисел. Буква представляет тип команды, а числа — её параметры (чаще всего координаты).

Строка с данными задаётся атрибутом d тега <path>. Она содержит команды, которые закодированы набором букв и чисел. Буква представляет тип команды, а числа — её параметры (чаще всего координаты).

Теперь мы запросто добавим к ссылочному тегу <a> псевдокласс: hover и зададим через него новый цвет svg-изображения. Это делается в CSS с помощью свойства fill («заливка»).

Проверьте, как это работает: наведите курсор на иконку — например, в песочнице Codepen.

И ещё один нюанс. Заливка может быть задана атрибутом у <svg> (fill=»#000″). Тогда работать с ней через CSS не получится, так как css-стили не могут перебить правила, заданные атрибутами. В этом случае стоит просто вручную удалить этот атрибут у <svg>.

Иконка соцсети без текста

Почти на любом сайте есть блок со ссылками на Facebook, «ВКонтакте», Instagram и другие соцсети:

Поскольку это иконки, а текста (контентной составляющей) мы рядом не видим, — нужно использовать CSS.

Здесь есть пара нюансов:

1. Раз текста нет, то у ссылки нет размеров. А фона без размеров не бывает (нельзя покрасить стену, когда самой стены нет).
2. Если мы зададим размеры ссылке, то они не сработают, так как по умолчанию ссылка — строчный элемент (его размер не изменить с помощью свойств width и height).

Обойдём эти ограничения.

Сперва напишем простую разметку — список ссылок. Классы сделаем по БЭМ, чтобы наш компонент было удобно стилизовать и использовать повторно.

Начнём, конечно, с HTML-кода:

Далее — CSS:

• Заметьте, что свойству display для ссылок мы задали значение inline-block. Поэтому наши ссылки стали строчно-блочными элементами. Теперь можно задать им ширину и высоту — и это уже сработает.
• Одинаковые для всех элементов стили (background-position, background-size, background-repeat) мы вынесли в общий класс social__link.
• А вот фоновые изображения у нас разные — их мы задаём в разных классах.

Усложняем задачу

Рассмотрим более сложную ситуацию — когда иконка состоит из нескольких простых svg-изображений. Например, примитивная лупа из прямоугольника и круга:

Код для кнопки с иконкой лупы будет таким:

Проблема здесь в том, что внутри svg-иконки два разных тега:

• <rect> (прямоугольник — ручка лупы)
• и <circle> (круг — ободок лупы).

Сделать как в примере с «ВКонтакте» не получится, потому что прямоугольник в нашем случае имеет заливку (fill), а круг — обводку (stroke).

Чтобы при наведении менять цвет обоих, используем два селектора. Один будет менять заливку у палочки, второй — обводку у круга:

Как видите, при наведении на кнопку мы сперва нашли rect, потом circle, то есть разделили логику.

Делить код таким образом приходится нечасто, но помнить об этой возможности полезно.

Основные стили текста

Текст может быть стилизован с помощью свойств CSS, таких как , и , которые определяются любым из описанных в уроке о стилизации SVG с помощью CSS. Вот несколько примеров.

Жирный текст

<svg>
<text x="0" y="15" style="font-weight: bold;">Жирный текст в масштабируемой векторной графике(SVG)</text>
</svg>

Курсив

<svg>
<text x="0" y="15" style="font-style: italic;">Текст курсивом в масштабируемой векторной графике(SVG)</text>
</svg>

Подчеркнутый текст

<svg>
<text x="0" y="15" style="text-decoration: underline;">Подчеркнутый текст в масштабируемой векторной графике(SVG)</text>
</svg>

Используем элемент

В некоторых случаях нужно применить стили или атрибуты только для определенной части. В такие моменты можно использовать элемент . Пример ниже показывает, как добавить жирный, курсивом и подчеркнутый текст в одну строку.

<svg>
<text x="0" y="15"><tspan style="font-weight: bold;">Жирный текст</tspan>, <tspan style="font-style: italic;">текст курсивом</tspan> и <tspan style="text-decoration: underline;">подчеркнутая часть</tspan>.</text>
</svg>

Реализация определения стилей для SVG элементов

Мы можем использовать следующие методы для определения стилей SVG элементов.

Атрибуты представления

Все свойства SVG могут быть применены непосредственно к представлению элемента в коде HTML. Следующий пример показывает как использовать свойства fill и stroke непосредственно для элемента :

<svg>
<rect width="200" height="200" fill="slategrey" stroke="black" stroke-width="3"/>
</svg>

В результате получится примерно такой прямоугольник:

Встраиваемые стили

Мы также можем добавлять стили с помощью атрибута . В следующем примере также добавляются свойства fill и stroke к элементу , но в этот раз с помощью атрибута , и также производится вращение элемента с помощью свойства CSS3 :

<svg>
<rect x="203" width="200" height="200" style="fill:slategrey; stroke:black; stroke-width:3; -webkit-transform: rotate(45deg);"/>
</svg>

Внутренняя таблица стилей

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

<style type="text/css" media="screen">
	#internal rect {
		fill: slategrey;
		stroke: black;
		stroke-width: 3;
		-webkit-transition: all 350ms;
	}
	#internal rect:hover {
		fill: green;
	}
</style>

Однако, SVG является основанным на XML языком, поэтому при добавлении встроенных стилей в документ нужно использовать декларацию :

<style type="text/css" media="screen">
	<!]>
</style>

Директива в данном случае обязательна, так как CSS используется символ , который может конфликтовать с обработчиком XML.

Внешняя таблица стилей

Внешняя таблица стилей действует также для элементов SVG в документе .

<link rel="stylesheet" type="text/css" href="style.css">

В документе необходимо ссылаться на  внешнюю таблицу как на  :

<?xml-stylesheet type="text/css" href="style.css"?>  

Группировка элементов

Элементы SVG могут быть сгруппированы с помощью элемента . Сгруппированные элементы позволяют использовать общие стили для всех элементов в группе:

<g style="fill:slategrey; stroke:black; stroke-width:3; fill-opacity: 0.5;">
	<rect x="203" width="200" height="200"/>
	<circle cx="120" cy="106" r="100"/>
</g>

И круг и прямоугольник будут иметь одинаковый внешний вид:

В следующем уроке мы разберем вопрос использование текста в SVG элементах.

Примеры использования псевдоэлементов after и before

1. Применение CSS псевдоэлементов и для оформления цитаты.

HTML разметка цитаты:

<div class="blockquote">Текст цитаты...</div>

CSS код для оформления цитаты:

.blockquote {
  margin: 0 auto;
  max-width: 400px;
  position: relative;
  padding: 5px 32px;
  background-color: #e0f2f1;
  color: #004d40;
  border-radius: 4px;
}

.blockquote::before {
  content: '\201e';
  position: absolute;
  top: -16px;
  left: 6px;
  font-family: Georgia, serif;
  font-size: 40px;
  line-height: 1;
  font-weight: bold;
}

.blockquote::after {
  content: '\201c';
  position: absolute;
  right: 6px;
  font-family: Georgia, serif;
  font-size: 40px;
  line-height: 1;
  font-weight: bold;
}

2. Пример использования псевдоэлемента для разделения элементов в хлебных крошках.

HTML структура хлебных крошек:

<ol class="breadcrumb">
  <li class="breadcrumb__item"><a href="#">Home</a></li>
  <li class="breadcrumb__item"><a href="#">Blog</a></li>
  <li class="breadcrumb__item breadcrumb__item_active" aria-current="page">Single post</li>
</ol>

CSS код хлебных крошек:

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  color: #b39ddb;
  background-color: #ede7f6;
  border-radius: .25rem;
}

.breadcrumb__item>a {
  text-decoration: none;
  color: #673ab7;
}

.breadcrumb__item>a:hover {
  text-decoration: none;
  color: #311b92;
}

.breadcrumb__item+.breadcrumb__item {
  padding-left: 8px;
}

/* добавление разделителя между элементами хлебных крошек с помощью псевдоэлемента before */
.breadcrumb__item+.breadcrumb__item::before {
  display: inline-block;
  padding-right: 8px;
  color: #673ab7;
  content: "•";
}

Изображние хлебных крошек:

3. Пример добавления hover эффекта к ссылке, оформленной с помощью background картинки, с использованием псевдоэлементов after и before.

Псевдоэлемент используется для затемнения изображения, а — для отображения картинки «Запустить».

HTML код ссылки:

<a href="#" class="image__over"></a>

CSS код с использованием after и before:

.image__over {
  position: relative;
  display: block;
  overflow: hidden;
  padding-top: 56.25%;
  background: url(buterfly.jpg) no-repeat;
  background-size: cover;
  border-radius: 4px;
}

.image__over:hover::before,
.image__over:focus::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(48, 53, 71, .4);
  cursor: pointer;
}

.image__over:hover::after,
.image__over:focus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 64px;
  width: 72px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16' width='14' height='16'%3E%3Cpath d='M13.262 6.708l-11-6.503C1.37-.323 0 .19 0 1.495v13.003c0 1.172 1.272 1.878 2.262 1.291l11-6.5c.981-.578.984-2.003 0-2.58z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 72px 64px;
  background-repeat: no-repeat;
  background-position: center center;
  margin-left: -32px;
  margin-top: -36px;
  cursor: pointer;
}

4. Пример, аналогичный предыдущему, за исключением того что изображение будем задавать с помощью элемента .

HTML разметка этого примера:

<a href="#" class="image__over">
  <img src="buterfly.jpg" alt="">
</a>

CSS код:

.image__over {
  display: inline-block;
  font-size: 0;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.image__over>img {
  max-width: 400px;
}

.image__over:hover::before,
.image__over:focus::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(48, 53, 71, .4);
  cursor: pointer;
}

.image__over:hover::after,
.image__over:focus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 64px;
  width: 72px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16' width='14' height='16'%3E%3Cpath d='M13.262 6.708l-11-6.503C1.37-.323 0 .19 0 1.495v13.003c0 1.172 1.272 1.878 2.262 1.291l11-6.5c.981-.578.984-2.003 0-2.58z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 72px 64px;
  background-repeat: no-repeat;
  background-position: center center;
  margin-left: -32px;
  margin-top: -36px;
  cursor: pointer;
}

CSS псевдоэлемент first-line

Псевдоэлемент предназначен для оформления первой строки форматированного текста элемента с блочным отображением.

К этому псевдоэлементу можно применять только ограниченный набор CSS свойств, такие же как к .

Синтаксис :

selector::first-line {
  /* стили, которые нужно применить к первой строке */
}   

Пример, в котором с помощью псевдоэлемента преобразуем символы первой строки текста в прописные и установим им жирное начертание.

.text::first-line {
  text-transform: uppercase;
  font-weight: bold;
}

Обратите внимание, что на адаптивных сайтах первая строка может иметь на разных по размеру экранах разную длину. Если нужно чтобы первая линия состояла из одного и того же количества символов на разных экранах устройств, то её нужно просто ограничить

<p class="text">
  Lorem ipsum,<br>
  dolor sit amet consectetur adipisicing elit. Doloribus molestiae aspernatur beatae harum, obcaecati ipsam neque eaque quos consequatur dolor ab voluptatibus. Provident, dolorem?
</p>

Как подключить SVG к html-странице

Есть три варианта добавления векторной графики. У каждого свои показания к применению.

Через тег <img>

Здесь всё так же, как и с растровой графикой:

Минус этого способа в том, что взаимодействовать с внутренними элементами SVG не получится. Файл будет как за стеклом: смотреть можно, а вот трогать нельзя.

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

Через background

Как и в случае с растровой графикой, SVG можно подключать через css-свойство background:

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

Вставка svg-кода напрямую

Вставлять svg-код прямо в html-файл — это третий способ. И для нас самый интересный. Он позволяет не просто отображать готовую графику, но и менять её (толщину элементов, заливку, обводку и так далее).

Такая вставка выручает, когда при взаимодействии с картинкой нужно её визуально модифицировать — например, перекрасить svg-иконку при наведении на неё курсора.

Метод 5: Псевдоэлементы с наложением цвета при наведении

Одна из последних тенденций в графическом дизайне — эффекта наложения цвета при наведении. Для этого можно использовать псевдоэлементы:

Пример:

Код HTML:

<ul>
   <li>
      <img alt="Image" src="images/thumb.jpeg">
      <p>Lorem Ipsum</p>
   </li>
   <li>
     <img alt="Image" src="images/thumb.jpeg">
     <p>Lorem Ipsum</p>
   </li>
</ul>

Код li active CSS:

ul li                { width: 49%; padding: 0 5px; display: inline-block; text-align: center; position: relative;}
ul li img            { max-width: 100%; height: auto;}
ul li p              { margin: 0; padding: 20px; background: #ffffff;}
ul li::after         { height: 100%; content: ""; background: rgba(0,0,0,0.8); position: absolute; top: 0; left: 5px; right: 5px; opacity: 0;}
ul li:hover::after,
ul li:hover::before  { opacity: 1; cursor: pointer;}
ul li::before        { content: "Hover Text"; position: absolute; top: calc(50% - 12px); left: calc(50% - 40px); color: #ffffff; opacity: 0; z-index: 10;}

Результат:

Теперь вы сможете применить описанные в статье приемы работы с hover active CSS в своих проектах.

Пожалуйста, оставьте ваши комментарии по текущей теме статьи. За комментарии, отклики, дизлайки, лайки, подписки низкий вам поклон!

Вадим Дворниковавтор-переводчик статьи «5 CSS3 TRICKS WITH PSEUDO ELEMENTS BEFORE AND AFTER»

5 последних уроков рубрики «Разное»

• Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.

  

  

  

  

  

  

  

  

  

  

• Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

  Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

• Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

• Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Каскадные стили

В SVG элементы могут быть стилизованы тремя способами: внешние CSS стили (внешний файл), внутренние стили (элементы ) и встроенные стили (в виде атрибута ). Для нас имеет смысл то, как происходит применение стилей к элементам.

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

В следующем куске кода, который просто отображает розовый круг с желтой обводкой, , и являются атрибутами предстваления.

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

Спецификация SVG перечисляет, какие SVG атрибуты могут быть установлены через CSS свойства. Некоторые из этих атрибутов доступны как CSS свойства (например и ), а некоторые — нет (, , ).

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

Если вы похожи на меня, то ожидаете, что у атрибутов представления больший приоритет, чем у других объявлений стилей. Я подразумеваю, что внешние стили переопределяются внутренними, внутренние — встроенными (inline). Т.о. наиболее «внутренние» стили имеют больший приоритет, и когда свойство указывается в атрибуте, оно более значимое и переопределяет все остальные объявления. Однако это не так.

На самом деле атрибуты представления имеют низкий приоритет, ниже внешних, внутренних и встроенных стилей. Они могут переопределить наследуемые элементом стили, и сами переопределяются любыми другими объявлениями стилей.

Отлично, теперь когда с этим все прояснилось, давайте вернемся к элементу и его содержимому.

Теперь мы в курсе, что не можем задать стили внутри элемента при помощи CSS селекторов. Также мы знаем, что стили, примененные к элементу , будут унаследованы всеми его потомками (которые внутри теневого DOM).

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

Однако это вызовет две проблемы:

1. Цвет заливки будет наследоваться всеми потомками , даже теми, которые не нужно стилиизовать. (Если внутри только один элемент, то это не проблема)
2. Если вы экспортируете SVG из графического редактора или получили его от дизайнера, и по какой-то причине не можете отредактировать SVG код, вероятно вы остановитесь на атрибутах представления, которые в свою очередь переопределят любые стили, применяемые к . И если вы определяете стили на , вы хотите, чтобы они были унаследованы всеми потомками, т.о. атрибуты представления вызвали бы неудобство.

И даже если у вас есть доступ к коду SVG и вы можете избавиться от атрибутов представления, настоятельно рекомендую этого не делать, потому что:

1. Удаление атрибутов, используемых для установки определенных свойств, сбросит эти свойства в значения браузера по умолчанию — в большинстве случаев это черная заливка и обводка (если говорить о цвете)
2. Сбрасывая все значения, вы вынуждаете себя определять стили для всего набора свойств.
3. Первоначально доступные атрибуты представления являются отличным механизмом запасного варианта, когда устанавливаемые вами внешние стили по какой-либо причине не применились. Если CSS файл не сможет подгрузиться, у вашей иконки по крайней мере будут хорошие стили по умолчанию. Я настоятельно рекомендую их сохранять.

Хорошо, теперь у нас есть эти атрибуты, но предположим, что мы хотим стилизовать каждый экземпляр иконки по-разному.

Давайте начнем с простого примера, а затем перейдем к более сложным.

Иконка рядом с текстом

На скриншоте выше видно, что значок находится слева от текста. Вспоминаем все свойства background и понимаем, что для размещения слева годится background-position (начальная позиция фонового изображения). Перейдём к коду.

Сперва ничего особенного — обычная ссылка:

Вся магия в CSS:

• Сначала задали путь до изображения.
• Потом установили начальное положение фона (background-position) в left center — ведь наша иконка левее текста (горизонтальная позиция left) и на одном с ним уровне (вертикальная позиция center).
• Размер фонового изображения (background-size) мы задали, чтобы предотвратить отдалённые проблемы.
  Дело в том, что иконка может оказаться больше блока, в котором её захотят показать. Тогда она некрасиво обрежется по бокам. Чтобы этого не произошло — указываем размеры, в которые иконка должна вписаться.

И наконец, устанавливаем режим повторения фона (background-repeat) в no-repeat. Без этого фоновая картинка будет дублироваться, пока не заполнит собой блок (как это выглядит — зависит от размеров картинки и html-элемента, где она задана фоном).

Что же мы получили:

Не совсем то, чего ожидали. Давайте разбираться.

Наш «конвертик» стал фоновым изображением для блока, который занимает ссылка. Текст ссылки — это содержимое того же блока. Оно и наложилось на наше фоновое изображение.

Значит, нужно отодвинуть это самое содержимое от левой границы блока (помните, мы прижали «конвертик» именно к левому краю). Причём отодвинуть более чем на 20px (ширина фоновой картинки, заданная background-size) — тогда увидеть наш фон уже ничто не помешает.

Делается это с помощью свойства padding (внутренний отступ).

Добавим в код такой отступ слева:

Вот теперь всё вышло как надо:

CSS псевдоэлемент before

предназначен для создания псевдоэлемента внутри элемента перед его контентом. По умолчанию данный псевдоэлемент имеет . Если псевдоэлементу before нужно установить другое отображение, то его нужно указать явно (например: ).

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

Псевдоэлемент не наследует стили. Поэтому если необходимо чтобы у него были стили как у родительского элемента, то ему необходимо их явно прописывать.

Адаптивный SVG

Отличительная черта адаптивного дизайна – меняющийся макет. Контент, включая изображения, разрабатывается так, чтобы заполнить контейнеры и экран. Если адаптивный дизайн – это что-то новое для вас, то статья Итана Маркотта – это отличный способ начать его изучение. SVG очень хорошо подходит для адаптивного дизайна:

• Адаптивный дизайн гибкий. Как и SVG! Он отлично выглядит при любом размере.
• Адаптивный веб дизайн заботится о том, как веб сайт выглядит и ведет себя в разных браузерах. Сравнительно маленькие файлы и удивительно гибкая система SVG могут стать частью этого.

Но, наверное, самая очевидная связь SVG с адаптивным дизайном – это возможность взаимодействовать с CSS @media queries. Media queries двигает, прячет или показывает элементы с помощью CSS, исходя из высоты и ширины окна браузера. Это могут быть любые элементы: сайдбар, навигация, рекламный блок, что угодно. Так же это могут быть и SVG элементы.

Представьте логотип, который отображается с разным уровнем детализации в зависимости от того, сколько доступно места. Это как раз то, о чем думал Джо Харрисон (Joe Harrison), когда создавал демо, используя всем известный логотип.

В вебе у нас всегда есть возможность поменять картинку на другую. Но в этом случае картинка не меняется, это все – одна и та же картинка. Ну или может быть одной и той же. Подпись «D» — это все та же «D», что используется в более сложной версии логотипа. Легко и просто с CSS.

Допустим, мы организовали SVG таким образом:

Это, кстати, очень легко делается в Illustrator. Созданные группы и имена превратятся в ID в конечном SVG, и вы сможете использовать эти ID для стилизации. Хотя я все-таки предпочитаю использовать классы, потому что они не уникальны (на странице не окажется несколько одинаковых ID) и потому что у них более низкий и более управляемый уровень CSS специфики. Достаточно просто заменить ID на классы с помощью функции «найти и заменить» в редакторе кода.

CSS может быть примерно таким:

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

Все может быть даже еще забавнее! Учитывая то, как используется SVG, media queries могут быть разными. У SVG, используемого как img, iframe или object, есть свой собственный viewport. Это значит, что CSS, встроенный внутри него, взаимодействует с media queries, основываясь на ширине SVG, а не на ширине всего окна браузера. То есть, вы можете написать media queries, зависящие от ширины картинки, а не всей страницы.

Это очень интересная идея: элемент, который сам себя настраивает на основе своих собственных атрибутов, а не атрибутов страницы. «Я могу быть шире? Ок. Я могу быть выше? Ок.» По этому, SVG быстрее реагирует на ситуацию, чем документ, частью которого он является.

Как я писал, SVG упоминается как «элемент запросов» в CSS, но пока что такого термина не существует в официальном HTML/CSS.

Свойства для SVG элементов

Определение стилей для SVG элементов происходит также, как и для обычных элементов HTML. Некоторые свойства являются общими, но есть и специфические свойства для объектов SVG/

Например: для обычного элемента HTML можно задавать цвет фона свойствами CSS или . В SVG ситуация несколько отличается: фоновый цвет определяется свойством (заполнение). Также обводка элемента определяется свойством , а не , как в обычном HTML. Полный список свойств приводится здесь.

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