Графика

1. Растровая и векторная графика

Современным веб-сайтам и приложениям очень часто требуется отображать графику. Графические файлы могут иметь различные форматы, например: jpg, png, gif, bmp, svg и многие другие. Все они несут информацию о каком-либо изображении, но обладают своими уникальными свойствами и приспособлены для решения различных задач.

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

На веб-страницах графические файлы любых поддерживаемых типов мы можем отобразить с помощью HTML-тега <img>, CSS-свойства background-image, кроме того SVG-изображения могут быть выведены с помощью своей собственной разметки внутри парного тега <svg>.

1.1 Растровая графика

Растровое изображение представляет собой набор точек одинакового размера и формы — пикселей, каждый из которых несёт информацию о цвете. При сильном увеличении такое изображение напоминает решётку. Но так как точки имеют небольшие размеры, человеческий глаз воспринимает их как единый рисунок. Самые популярные растровые форматы: jpeg, gif, png. 

Растровая графика удобна для создания качественных фотореалистичных изображений, цифровых рисунков и фотографий.

Преимущества

• Возможность создания изображений любой сложности с большим количеством деталей и широкой цветовой гаммой (видимым диапазоном цветов);
• Простота работы с растровой графикой;
• Большое количество доступных инструментов для создания и редактирования изображений.

Недостатки

• Большой объём занимаемой памяти: чем больше изображение, тем больше пикселей оно содержит, и, соответственно, тем больше места нужно для хранения такого изображения;
• На размер изображения сильно влияет глубина цвета: чем больше цветов представлено, тем больше размер файла;
• Невозможность масштабирования без потерь: при изменении размера оригинального изображения в результате процесса интерполяции неизбежно происходит потеря качества.

1.2 Векторная графика

Векторные изображения состоят не из пикселей, а из набора опорных точек и соединяющих их кривых, и описываются математическими формулами. Векторным форматом изображений в web является SVG. Это язык разметки, содержащий множество различных элементов для определения фигур изображения, а также параметров их отображения. Каждое такое изображение можно разложить на множество простых объектов, состоящих из контура и заливки.

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

Преимущества

• Векторные изображения масштабируются без потери качества;
• Объём занимаемой памяти не зависит от размера изображения;
• Простые векторные изображения «весят» значительно меньше растровых аналогов.
• При встраивании SVG в HTML-код изображения легко поддаются стилизации и анимации.

Недостатки

• Для отображения векторных изображений требуется произвести ряд вычислений, что требует повышенных вычислительных мощностей;
• Сложное изображение с широкой цветовой гаммой может требовать огромного количества точек и кривых, что приведёт к большому объёму занимаемой памяти и высокой вычислительной нагрузке.
• Процесс создания и редактирования векторной графики более сложен и требует дополнительных знаний.

2. Графика и плотность пикселей

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

2.1 Встраиваемые изображения

Для встраиваемых изображений в теге <img> эту проблему можно решить следующим образом:

<img srcset="image-320w.jpg,
             image-480w.jpg 1.5x,
             image-640w.jpg 2x"
     src="image-320w.jpg"
     alt="image">

Мы задаём с помощью атрибута src изображение по умолчанию, а затем атрибутом srcset проверяем device pixel ratio экрана устройства и задаём подходящее изображение.

В нашем примере:
– при dpr, равном 2, выводим изображение в двойном разрешении, шириной 640px;
– при dpr, равном 1.5, выводим изображение шириной 480px;
– при dpr, равном 1, выводим изображение шириной 320px;

Возможен и другой вариант:

<img width="320"
     srcset="image-320w.jpg 320w,
             image-480w.jpg 480w,
             image-640w.jpg 640w"
     src="image-320w.jpg"
     alt="image">

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

2.2 Фоновые изображения

Для фоновых изображений в CSS нужно использовать следующий медиавыражения:

.selector {
  background-image: url(image-320w.jpg);
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  .selector {
    background-image: url(image-480w.jpg);
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .selector {
    background-image: url(image-640w.jpg);
  }
}

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

3. Адаптивная графика

Различный dpr экранов устройств не единственная проблема растровых изображений. Все современные сайты веб-разработчики стараются выполнить в адаптивной вёрстке. А это означает поддержку самых разных экранов — от очень больших и до самых маленьких.

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

3.1 Медиавыражения для изображений

Наша задача — вывести подходящее изображение в зависимости от размеров вьюпорта экрана:

<img srcset="image-320w.jpg 320w,
             image-480w.jpg 480w,
             image-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="image-800w.jpg"
     alt="image">

В данном примере в атрибуте srcset через запятую указываются изображения и их реальная ширина в пикселях.

Атрибут sizes определяет перечень медиавыражений (в данном случае максимальную ширину экрана) и указывает предпочтительную ширину изображения (размер слота).

С такими атрибутами, браузер сделает следующее:

1. Проверит ширину экрана устройства.
2. Определит подходящее медиавыражение из списка в атрибуте sizes.
3. Посмотрит на размер слота к этому медиавыражению.
4. Загрузит изображение из списка из srcset, которое имеет тот же размер, а если такого нет, то первое изображение, которое больше размера данного слота. 

В примере выше браузер с viewport width 480px определит подходящее медиавыражение (max-width: 480px) и выберет слот 440px, затем будет загружено изображение image-480w.jpg, так как свойство ширины (480w) наиболее близко к значению 440px. 

Старые браузеры, не поддерживающие эти возможности, просто проигнорируют их и возьмут изображение по адресу из атрибута src.

3.2 Теги <picture> и <source>

Иногда нам требуется максимальный контроль и оптимизация изображений и возможностей тега <img> становится недостаточно. Мы хотим на всём протяжении адаптива указывать оптимальные изображения для любых типов экранов. Здесь на помощь нам приходят теги <picture> и <source>.

HTML-элемент <picture> служит контейнером для одного или более элементов <source> и одного элемента <img> для обеспечения оптимальной версии изображения для различных размеров экрана. 

Браузер рассмотрит каждый из дочерних элементов <source> и выберет один наиболее соответствующий. Если же совпадений среди элементов <source> найдено не будет, то будет выбран файл, указанный в атрибуте src элемента <img> . 

<picture>
  <source media="(max-width: 767px)" srcset="image-320w.jpg">
  <source media="(min-width: 768px)" srcset="image-640w.jpg">

  <img src="image-640w.jpg" alt="image">
</picture>

Атрибут media тега <source> позволяет задать медиавыражение, а srcset — изображение (или набор изображений), ему соответствующее.

Чуть более сложный пример, в котором учтены экраны с высокой плотностью пикселей:

<picture>
  <source media="(max-width: 767px)" 
          srcset="image-320w.jpg 1x,
                  image-640w.jpg 2x">

  <source media="(min-width: 768px)"
          srcset="image-640w.jpg 1x,
                  image-1280w.jpg 2x">

  <img src="image-640w.jpg" alt="image">
</picture>

3.3 Поддержка форматов изображений

С развитием веб-технологий в разных браузерах стала появляться поддержка новых форматов изображений, таких как WebP, JPEG-2000 и других, цель которых — сохранить высокое качество при малом размере файла.

Теги <picture> и <source> позволяют указать предпочтительный тип изображения, а если он не поддерживается браузером, то будет выведено изображение иного типа, в поддержке которого мы уверены:

<picture>
  <source type="image/svg+xml" srcset="image.svg">
  <source type="image/webp" srcset="image.webp">
  <img src="image.png" alt="image">
</picture>

В данном примере мы пытаемся сначала вывести svg, затем webp, а если эти типы браузером не поддерживаются, то будет выведено png.

3.4 Комбинация всех возможностей

Собрав все возможности вместе, мы можем получить следующий HTML-код:

<picture>
  <source type="image/webp"
          media="(max-width: 767px)" 
          srcset="image-320w.webp 1x,
                  image-640w.webp 2x">

  <source media="(max-width: 767px)" 
          srcset="image-320w.jpg 1x,
                  image-640w.jpg 2x">

  <source type="image/webp"
          media="(min-width: 768px)"
          srcset="image-640w.webp 1x,
                  image-1280w.webp 2x">

  <source media="(min-width: 768px)"
          srcset="image-640w.jpg 1x,
                  image-1280w.jpg 2x">

  <img src="image-640w.jpg" alt="image">
</picture>

Мы учли:
– современные типы изображений;
– медиавыражения для различных вьюпортов;
– поддержку экранов высокой плотности.

4. Вёрстка адаптивных изображений проекта

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

На макете 768px видно, что карточки перестроены в колонку, а изображения стали больше. Подходящая точка перелома к такому виду — 1170px, при этом карточки стоит ограничить шириной 708px и выровнять их по центру.

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

Не забудем использовать современный формат изображений wepb. Figma не позволяет экспортировать изображения такого типа, однако вы можете воспользоваться любым онлайн-конвертером.

Получим примерно следующее:

<picture class="article-card__picture">
  <source
	media="(max-width: 450px)"
	type="image/webp"
	srcset="@@img_webp"
  />
  <source media="(max-width: 450px)" srcset="@@img" />

  <source
	media="(max-width: 1169px)"
	type="image/webp"
	srcset="@@img_tablet_webp"
  />
  <source media="(max-width: 1169px)" srcset="@@img_tablet" />

  <source type="image/webp" srcset="@@img_webp" />

  <img src="@@img" alt="@@alt" class="article-card__img" />
</picture>

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

<div class="listing__article-list">
  <!-- prettier-ignore -->
  @@loop('article-card.html', [
    {
	  "class": "listing__article-card",
	  "img": "assets/images/blog/theatre.jpg",
	  "img_tablet": "assets/images/blog/theatre_tablet.jpg",
	  "img_webp": "assets/images/blog/theatre.webp",
	  "img_tablet_webp": "assets/images/blog/theatre_tablet.webp",
	  "alt": "Theatre Photosession",
	  "title": "Фотосессия в стенах Театра драмы",
	  "descr": "Организовывая фотосессию для локального бренда...",
	  "time": "26.11.2021",
	  "datetime": "2021-11-26T00:00"
    }
  ])
</div>

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

5. SVG: векторная графика для веб-документов

5.1 Основы SVG

SVG (Scalable Vector Graphics) это язык разметки, являющийся расширением XML для описания векторных изображений. Он схож с привычным нам HTML, но содержит множество собственных элементов для описания фигур векторного изображения, а также параметров их отображения. Как векторный формат, SVG имеет все его преимущества и недостатки, описанные в начале данного урока.

Самые простые и понятные SVG-элементы это <rect> (прямоугольник) и  <circle> (круг).

Пример разметки прямоугольника:

<svg width="120" height="120"
     viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg">

  <rect x="0" y="0" width="100" height="100" />
</svg>

Результат:

Пример разметки круга:

<svg width="120" height="120"
     viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg">

  <circle cx="50" cy="50" r="50"/>
</svg>

Результат:

Основные атрибуты SVG:

• width и heigth — ширина и высота изображения, аналогичны соответствующим атрибутам HTML;
• viewBox —  это набор четырёх чисел: min-x, min-y, width и height, — разделённых пробелами, которые задают прямоугольник в своём собственном пространстве, определяющий расположение и размеры окна отображения элементов SVG;
• xmlns — не является ссылкой, это наименование пространства имён SVG. Не требуется, если вы встраиваете SVG-код в HTML, однако обязателен, если подключается внешний SVG-файл (например в теге <img>)

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

Произвольная фигура

Задаётся с помощью элемента <path> и атрибута d, значение которого является списком команд пути, состоящих из буквы и некоторых чисел, представляющих собой параметры данной команды.

<svg width="120" height="120"
     viewBox="0 0 80 80"
     xmlns="http://www.w3.org/2000/svg">

  <path d="m0,20a20,20 0 0 1 40,0a20,20 0 0 1 40,0q0,30 -40,60q-40,-30 -40,-60z"/>
</svg>

Результат:

5.2 Вывод SVG на веб-странице

1. С помощью HTML-элемента <img> или CSS-свойства bsckground-image

Добавляем точно так же, как и любое другое изображение:

<img
    src="image.svg"
    alt="image"
    height="100"
    width="100" />

Плюсы

• Быстрый и привычный синтаксис вывода изображения;
• Внешние файлы кэшируются, второй раз загружать изображение не нужно.

Минусы

• Внешние таблицы стилей, вызываемые из файла SVG, не действуют, а значит невозможно управлять содержимым SVG с помощью CSS.
• Невозможно влиять на изображение с помощью JavaScript (например, анимации пошаговой отрисовки);
• Большое количество внешних файлов замедляет загрузку страницы.

2. Встраиваем SVG-код в HTML

Мы можем открыть SVG-файл в текстовом редакторе, скопировать код и вставить его в наш HTML документ. Фрагмент встраиваемого SVG-кода должен начинается и заканчивается с тегов <svg> и </svg>. Ничего прочего, что может находиться в разметке файла, включать не нужно.

Плюсы

• Уменьшается количество HTTP-запросов и, следовательно, может уменьшиться время загрузки страницы;
• Можем управлять содержимым с помощью CSS, присваивая элементам классы, идентификаторы и любые другие поддерживаемые атрибуты. Кроме того все атрибуты представления SVG могут использоваться как CSS-свойства;
• Можем влиять на SVG с помощью JavaScript;

Минусы

• Метод плохо подходит, если изображение часто дублируется, так как это приводит к ресурсоёмкому обслуживанию кода;
• Дополнительный SVG-код увеличивает размер вашего HTML-файла, что может приводить к замедлению загрузки и отображения страницы;
• Браузер не может кешировать встроенный SVG, так как он кеширует обычные изображения.

3. Внешний символьный SVG-спрайт

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

Как итог — мы получаем один внешний файл и небольшое количество разметки в HTML.

Плюсы

• Уменьшается количество HTTP-запросов, так как загружаем только один файл, а значит время загрузки страницы также может уменьшиться;
• Внешние файлы кэшируются, второй раз загружать спрайт не нужно.
• Можем частично управлять содержимым с помощью CSS: нам доступно изменение одного любого цвета для любого количества SVG-элементов с помощью ключевого слова currentColor (об этом поговорим чуть позже);
• Метод отлично подходит, если изображения часто дублируются.

Минусы

• Внешние таблицы стилей, вызываемые из файла SVG, не действуют, а значит невозможно управлять содержимым SVG с помощью CSS (но один цвет всё же задать можно).
• Невозможно влиять на изображение с помощью JavaScript;

5.3 Цвет контура и заливка

SVG-элементы имеют два основных атрибута, определяющих цвет:

• fill — является атрибутом представления, определяющим цвет внутренней части данного графического элемента (фигуры или текста).
• stroke — это атрибут обводки, определяет цвет контура в данном графическом элементе. Значение по умолчанию — none.

Пример разметки прямоугольника:

<svg width="120" height="120"
     viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg">

  <rect x="5" y="5" width="90" height="90"
        fill="PeachPuff"
        stroke="Coral"
        stroke-width="10"
  />
</svg>

Результат:

5.4 Ключевое слово currentColor

Ключевое слово currentColor представляет вычисленное значение свойства color у конкретного элемента. Оно позволяет унаследовать цвет, заданный родительскому элементу.

Пример разметки:

<div style="color: coral">
  <svg width="120" height="120"
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg">
	   
    <circle cx="50" cy="50" r="50" fill="currentColor" />
  </svg>
</div>

Результат:

Ключевое слово currentColor работает даже внутри внешнего символьного спрайта. А значит мы можем задать цвет элементу, а затем менять его, например, при наведении мыши.

5.5 Наложение SVG-элементов

Здесь всё просто: элемент, расположенный в коде ниже, визуально выводится выше.

Пример разметки:

<svg width="120" height="120"
     viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg">

  <rect x="0" y="0" width="100" height="100" fill="Coral" />
  <circle cx="50" cy="50" r="40" fill="PeachPuff" />
</svg>

Результат:

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

Для логической группировки набора связанных графических элементов используется парный тег <g>. Любые стили, применяемые к данному элементу, будут также применены ко всем его потомкам.

Пример разметки:

<svg width="120" height="120"
     viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg">

  <g stroke="#B22222" stroke-width="10">
    <rect x="5" y="5" width="90" height="90" fill="Coral" />
    <circle cx="50" cy="50" r="25" fill="PeachPuff" />
  </g>
</svg>

Результат:

5.7 Некоторые особенности SVG и символьных спрайтов

1. Атрибуты fill, stroke, style и другие имеют приоритет над свойствами, заданными в CSS. Если вам необходимо управлять SVG с помощью стилей, удалите соответствующие атрибуты там, где это необходимо.
2. Редакторы и различные ресурсы, позволяющие экспортировать SVG-изображения, часто задают стили SVG-элементам с помощью классов с каким-либо стандартным наименованием, такие правила будут прописаны в теге <style> непосредственно внутри разметки SVG.
   Если вы встраиваете SVG-код непосредственно в HTML, такие классы могут привести к непредвиденным наложениям CSS-свойств.
   Кроме того такие стили нельзя применять для символьных спрайтов. В случае возникновения данной проблемы просто пропишите соответствующие атрибуты непосредственно элементам или группам элементов, а стилизацию по классам удалите.
   Используемый нами для сборки спрайта плагин gulp-svgstore автоматически встраивает стили для элементов.
3. В разметке файлов, которые вы добавляете в символьный спрайт, не должно быть следующих элементов: <defs>, <linearGradient>, <mask>.
4. SVG-изображение, выведенное с помощью внешнего символьного спрайта может оказаться залитым в чёрный цвет. Чтобы решить эту проблему, перед сборкой спрайта пропишите в разметке файла непосредственно тегу <svg> атрибут fill со значением none.

6. Пример подготовки SVG для символьного спрайта и стилизация

В нашем учебном проекте имеются кнопки и ссылки в виде стрелок, которые при наведении должны становиться красными:

При экспорте иконки из Figma мы получим следующий код:

<svg width="92" height="62" viewBox="0 0 92 62" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path stroke="#1F1E1E" stroke-width="2" stroke-linecap="round" d="M40 52.2132C44.1781 56.4088 49.5013 59.266 55.2966 60.4235C61.0918 61.5811 67.0986 60.987 72.5576 58.7164C78.0166 56.4457 82.6824 52.6006 85.9651 47.6671C89.2479 42.7336 91 36.9334 91 31C91 25.0666 89.2479 19.2664 85.9651 14.3329C82.6824 9.39943 78.0166 5.55425 72.5576 3.28363C67.0986 1.013 61.0918 0.4189 55.2965 1.57646C49.5013 2.73401 44.1781 5.59123 40 9.78681" />
  <path stroke="#1F1E1E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5 31L65 31"/>
  <path stroke="#1F1E1E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M58 24L65 31L58 38"/>
</svg>

Мы можем объединить общие свойства с помощью тега <g> и применить ключевое слово currentColor для атрибута stroke, кроме того удалим атрибуты высоты и ширины:

<svg viewBox="0 0 92 62" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M40 52.2132C44.1781 56.4088 49.5013 59.266 55.2966 60.4235C61.0918 61.5811 67.0986 60.987 72.5576 58.7164C78.0166 56.4457 82.6824 52.6006 85.9651 47.6671C89.2479 42.7336 91 36.9334 91 31C91 25.0666 89.2479 19.2664 85.9651 14.3329C82.6824 9.39943 78.0166 5.55425 72.5576 3.28363C67.0986 1.013 61.0918 0.4189 55.2965 1.57646C49.5013 2.73401 44.1781 5.59123 40 9.78681" />
    <path d="M5 31L65 31"/>
    <path d="M58 24L65 31L58 38"/>
  </g>
</svg>

Cобираем SVG-спрайт и создаём новый БЭМ-блок для нашей стрелки. Разметку покажем на примере обыкновенной кнопки, которую можно будет в дальнейшем применить для слайдера на главной странице:

<button type="button" class="arrow">
  <svg class="arrow__icon" width="92" height="62">
    <use xlink:href="assets/icons/symbols.svg#arrow"></use>
  </svg>
</button>

.arrow {
  flex-shrink: 0;
  position: relative;
  display: inline-block;
  width: 92px;
  height: 60px;
  padding: 0;
  border: none;
  background: none;
  color: @black;
  font-size: 0;
  text-decoration: none;
  transition: color 0.2s;

  @media @bw1340 {
    width: 67px;
    height: 40px;
  }

  &:hover {
    color: @red;
  }

  &__icon {
    width: 100%;
    height: 100%;
  }
}

Теперь цвет нашей SVG-иконки определяется CSS-свойством color родительского элемента. По умолчанию он чёрный, а при наведении мыши на кнопку — красный.

7. Иконочные шрифты

Иконочные шрифты — это обычные текстовые файлы, в которых стандартные символы были заменены на иконки. Это означает, что такие изображения можно легко модифицировать при помощи CSS: задавать размер текста, цвет, тень и так далее.

Масштабируются такие иконки намного лучше, чем растровые изображения, так как изменение размера не приводит к ухудшению качества изображения.

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

Один из самых популярных ресуров, посвящённых иконочным шрифтам — fontawesome.

Иконочные шрифты можно создать и самостоятельно с помощью созданных для этого редакторов.

Тем не менее использовать данный подход на данный момент не рекомендуется. Это костыль, возникший из потребности в использовании векторных изображений в то время, когда других альтернатив ещё не существовало. Используйте SVG.

8. Материалы для самостоятельного изучения

1. Элемент <picture>:
   https://developer.mozilla.org/ru/docs/Web/HTML/Element/picture
2. Элемент <source>:
   https://developer.mozilla.org/ru/docs/Web/HTML/Element/source
3. Документация по SVG:
4. https://developer.mozilla.org/ru/docs/Web/SVG