Использование SVG с медиа-запросами

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

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

Все основные браузерные движки поддерживают спецификацию SVG 1.1, и они делали это годами. Поддержка функций SVG 2, с другой стороны, все еще находится в стадии разработки. Некоторые из того, что мы здесь обсудим, на момент написания статьи имели ограниченную поддержку браузера. Это могло измениться к тому времени, когда вы читаете это. Следите за проблемой Chromium meta — Внедряйте функции SVG2, чтобы отслеживать прогресс разработки в браузерах на базе Chromium. Посмотрите мета-выпуск о поддержке функций SVG 2, чтобы следить за работой Firefox по внедрению, и мета-выпуск WebKit о реализации SVG 2 для Safari. Средства отслеживания проблем могут быть неприятными для навигации, но на данный момент они являются лучшим способом отслеживания поддержки SVG 2.

Однако, прежде чем мы пойдем дальше, давайте поговорим о том, что такое SVG и почему вы должны его использовать.

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

Большинство изображений, используемых в настоящее время в Интернете, являются растровыми изображениями, также известными как растровые изображения. Растровые изображения состоят из пикселей в фиксированной сетке с заданным количеством пикселей на дюйм. JPEG, WebP, GIF и PNG являются примерами форматов растровых изображений.

Растровые изображения зависят от разрешения. Изображение в формате PNG с разрешением 144 PPI (пикселей на дюйм) отлично смотрится на устройстве с разрешением дисплея 144 PPI. Однако при просмотре с более высоким разрешением, 400 PPI, то же самое изображение может выглядеть нечетким. Растровые изображения также имеют фиксированные размеры и лучше всего выглядят в исходном размере. Масштабирование изображения размером 150 на 150 пикселей до 300 на 300 пикселей приводит к его искажению.

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

Независимость от разрешения - самое большое преимущество SVG. Мы можем масштабировать изображения вверх или вниз без потери качества. Одно и то же изображение отлично смотрится как на устройствах с высоким, так и на устройствах с низким PPI. Тем не менее, SVG плохо подходит для объема цветовых данных, необходимых для фотографий. Лучше всего подходит для рисунков и фигур. Используйте его вместо изображений в формате PNG и GIF, а также в качестве более гибкой замены шрифтов для значков.

Еще одним преимуществом SVG является то, что он был разработан для использования с другими веб-языками. Мы можем создавать, изменять и манипулировать SVG-изображениями с помощью JavaScript. Или, как мы увидим ниже, мы можем стилизовать и анимировать SVG с помощью CSS.

Связывание CSS с документами SVG

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

Использование style атрибута

Вот простой SVG-документ, в котором код создает черный круг:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" enable-background="new 0 0 200 200">
    <circle cx="101.3" cy="96.8" r="79.6" />
</svg>

На рисунке ниже показано, как этот код отображается в браузере.

Давайте придадим нашему кругу розовую заливку, используя CSS и style атрибут:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" 
➥enable-background="new 0 0 200 200">
    <circle cx="101.3" cy="96.8" r="79.6" style="fill: #f9f" />
</svg>

Результат этого показан ниже.

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

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

Внедрение CSS в документы SVG

Вместо style атрибута мы можем использовать <style> элемент:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0
➥ 200 200" enable-background="new 0 0 200 200">
    <style type="text/css">
        circle {
            fill: #0c0;
        }
    </style>
    <circle cx="101.3" cy="96.8" r="79.6" />
</svg>

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

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

Ссылка из SVG на внешний файл CSS

Как и в случае с HTML, ссылка на внешний файл CSS позволяет совместно использовать стили в нескольких документах SVG. Чтобы связать внешний файл CSS, добавьте <? xml-stylesheet ?> в начало вашего файла SVG:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0
➥ 200 200" enable-background="new 0 0 200 200">
    <circle cx="101.3" cy="96.8" r="79.6" />
</svg>

Использование <link> элемента

В качестве альтернативы можно использовать элемент HTML <link>. Если вы используете этот метод, вам нужно будет включить xmlns атрибут пространства имен, как показано ниже:

<link href="style.css" type="text/css" rel="stylesheet"
    ➥ xmlns="http://www.w3.org/1999/xhtml" />

Примечание: некоторым старым браузерам требуется, чтобы <link> элемент был заключен в теги <defs> или <g>.

<link> Элемент не является элементом SVG. Он принадлежит HTML и XHTML. XHTML - это вариант HTML, который обрабатывается в соответствии с правилами разметки XML. Согласно правилам XML, мы можем заимствовать элементы и их поведение из других диалектов XML, таких как XHTML. Однако для этого нам нужно сообщить браузеру, к какому пространству имен принадлежит элемент, используя xmlns атрибут.

Использование @import

Мы также можем ссылаться на внешнюю таблицу стилей, используя теги @import inside <style> и </style>:

<style type="text/css">
@import('style.css');
</style>

Этот метод функционирует аналогично <link> методу.

SVG и <img> элемент: ограничения

Связывание файлов SVG с внешними ресурсами, включая файлы CSS, не работает с <img> элементом. Это ограничение безопасности <img> элемента, который встроен в браузеры.

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

• используйте <style> элемент в вашем документе SVG, чтобы поместить свой CSS в строку
• используйте элемент <iframe> или <object> (см. Примечание ниже)

Примечание: В руководстве Крейга Баклера “Как добавить масштабируемую векторную графику на вашу веб-страницу” подробно рассматривается использование <iframe> и <object>.

В общем, вы должны использовать <iframe> over <object>. Однако <object> элемент может быть дочерним по отношению к <a> элементу, а <iframe> не может. Использование <iframe> или <object> также делает дерево документа SVG доступным для дерева документов родительского документа. Это означает, что мы можем использовать JavaScript для взаимодействия с ним (например, с document.querySelector('iframe').contentDocument).

Встроенный SVG и внешние ресурсы

При добавлении SVG в HTML браузер не будет загружать внешние ресурсы, на которые ссылается документ SVG. Однако мы можем ссылаться на CSS для нашего SVG-документа из <head> нашего HTML-документа:

<head>
    ⋮
    <link href="svg.css" type="text/css" rel="stylesheet" />
</head>

Элементы SVG в HTML-документах также становятся частью дерева HTML-документа. Если вы используете встроенный SVG, совершенно нормально объединить ваш HTML- и SVG-CSS-файлы в одной таблице стилей.

Различия между SVG и HTML

Хотя SVG и HTML являются языками разметки, между ними есть два существенных различия, которые влияют на то, как они работают с CSS:

• SVG не соответствует модели CSS box
• В SVG отсутствует схема позиционирования

SVG не соответствует модели CSS Box

При использовании с HTML верстка CSS соответствует правилам блочной модели CSS. SVG, с другой стороны, использует координаты для макета. Он соответствует тому, что лучше всего понимать как “модель формы”.

Формы SVG не ограничиваются прямоугольными прямоугольниками. В результате большинство свойств, связанных с коробочной моделью, не применяются к элементам SVG. Вы не можете, например, изменить padding или margin элемента SVG. Вы также не можете использовать свойства box-sizing, box-shadow outline или border-*. Макет сетки, поплавки и Flexbox также не работают.

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

В SVG отсутствует схема позиционирования

Когда CSS используется с HTML, поля элементов могут:

• существует в обычном потоке
• быть удаленным из обычного потока с float свойством
• быть удаленным из обычного потока с position свойством

Спецификация CSS ссылается на них как на схемы позиционирования. Схемы позиционирования в SVG не существуют. position Свойство не влияет на элементы SVG. Также не используются такие свойства, как top, left и bottom, которые зависят от расположения элементов. Вы также не можете перемещать элементы в документе SVG.

Вместо этого SVG использует систему координат для размещения элементов. Например, для создания <circle> объекта вам необходимо задать координаты его центральной точки с помощью атрибутов cx и cy, а также задать длину радиуса с помощью r атрибута. Многоугольник состоит из последовательности координат точек и отрезков линий, проведенных между ними. Другими словами, вы можете определить, где элемент будет отображаться на холсте SVG, но вы не можете “расположить” их в смысле CSS этого слова.

Что касается схем позиционирования, в SVG также отсутствует идея z-index и контекстов укладки.

Примечание: спецификация SVG 2 определяет поведение для z-index и контекстов стекирования в документах SVG, но большинство браузеров пока не поддерживают это.

Вместо этого элементы SVG укладываются в соответствии с порядком их источника. Те, которые появляются позже в документе, располагаются ближе к вершине стека. Если вы хотите изменить порядок размещения элементов SVG, вам нужно переместить их в исходном коде или использовать JavaScript для изменения их порядка в дереве DOM.

Фактически, большинство свойств CSS 2.1 не применяются к документам SVG. Исключения включают анимацию и преобразования, display, overflow, visibility filter и некоторые свойства, связанные со шрифтом и текстом. Вместо этого вам придется использовать свойства стиля, специфичные для SVG, с документами SVG. Большинство этих свойств также могут быть выражены в виде атрибутов элемента SVG.

Оформление элементов SVG

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

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="styles.css" type="text/css" ?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink=
➥"http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 497
➥ 184" enable-background="new 0 0 497 184" xml:space="preserve">
    <polygon id="star" points="77,23.7 98.2,66.6 145.5,66.5 111.2,
➥106.9,119.3,154 77,131.8 34.7,154 42.8,106.9 8.5,67.5 55.8,
➥66.6 "/>
    <circle id="circle" cx="245" cy="88.9" r="67.5"/>
</svg>

Эта разметка создает изображение, показанное ниже.

Хотя мы не можем использовать большинство свойств CSS в документах SVG, мы можем использовать CSS для изменения цвета элемента. Давайте сделаем нашу звезду желтой:

#star {
    fill: hsl( 44, 100%, 50% );
}

Вы часто увидите fill атрибут, используемый с тегами SVG — например, <circle fill="rgb( 255, 185, 0 )" cx="3" cy="10" r="100"> — но это также свойство, которое можно использовать с CSS.

Мы также можем использовать CSS для настройки элемента stroke, который является контуром фигуры SVG. Обводка фигуры существует, даже если stroke свойства не заданы. Давайте придадим нашему кругу темно-синюю пунктирную рамку шириной в десять пикселей. Мы также установим его fill свойство в cornflowerblue:

circle {
    fill: cornflowerblue;
    stroke: darkblue;
    stroke-width: 10;
    stroke-dasharray: 10, 15;
    stroke-linecap: round;
}

В совокупности это дает нам приведенный ниже результат.

Использование атрибутов SVG в качестве свойств CSS

Мы также можем использовать CSS для установки значений координат некоторых элементов фигуры: <rect>, <circle> и <ellipse>. Обычно мы используем атрибуты SVG для этих элементов:

<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="200" width="300" height="300" fill="#f60" />
</svg>

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

<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
    <style type="text/css">
      rect {
          x: 20px;
          y: 50px;
          width:  300px;
          height: 300px;
          fill: #f60;
      }
    </style>
    <rect />
</svg>

Свойства координат (x и y), свойства центральной координаты (cx и cy) и свойства радиуса (rx, ry и r) можно задать с помощью CSS. Так может width и height. Единицы измерения необязательны для атрибутов SVG. Значения CSS, с другой стороны, требуют единиц измерения. Для упомянутых здесь свойств допустимы как длины, так и проценты, но имейте в виду, что длины работают немного по-другому с документами SVG. Помните, что S в SVG означает масштабируемый. Вычисляемый размер элемента SVG также зависит от:

• вычисляемый width и height корневой элемент SVG
• значение viewBox атрибута корневого элемента
• любые масштабирующие преобразования, применяемые к элементу или его предкам

Другими словами, углы нашего <rect> элемента находятся (20, 50), (20, 320), (350, 320) и (20, 350) в системе координат SVG. Однако фактические размеры могут быть больше или меньше, в зависимости от вышеуказанных факторов.

Не каждый атрибут SVG доступен через CSS - по крайней мере, не в каждом браузере. Например, Chrome и Edge поддерживают использование path() функции CSS для задания данных пути или d атрибута:

path {
    d: path("M 454.45223,559.21474 -304.96705,163.45948 417.4767,-296.33928 Z");
}

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

Для других элементов формы спецификация SVG 2 совершенно непоследовательна. На сегодняшний день вы должны использовать атрибуты элемента для задания свойств <line>, <polyline> и <polygon> элементов.

Тем не менее, мы не ограничиваемся использованием селекторов типов (или элементов) для задания свойств. Мы могли бы, например, определить малые, средние и большие круги, используя селекторы классов:

<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
    <style type="text/css">

    .small {
        cx: 20px;
        cy: 20px;
        r:  20px;
        fill:  #0c0;
      }

      .medium {
        cx: 80px;
        cy: 80px;
        r:  60px;
        fill:  #fc0;
      }

      .large {
        cx: 220px;
        cy: 220px;
        r:  120px;
        fill: #00f;
      }

    </style>

    <circle class="small" />
    <circle class="medium" />
    <circle class="large" />
</svg>

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

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px"
➥ y="0px" viewBox="0 0 497 184" xml:space="preserve">
    <defs>
        <link href="twinkle.css" type="text/css" rel="stylesheet"
➥ xmlns="http://www.w3.org/1999/xhtml"/>
    </defs>
    <polygon class="star" points="77,23.7 98.2,66.6 145.5,66.5 111.2
➥,106.9 119.3,154 77,131.8 34.7,154 42.8,106.9 8.5,67.5
➥ 55.8,66.6 "/>
    <polygon class="star twinkle" points="77,23.7 98.2,66.6 145.5,
➥66.5 111.2,106.9 119.3,154 77,131.8 34.7,154 42.8,106.9
➥ 8.5,67.5 55.8,66.6 "/>
</svg>

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

@keyframes twinkle {
    from {
        fill-opacity: .4;
    }
    to {
        fill-opacity: 0;
        transform: scale( 2 );
    }
}
.star {
    fill: rgb( 255,195,0 );
    transform-origin: 50% 50%;
}
.twinkle {
    animation: twinkle 1.5s infinite forwards ease-in;
}

Здесь мы использовали свойство, специфичное для SVG fill-opacity. Как и в CSS, если мы можем интерполировать значение свойства стиля SVG, мы можем анимировать или преобразовать его. Вы можете видеть две разные точки анимации на изображении ниже.

Давайте посмотрим на другой пример. На этот раз мы создадим эффект рисования, перенеся stroke-dasharray свойство. Вот наш документ SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
➥xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 200 200" enable-background="new 0 0 200 200">
    <circle fill="transparent" stroke-width="16" cx="101.3"
➥ cy="96.8" r="79.6"/>
</svg>

stroke-dasharray Свойство принимает разделенный запятыми список значений длины или процента, которые создают пунктирный шаблон. Значения с нечетными номерами определяют длину штриха. Четные значения определяют длину разрыва. stroke-dasharray Значение 5, 10 означает, что штрих будет 5px длинным с промежутком 10px между каждой черточкой. Значение длины 5, 5, 10 чередующихся 5px и 10px штрихов с 5px промежутками между ними.

Мы можем использовать stroke-dasharray для создания эффекта рисования, начиная с нулевой длины штриха и большого промежутка и заканчивая большой длиной штриха и нулевым промежутком. Затем мы перейдем между ними. Вот как выглядит наш CSS:

circle {
    transition: stroke-dasharray 1s ease-in;
    fill: transparent;
    stroke-dasharray: 0, 500;
}
.animate {
    stroke-dasharray: 500, 0;
}

В начале перехода наш штрих невидим, потому что длина штриха 0 и наш пробел 500. Но когда мы добавляем animate класс в наш круг, мы сдвигаем длину штриха на 500 и устраняем пробел. Эффект немного напоминает рисование круга с помощью циркуля. Почему 500? Это наименьшее значение, которое сработало для создания этого конкретного эффекта.

Анимированный путь будущего

Помните наш пример определения пути с помощью CSS из предыдущего раздела? Возможно, когда-нибудь мы сможем анимировать пути в каждом браузере, используя CSS:

path {
    d: path("M357.5 451L506.889 192.25H208.111L357.5 451Z");
    transition: d 1s ease-in-out;
}
.straighten {
    d: path("M357.5 8871L406 -10113.75H208.111L357.5 351Z");
}

Однако на сегодняшний день только браузеры на базе Chromium, такие как Google Chrome и Microsoft Edge, поддерживают анимацию определений путей таким образом. Чтобы это работало в других браузерах, используйте библиотеку JavaScript, такую как GreenSock и ее MorphSVGPlugin. В дополнение к кроссбраузерной совместимости, GreenSock и MorphSVGPlugin также значительно упрощают преобразование между двумя фигурами, независимо от количества точек в каждой.

Использование SVG с медиа-запросами

В HTML-документах мы можем показывать, скрывать или переставлять части страницы в зависимости от условий области просмотра. Например, если окно браузера имеет ширину 480 пикселей, мы могли бы перенести нашу навигацию с горизонтальной на вертикальный, сворачиваемый список. Мы можем сделать нечто подобное с медиа-запросами и документами SVG. Рассмотрим логотип, такой как логотип фиктивного веб-дизайна и разработки Hexagon, изображенный ниже.

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

Давайте проведем различие между областью просмотра документа HTML и областью просмотра документа SVG. Когда SVG является встроенным, окно просмотра HTML и окно просмотра SVG являются одним и тем же. Документ SVG ведет себя как любой другой HTML-элемент. С другой стороны, когда документ SVG связан — как с элементами <iframe>, <object> или <img> — мы имеем дело с областью просмотра документа SVG.

Медиа-запросы работают в обоих случаях, но когда документ SVG связан, его область просмотра не зависит от его HTML-документа. В этом случае размер окна браузера не определяет размер области просмотра SVG. Вместо этого размер области просмотра определяется размерами элемента <object>, <iframe> или <img>. Возьмите (сокращенный) документ SVG, который следует в качестве примера:

<svg version="1.1" id="HexagonLogo" xmlns="http://www.w3.org/2000/
➥svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
➥ viewBox="0 0 555 174" xml:space="preserve">
    <defs>
        <style type="text/css">
        /* CSS goes here */
        </style>
    </defs>
    <g id="hex">
        <polygon id="hexagonbg" points="55.2,162 10,86.5 55.2,11
➥ 145.5,11 190.7,86.5 145.5,162  "/>
        <path id="letterH" fill="#FFFFFF" d="M58,35.5h33v35.2h18.
➥4V35.5 h33.2v103.4h-33.2v-38.3H91v38.3H58V35.5z M77.5,126.5V87.
➥3h45.6v39.2h4V47.9h-4v35.6H77.5V47.9h-4v78.6H77.5z"/>
    </g>

    <g id="word-mark">
        <g id="hexagon-word">
            ...
        </g>
        <g id="web-design-and-dev">
            ...
        </g>
    </g>
</svg>

Примечание: полная демонстрация этого метода, включая полный исходный текст этого документа SVG, доступна в архиве кода.

В небольших видовых экранах давайте покажем только букву H в виде шестиугольника:

@media (max-width: 320px) {
    [id=word-mark] {
        display: none;
    }
}

Теперь, когда наш контейнер SVG меньше или равен 20em, будет видна только часть символа нашего логотипа.

Чтобы запустить это представление из HTML-документа, задайте ширину контейнера SVG:

<iframe src="hexlogo.svg" style="width: 320px; border:0"></iframe>

Как вы, возможно, заметили, посмотрев на изображение выше, наше SVG-изображение сохраняет свои внутренние размеры, даже если часть его была скрыта. Это, к сожалению, является ограничением SVG. Чтобы исправить это, нам нужно изменить viewBox атрибут документа SVG, но только тогда, когда область просмотра меньше определенного размера. Это отличный вариант использования для matchMedia (который обсуждается в главе 10 “Условное применение CSS”).

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

<script type="text/javascript">
const svg = document.querySelector( 'svg' );

/* Store the original value in a variable */
const originalViewBox = svg.getAttribute( 'viewBox' );

/* Define our media query and media query object */
const mq = matchMedia( '( max-width: 320px )' );

/* Define the handler */
const updateViewBox = () => {
    if (mq.matches) {
        /* Change the viewBox dimensions to show the hexagon */
        svg.setAttribute( 'viewBox', '0 0 200 174' );
    } else {
        svg.setAttribute( 'viewBox', originalViewBox );
    }
}

svg.addEventListener( 'SVGLoad', updateViewBox );

/* Fire if the media condition changes */
mq.addEventListener( 'change', updateViewBox );
</script>

Теперь, когда размер контейнера SVG составляет 320 пикселей или меньше, значение viewBox будет "0 0 200 174" равно. Когда размер превышает 320 пикселей, viewBox восстанавливается его первоначальное значение.

Поскольку этот метод использует либо onload атрибут события, либо SVGLoad событие, хорошей идеей будет встроить наши CSS и JavaScript в файл SVG. Когда CSS является внешним, SVGLoad событие может сработать до завершения загрузки связанного с ним CSS.

Использование медиа-запросов с background-size

Документы SVG и медиа-запросы не ограничиваются изображениями переднего плана. Мы также можем изменить размер окна просмотра SVG, используя свойство CSS background-size.

Мы начнем с этого документа SVG:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
➥ xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
➥ viewBox="-20 -20 250 250" xml:space="preserve">
    <style type="text/css">
        circle {
            stroke: #000;
            stroke-width: 30;
            fill: #009688;
        }
        @media ( width: 100px ) {
            circle {
                fill: #673ab7;
            }
        }
        @media ( width: 300px ) {
            circle {
                fill: #ffc107;
            }
        }
    </style>
    </defs>
    <circle cx="100" cy="100" r="100" />
    <circle cx="100" cy="100" r="50" />
</svg>

Это простой случай. Наши <circle> элементы приобретают новый fill цвет при определенной ширине области просмотра. Когда ширина области просмотра составляет 20 пикселей, fill значение равно teal. При ширине 300 пикселей он становится желтым.

Чтобы это сработало, мы должны использовать наше изображение SVG в качестве фонового изображения и установить background-size свойство селектора. В этом случае мы будем использовать наше изображение в качестве фона для <body> элемента и для <li> элементов:

body, li  {
    background: url(circles.svg);
}
body  {
    background-color: #9c27b0;
    background-size: 300px auto;
}
li {
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 1em auto;
    padding-left: 40px;
    font-size: 24px;
    margin: 1rem 0;
}

Результат показан ниже.

Заключение

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

• использовать CSS для оформления элементов SVG
• анимировать свойства SVG
• использовать медиа-запросы CSS и matchMedia API для отображения и сокрытия частей документа SVG.