Создание сайтов в Светлодарске, ДНР. Использование SVG с медиа-запросами

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

Эта статья является выдержкой из книги Тиффани «Мастер CSS, 3-е издание». Проверьте это, если вы хотите освоить другие расширенные функции CSS3, такие как Flexbox и Grid!

* * *

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

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

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

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

Сравнение векторных изображений и растровых изображений

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

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

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

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

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

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

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

➥enable-background="new 0 0 200 200">

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

Круг в SVG

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

➥enable-background="new 0 0 200 200">

Эффект от этого показан ниже.

Использование атрибута стиля для добавления цвета заливки

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

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

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

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

➥ 200 200» enable-background="new 0 0 200 200">

Встраивание 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"? >

➥ 200 200» enable-background="new 0 0 200 200">

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

элемента

В качестве альтернативы используйте

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

➥ xmlns="http://www.w3.org/1999/xhtml" />

Примечание: некоторые старые браузеры требуют, чтобы

элемент был заключен в теги или.

Элемент

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

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

Мы также можем ссылаться на внешнюю таблицу стилей, используя теги @importinside

Этот метод работает аналогично

методу.

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

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

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

используйте

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

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

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

SVG не соответствует блочной модели CSS.

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

SVG не соответствует блочной модели CSS

При использовании с 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 использует систему координат для размещения элементов. Например, чтобы создать , вам нужно задать координаты его центральной точки с помощью атрибутов 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"? >

➥«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 «/>

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

Простой круг и звезда SVG-изображение

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

#star {

fill: hsl (44, 100%, 50%) ;

}

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

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

circle {

fill: cornflowerblue;

stroke: darkblue;

stroke-width: 10;

stroke-dasharray: 10, 15;

stroke-linecap: round;

}

Вместе это дает нам результат ниже.

Простой круг и звезда SVG-изображение

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

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

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

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

вычисляемый widthи heightкорневого элемента SVG

значение viewBoxатрибута корневого элемента

любые преобразования масштабирования, примененные к элементу или его предкам

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

Не каждый атрибут 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 совершенно непоследовательна. На сегодняшний день вы должны использовать атрибуты элемента для установки свойств элементов , и .

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

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

Анимация и изменение свойств CSS SVG

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

➥ y="0px" viewBox="0 0 497 184" xml: space="preserve">

➥ xmlns="http://www.w3.org/1999/xhtml"/>

<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 «/>

Наш документ содержит два звездообразных многоугольника, каждый из которых имеет имя класса 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:

➥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"/>

Свойство 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 Web Design & Development, изображенный ниже.

Очень реальный логотип для вымышленной компании

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

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

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

➥svg» xmlns: xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

➥ viewBox="0 0 555 174" xml: space="preserve">

<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»/>

...

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

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

@media (max-width: 320px) {

[id=word-mark] {

display: none;

}

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

Отображение/скрытие элементов в зависимости от размера области просмотра SVG

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

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

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

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

Настройка атрибута viewBox на основе ширины области просмотра

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

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

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

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

<? xml version="1.0" encoding="utf-8"? >

➥ xmlns: xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

➥ viewBox="-20 -20 250 250" xml: space="preserve">

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

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

элемента и для

элементов:
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 background-size

Заключение

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

использовать CSS для стилизации элементов SVG

анимировать свойства SVG

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