Переопределение атрибутов представления через CSS
Атрибуты представления переопределяются другими объявленными стилями. Мы можем этим воспользоваться, чтобы внешние стили переопределяли свойства наследуемых значений элемента .
Используя ключевое слово inherit в CSS, можно сделать это довольно просто. Посмотрите на следующий пример, в котором имеется иконка мороженого, сделанная с помощью одной линии. Автор иконки Erin Agnolu из проекта Noun. Пусть мы хотим изменить цвет единственной линии для разных экземпляров.
Содержание иконки () определяется внутри элемента . Это означает, что они не будут отображаться на холсте.
Затем мы рендерим несколько экземпляров иконки с помощью .
И устанавливаем ширину и высоту через CSS. Я использую такие же размеры как у , но они не обязательно должны быть такими же. Однако, чтобы избежать избытка пустого места внутри SVG, убедитесь, что пропорции сохранены.
В итоге получается следующее:
Обратите внимание на черные границы, т.о. можно видеть границы каждого SVG и удостовериться, что в первом случае (где мы лишь определили иконку) ничего не рандерится
Итак, SVG документ все равно будет отображаться на странице, даже если в нем нечего показывать. Чтобы этого избежать, скрываем первый SVG (). Если этот элемент не скрывать, по умолчанию он будет показываться на странице с размерами 300x150px, так что в итоге вы получите белую область на странице.
Теперь попробуем изменить цвет заливки для разных экземпляров:
Цвет все еще не изменился, т.к. он наследуется от элемента path (). Поэтому для наследуем цвет заливки:
И вуаля! Теперь цвет, указанный для каждого , применяется для . Посмотрите демо, поиграйтесь с цветами, создайте больше экземпляров:
Эта техника полезна, когда нужно применить внутри наследуемые от главного элемента стили. Но в большинстве случаев требуется не совсем то. Поэтому перейдем к другим примерам.
Как подключить SVG к html-странице
Есть три варианта добавления векторной графики. У каждого свои показания к применению.
Через тег <img>
Здесь всё так же, как и с растровой графикой:
Минус этого способа в том, что взаимодействовать с внутренними элементами SVG не получится. Файл будет как за стеклом: смотреть можно, а вот трогать нельзя.
Такой вариант подключения используется для контентных svg-изображений, которые менять внешне не требуется (вроде графиков, схем и логотипов).
Через background
Как и в случае с растровой графикой, SVG можно подключать через css-свойство background:
Минус тут тот же самый, что и у предыдущего способа. Этот случай подходит для декоративных изображений (фоны, иконки и прочая мелочь), которые тоже внешне менять не нужно.
Вставка svg-кода напрямую
Вставлять svg-код прямо в html-файл — это третий способ. И для нас самый интересный. Он позволяет не просто отображать готовую графику, но и менять её (толщину элементов, заливку, обводку и так далее).
Такая вставка выручает, когда при взаимодействии с картинкой нужно её визуально модифицировать — например, перекрасить svg-иконку при наведении на неё курсора.
Что такое SVG
SVG (сокращение от Scalable Vector Graphics — «масштабируемая векторная графика») — это вид графики, которую создают с помощью математического описания геометрических примитивов (линий, кругов, эллипсов, прямоугольников, кривых и так далее), которые и образуют все детали будущего изображения.
То есть в этом формате хранится не сама картинка, а инструкции для её построения по точкам и кривым. Они написаны на языке разметки SVG, расширяющем XML.
Достоинства SVG
Прелесть SVG раскрывает масштабирование. Если увеличить растровое изображение сверх 100%-ного размера — проявляется пикселизация: отдельные точки превращаются в одноцветные блоки пикселей, границы областей становятся ступенчатыми, и в целом картинка выглядит негладко, некрасиво.
Если же увеличить векторное изображение — все его детали останутся чёткими, то есть их видимое разрешение не уменьшится. Поэтому svg-картинки отображаются на самых больших разрешениях без потери качества — и просто идеальны для адаптивных сайтов.
У svg-графики есть ещё одно достоинство. Её можно открывать как HTML или CSS и менять в любом редакторе кода, и даже на лету. Подробнее об этом ниже.
И наконец, при прочих равных SVG весит намного меньше растровых изображений.
Проверка адаптивности
Без чего невозможно представить современный сайт? Верно, без адаптивных свойств. В наше время оформление мобильной версии сайта часто является даже более важным пунктом, чем наличие удобной десктопной версии.
Давайте проверим, как отображается наша новая веб-страница при разной ширине вьюпорта. Для большего удобства вы можете воспользоваться режимом имитации девайсов в браузере Google Chrome — удобный инструмент, при котором вы словно просматриваете сайт с iPhone, iPad и т. п.
Первое, что бросается в глаза — последний пункт верхнего меню переносится вниз на экранах шириной менее 480 пикселей. Мы можем немного уменьшить горизонтальные отступы у ссылок для этой категории девайсов, используя медиазапрос :
/* разместите этот код последним */
@media (max-width: 480px) {
.menu li a {
padding-left: 5px;
padding-right: 5px;
}
.menu {
text-align: center; /* центрируем меню — так смотрится лучше */
}
}
За счет сжатия отступов все пункты теперь помещаются в одну строку даже на девайсах с маленькой шириной экрана в 320 пикселей.
Следующий недочет — карточки с городами. Если ширина экрана менее чем 980 пикселей, блоки начинают некрасиво съезжать во второй ряд по левой стороне. Один из вариантов решения данной проблемы — позволить блокам выстраиваться в несколько рядов, но при этом располагаться по центру. Для реализации этой идеи понадобится отменить несколько стилей, заданных ранее. Заметьте, что мы не будем убирать никакой код, а просто используем еще один медиазапрос, который перезапишет стили, если ширина экрана будет меньше 980 пикселей:
/* разместите этот код _над_ прошлым медиазапросом */
@media (max-width: 980px) {
.tour-card {
float: none;
display: inline-block;
}
#tour {
text-align: center;
}
}
Вкратце о том, что мы сделали. Для начала мы изменили способ выстраивания элементов один за другим: теперь он работает не за счет обтекания , а за счет строчно-блочного поведения карточек. Когда дочерним элементам задано свойство , появляется возможность центрировать их по горизонтали как строчные элементы, добавив к родительскому блоку свойство .
В итоге карточки хоть и переносятся вниз, но выглядят при этом более органично. На узких экранах каждый блок находится под предыдущим, красиво расположившись по центру.
Третья (и последняя) правка адаптивности — это блок подписки на новости. Мы увеличим расстояние между строками текста, добавив свойство элементу (не используя медиазапрос, т. е. разместим это правило среди обычных стилей). А также мы адаптируем стиль кнопки для экранов менее 480 пикселей, сделав ее ширину такой же, как ширина поля , и добавив небольшой отступ сверху.
/* разместите этот код в разделе Subscribe */
#subscribe .pitch p {
line-height: 1.6;
}
/* а этот — в теле медиазапроса для max-width: 480px */
#subscribe button {
width: 232px;
margin-top: 20px;
}
Свойство CSS background-image
Свойство background-image позволяет установить фоновую картинку или градиент для блочного или строчного элемента, а также создать фон для сайта в целом.
Значение позволяет указать путь к файлу для изображения, и оно будет отображаться в качестве фона для этого элемента. Вы также можете указать в картинку, кодированную в . Это выглядит так:
Удобно при работе с маленькими картинками. Чтобы получить такой код, воспользуйтесь сервисами вроде https://snipp.ru/tools/base64-img. Там все очень просто: загружаете картинку и получаете готовый код для сайта. При таком использовании не производится дополнительное обращение к серверу за картинкой, что хорошо для скорости загрузки.
Вместо можно использовать более общее свойство с аргументом в виде изображения.
Для уменьшения количества обращений к серверу за картинками также рекомендуется использовать спрайты – объединенные в один файл картинки. При таком подходе при загрузке страницы произойдет только одно обращение к общему спрайту.
Для фона можно использовать большинство известных форматов: JPG, PNG, SVG, GIF-анимацию и другие.
9 ответов
Лучший ответ
Если я вас не правильно понял, это может быть так же просто, как осмотреть ( F12 ) значок на странице, чтобы определить путь к исходному файлу .svg, и перейти по этому пути напрямую (Example), а затем просмотрите исходный код страницы с помощью Control + и . Тогда просто сохраните этот код.
16
mayersdesign
5 Май 2017 в 13:01
Вы можете скачать отдельные с их сайта, как заявлено @mayerdesign, или вы можете нажать на ссылку для скачивания слева, и вы можете скачать весь пакет.
2
Syfer
5 Май 2017 в 11:59
Все они зарегистрированы в элементах в инструментах разработчика Google Chrome.
4
Chris
5 Май 2017 в 12:04
1. Проверьте страницу с включенным svg.
2. Нажмите на ссылку, которая отображает изображение в полном разрешении.
3. выполните CMD / CTRL + S
4. Вы закончили!
isXander
28 Май 2020 в 08:49
В Chrome, когда есть в SVG URL, вы можете сделать CTRL + S или CMD + S, и он автоматически предложит вам сохранить страницу как .SVG попробуйте: https: //upload.wikimedia. орг / википедия / обыкновенные / 9 /90 / Benjamin_Franklin — 10_Dollar_Bill_Portrait — Vector.svg
stan
13 Авг 2019 в 21:10
Трехэтапное решение Скопируйте фрагмент кода svg и вставьте его на новую html-страницу. Сохраните HTML-страницу как logo.html, а затем откройте эту HTML-страницу в Chrome. Файл> Распечатать «Сохранить как PDF», теперь PDF можно открыть в Illustrator, извлекая элемент вектора.
12
Pete Mandy
7 Сен 2018 в 07:35
Вы можете скопировать HTML-тег svg с веб-сайта, затем вставить код в новый html-файл и переименовать расширение в svg. Это сработало для меня. Надеюсь, это поможет вам.
8
Abner Lima
4 Сен 2019 в 19:50
Для меня очень просто установить следующий инструмент на сервере Chrome:
Находясь на веб-странице, щелкните значок расширения рядом с адресной строкой, и откроется новая вкладка, показывающая все файлы SVG, найденные на странице. Вы можете скопировать файл SVG в буфер обмена, загрузить только те из них, которые вам нужны, или нажать кнопку «Загрузить все SVG», чтобы добавить их в сжатый файл и загрузить их.
Подробнее см. здесь
Надеюсь, это будет полезно.
Prabhu Nandan Kumar
6 Авг 2019 в 11:37
Я не знаю, правильно ли на это уже ответили или нет. Хорошо. Загрузка файла из источника не является разрешением. Как получить * .svg с URL.
Я установил дополнение ‘svg-grabber’ к Google Chrome. Это только частично решает мою проблему, так как Google Chrome не имеет ярлыка «Назад» на одну страницу.
Я пытался загрузить файлы с URL-адреса, но все время получал сообщение об ошибке: на этой странице нет файлов SVG, когда я вижу 40 из них. Вы можете нажать на них, чтобы они открылись, но вы не можете сохранить их.
Папка в WordPress: … / static / img / icons /
Я добавил надстройку «Вернуться с Backspace» в Chrome, так как мне приходилось нажимать на каждый файл отдельно, как если бы это были белые значки (которые я сейчас ищу), вы их не увидите. Вы должны нажать на файл. Потом обратно. Это заняло слишком много времени. Теперь все в порядке. Есть софт для скачивания определенной папки, но я не хочу скачивать половину интернета, чтобы просто получить белый.
Когда вы нажимаете на белый значок, открывается новая вкладка, но она вся белая. Затем вы нажимаете на значок svg-grabber в Chrome, и он откроет его в новом окне на черном фоне с кнопкой «загрузить все svg».
Luke Lozowski
2 Фев 2019 в 20:47
Иконка рядом с текстом
На скриншоте выше видно, что значок находится слева от текста. Вспоминаем все свойства background и понимаем, что для размещения слева годится background-position (начальная позиция фонового изображения). Перейдём к коду.
Сперва ничего особенного — обычная ссылка:
Вся магия в CSS:
- Сначала задали путь до изображения.
- Потом установили начальное положение фона (background-position) в left center — ведь наша иконка левее текста (горизонтальная позиция left) и на одном с ним уровне (вертикальная позиция center).
- Размер фонового изображения (background-size) мы задали, чтобы предотвратить отдалённые проблемы.
Дело в том, что иконка может оказаться больше блока, в котором её захотят показать. Тогда она некрасиво обрежется по бокам. Чтобы этого не произошло — указываем размеры, в которые иконка должна вписаться.
И наконец, устанавливаем режим повторения фона (background-repeat) в no-repeat. Без этого фоновая картинка будет дублироваться, пока не заполнит собой блок (как это выглядит — зависит от размеров картинки и html-элемента, где она задана фоном).
Что же мы получили:
Не совсем то, чего ожидали. Давайте разбираться.
Наш «конвертик» стал фоновым изображением для блока, который занимает ссылка. Текст ссылки — это содержимое того же блока. Оно и наложилось на наше фоновое изображение.
Значит, нужно отодвинуть это самое содержимое от левой границы блока (помните, мы прижали «конвертик» именно к левому краю). Причём отодвинуть более чем на 20px (ширина фоновой картинки, заданная background-size) — тогда увидеть наш фон уже ничто не помешает.
Делается это с помощью свойства padding (внутренний отступ).
Добавим в код такой отступ слева:
Вот теперь всё вышло как надо:
Создание полупрозрачного фона в CSS
Полупрозрачный элемент хорошо заметен на фоновом рисунке. В веб-дизайне полупрозрачность достигается за счёт свойства opacity или задаваемого для фона формата цвета RGBA.
Особенность данного свойства заключается в том, что прозрачность действует не только на фон, но и на все дочерние элементы. После увеличения прозрачности, и текст и фон станут полупрозрачными.
Пример создания полупрозрачного блока:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>opacity</title>
<style>
body {
background: url("https://cs614726.vk.me/v614726246/4a02/300wj_aFOK4.jpg");
background-size: 10% auto;
}
div {
opacity: 0.7;
background: #717ceb; /* Цвет фона */
padding: 20px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div>Так выглядит полупрозрачный блок.</div>
</body>
</html>
Однако достаточно часто полупрозрачным должен быть только фон определённого элемента, а текст оставаться непрозрачным для читабельности.
В таком случае opacity не подходит и следует воспользоваться форматом RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1 означает абсолютную непрозрачность, а 0 — полную прозрачность.
Пример задания прозрачного фона:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>rgba</title>
<style>
body {
background: url("https://cs614726.vk.me/v614726246/4a02/300wj_aFOK4.jpg");
background-size: 20% auto;
}
div {
background: rgba(60, 150, 250, 0.7); /* Цвет фона */
color: #fff; /* Цвет текста */
padding: 20px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div>Прозрачный фон блока и непрозрачный текст.</div>
</body>
</html>
Надеемся, что данное руководство вам пригодилось, и желаем успехов в освоении веб-дизайна!
РМРимма Михайловаавтор
Быстрый обзор структуры SVG, группировки и связывания (переиспользования) элементов в SVG.
Существует 4 основных элемента, которые используются для определения, задания структуры и связей в SVG коде. Эти элементы делают переиспользование кода проще, сохраняя его чистым и читаемым.
Вот эти элементы: , , и .
Элемент (короткое от «group») используется для логической группировки набора связанных графических элементов. С точки зрения графических редакторов, таких как Adobe Illustrator, элемент имеет ту же функциональность, как и Group Objects. Можно также представлять группу как слой в графическом редакторе.
Группировка элементов полезна, когда мы хотим применить общий стиль, и особенно, если хотим анимировать группу элементов, сохраняя при этом их относительное расположение.
Элемент применяется для определения элементов, которые будут использоваться позднее. Определение элементов через полезно, когда вы хотите создать своего рода «шаблон», который будет использоваться несколько раз в документе. Элементы, определенные внутри не отображаются, пока не будут «вызваны» где-то в документе.
Элемент сочетает в себе преимущества и и , т.к. может использоваться в качестве группировки элементов, определяющих шаблон, на который можно ссылаться из любого места документа. В отличие от , как правило, не используются для определения шаблонов, а в основном используется, чтобы определить символы (например иконки), на которые имеются ссылки по всему документу.
Элемент имеет важное преимущество: он принимает атрибут , который позволяет масштабироваться внутри любого вьюпорта, в котором происходит отрисовка. Элемент используется для ссылки на другие элементы, определенные где-то в документе
Он позволяет повторно использовать существующие элементы, давая вам возможность, аналогичную копированию-вставке в графическом редакторе. Он может применяться для переиспользования как отдельного элемента, так и группы, заданной через , или
Элемент используется для ссылки на другие элементы, определенные где-то в документе. Он позволяет повторно использовать существующие элементы, давая вам возможность, аналогичную копированию-вставке в графическом редакторе. Он может применяться для переиспользования как отдельного элемента, так и группы, заданной через , или .
Для использования элемента передаем ссылку на него внутри атрибута, а также устанавливаем и . Вы можете применять стили к , и эти стили каскадно применятся к содержимому элемента.
Но откуда берется содержимое ? Где происходит клонирование? И как CSS работает с этим содержимым?
Прежде чем отвечать на эти вопросы, стоит упомянуть несколько статей для лучшего понимания этих элементов и атрибута , который использует :
- Структурирование, группировка и привязка в SVG — элементы <g>, <use>, <defs> и <symbol>
- Понимание координатной системы SVG (часть 1): viewport, viewBox и PreserveAspectRatio
Завершение
Поздравляем, вы только что создали еще одну настоящую адаптивную веб-страницу! Вы можете пойти дальше и преобразить ее по своему вкусу. Придумайте и добавьте новые секции, стилизуйте их, используя свои навыки. Кроме этого, можно создать еще несколько веб-страниц и объединить их с помощью ссылок — получится полноценный многостраничный сайт музыкальной группы!
Если в процессе прохождения урока у вас что-то не получилось, не отчаивайтесь — готовый проект, как всегда, включен в архив с файлами, так что вы можете заглянуть в него и разобраться, в чем проблема.
А вот и демо-версия готовой страницы:
На этой ноте мы завершаем практический урок, а также текущую главу учебника. Спасибо за участие, и оставайтесь с нами: впереди вас ждет следующая глава, которая посвящена вещам, без которых не обойдется ни один сайт — ссылки и навигация. И первый урок посвящен такой теме как состояние ссылок в CSS.
Написание общих стилей
Для начала определим те стили, которые будут использоваться повсеместно. Сюда входит основной шрифт и фон страницы, размеры блока-контейнера, вид ссылок, общие стили заголовков, адаптивность картинок, форма и цвет кнопок. Добавьте этот код в таблицу , разместив его под комментарием :
body {
font-family: 'Open Sans', sans-serif;
font-size: 1em;
color: #eee;
background-color: #383838;
background-image: url(../img/bg.png);
}
.container {
width: 100%;
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
a {
text-decoration: none;
color: #fff;
}
h1,
h2,
h3 {
text-transform: uppercase;
}
h2 {
font-size: 32px;
text-align: center;
margin-top: 40px;
margin-bottom: 40px;
}
img {
display: block;
max-width: 100%;
height: auto;
}
.button,
button {
border: 0;
background-image: linear-gradient(145deg, #dd0000, #ff3670);
color: #fff;
text-transform: uppercase;
font-size: 1.2em;
font-family: 'Open Sans', sans-serif;
margin-top: 20px;
margin-bottom: 20px;
display: inline-block;
}
.button:hover,
button:hover {
background-image: linear-gradient(145deg, #ff3670, #dd0000);
}
Как вы могли заметить по макету, дизайн нашей страницы планируется в темных тонах. Белого фона не будет ни у одного элемента, поэтому мы сразу устанавливаем темно-серый фоновый цвет для всего элемента , а вторым фоном добавляем изображение с легкой текстурой. При этом цвет шрифта мы выбираем светлый, чтобы можно было без проблем разглядеть текст.
Настройки для блока остаются идентичны стилям в предыдущем лендинге.
Стандартный подчеркнутый стиль для ссылок нам не нужен, поэтому мы отключаем его, а также меняем цвет с классического синего на белый. А текст всех заголовков, встречающихся на странице, мы делаем прописными буквами. Заголовкам добавляем отступы сверху и снизу (поскольку стандартные отступы обнулил файл Reset.css), задаем размер шрифта и выравниваем по центру.
Все изображения на странице мы делаем адаптивными с помощью приведенного выше кода, чтобы они автоматически подстраивались под размеры экрана, при этом не теряя своих пропорций.
Для тегов и ссылок с классом мы создали общий стиль, поскольку оба вида элементов должны выглядеть в нашем дизайне одинаково. Мы убрали рамку, которую дорисовывает браузер всем кнопкам, а также применили градиентный фон — вот и первый случай использования функции на практике. При наведении на кнопку цвета градиента меняются местами.
Все остальные свойства CSS вы уже видели много раз, поэтому мы думаем, что вы легко поймете, за что они отвечают в данном коде. Что ж, двигаемся дальше!
Как менять цвет svg-иконки через CSS
Верстальщику часто приходится обыгрывать реакцию иконки при наведении на неё мышки. В случае с svg-картинками можно просто менять их цвет.
Научимся это делать на примере иконки «ВКонтакте»:
Логотип сложный, поэтому svg-код, который его математически описывает, довольно длинный. Посмотрим, как это выглядит в HTML:
Да, это не ошибка, так в HTML вставляют небольшие svg-картинки. Для больших целесообразнее подключать отдельный файл, который будет кэшироваться браузером. Здесь мы не будем в это углубляться.
Обратите внимание на тег (в переводе с английского «путь»). Он позволяет задать любую фигуру компактной строкой — описанием пути от начальной точки до конечной через промежуточные координаты.. Строка с данными задаётся атрибутом d тега
Она содержит команды, которые закодированы набором букв и чисел. Буква представляет тип команды, а числа — её параметры (чаще всего координаты).
Строка с данными задаётся атрибутом d тега <path>. Она содержит команды, которые закодированы набором букв и чисел. Буква представляет тип команды, а числа — её параметры (чаще всего координаты).
Теперь мы запросто добавим к ссылочному тегу <a> псевдокласс: hover и зададим через него новый цвет svg-изображения. Это делается в CSS с помощью свойства fill («заливка»).
Проверьте, как это работает: наведите курсор на иконку — например, в песочнице Codepen.
И ещё один нюанс. Заливка может быть задана атрибутом у <svg> (fill=»#000″). Тогда работать с ней через CSS не получится, так как css-стили не могут перебить правила, заданные атрибутами. В этом случае стоит просто вручную удалить этот атрибут у <svg>.
Выравнивание изображения
Для работы с фоновыми изображениями в CSS существует целый набор свойств, начинающихся со слова . Например, по умолчанию если размер картинки больше размера элемента, то картинка будет обрезана по краям элемента. Однако это можно исправить благодаря свойству , которое позволяет вписать изображение полностью, подгоняя его под размеры элемента. По умолчанию при значительно меньшем размере изображения, чем у элемента, картинка будет повторяться и занимать все пространство элемента. Это можно исправить свойством .
background-size
Свойство устанавливает размер изображения и может принимать значения:
- – картинка становится размером 100 на 100 пикселей, также можно использовать проценты;
- – устанавливает размер картинки равным размеру элемента;
- – увеличивает размер картинки по горизонтали и по вертикали, пока изображение не покроет весь элемент по горизонтали.
background-origin или background-clip
Идентичные свойства с одинаковыми значениями. Данные свойства указывают, где устанавливается начальная точка вставки изображения. По умолчанию начальная точка находится сразу под границей элемента в верхнем левом углу. У и есть следующие значения:
- – начальная точка вставки изображения располагается в верхней части границы элемента. Сколько пикселей ширина границы, на столько пикселей будет урезан и фон сверху.
- – изображение будет под текстом, где не учитывается.
- – данное значение стоит по умолчанию.
Стилизация соедержимого с помощью CSS свойства all
Некоторое время назад я работала над иконкой, на которую ссылалась через , и хотела, чтобы один из элементов внутри наследовал все стили (, , , и даже ) от . В общем я хотела управлять всеми этими атрибуатми из CSS, при этом оставляя атрибуты представления в разметке как запасной вариант.
Оказавшись в такой же ситуации, вы вероятно напишете в CSS:
Видно, что нужно устанавливать все свойства в . К счастью, нас выручит CSS свойство . Я уже писала о нем в заметке, но стоит еще раз упомянуть в данном контексте.
Используя свойство , мы можем переписать код следующим образом:
Это отлично работает во всех браузерах, которые поддерживают данное свойство (посмотрите упомянутую заметку), однако есть важное замечание: это объявление установит буквально все свойства в значение inherit, даже те, которые вам не хочется. Поэтому применять all — это лишь чрезвычайная мера, особенно полезная, если вы хотите «заложить основу» элемента и можете управлять свойствами через CSS
Если вы будете использовать такое объявление, не определив конкретные значения для всех свойств в CSS, они каскадно будут искать родительские значение, и в большинстве случаев применят стили браузера по умолчанию.
Обратите внимание, что это затронет атрибуты, которые могут быть установлены через CSS, не SVG атрибуты. Т.о
если атрибут может быть установлен через CSS, он будет искать значение родителя, а иначе — не будет.
Мы в состоянии заставить атрибуты представления наследоваться от стилей элемента . Но что если наша иконка содержит несколько элементов, и мы не хотим, чтобы все элементы наследовали свойства от ? Что делать, если мы хотим применить разные цвета для разных элементов внутри ? Установка одного стиля к больше не поможет, нужно что-то еще, чтобы помочь нам задать нужные цвета нужным элементам…
Каскадные стили
В SVG элементы могут быть стилизованы тремя способами: внешние CSS стили (внешний файл), внутренние стили (элементы ) и встроенные стили (в виде атрибута ). Для нас имеет смысл то, как происходит применение стилей к элементам.
Помимо CSS свойств, SVG элементы можно стилизовать с помощью т.н. атрибутов представления. Атрибуты представления — это сокращенная запись задания CSS свойств элементу. Считайте их специальными стилевыми свойствами. По сути это то же самое, но менее ожидаемым образом.
В следующем куске кода, который просто отображает розовый круг с желтой обводкой, , и являются атрибутами предстваления.
Множество всех CSS свойств может устанавличаться через SVG атрибутамы, и наоборот. Но не все CSS свойства могут быть указаны у SVG элемента как атрибуты представления и не все атрибуты представления, доступные в SVG, могут быть указаны через CSS.
Спецификация SVG перечисляет, какие SVG атрибуты могут быть установлены через CSS свойства. Некоторые из этих атрибутов доступны как CSS свойства (например и ), а некоторые — нет (, , ).
В SVG 2 этот список пополнился , , , , , и несколькими другими атрибутами представления, которые невозможно было установить через CSS в SVG 1.1. Новый список атрибутов .
Если вы похожи на меня, то ожидаете, что у атрибутов представления больший приоритет, чем у других объявлений стилей. Я подразумеваю, что внешние стили переопределяются внутренними, внутренние — встроенными (inline). Т.о. наиболее «внутренние» стили имеют больший приоритет, и когда свойство указывается в атрибуте, оно более значимое и переопределяет все остальные объявления. Однако это не так.
На самом деле атрибуты представления имеют низкий приоритет, ниже внешних, внутренних и встроенных стилей. Они могут переопределить наследуемые элементом стили, и сами переопределяются любыми другими объявлениями стилей.
Отлично, теперь когда с этим все прояснилось, давайте вернемся к элементу и его содержимому.
Теперь мы в курсе, что не можем задать стили внутри элемента при помощи CSS селекторов. Также мы знаем, что стили, примененные к элементу , будут унаследованы всеми его потомками (которые внутри теневого DOM).
Итак, первой попыткой изменить цвет заливки элемента внутри будет применение этого стиля непосредственно на и пусть наследование делает свое дело.
Однако это вызовет две проблемы:
- Цвет заливки будет наследоваться всеми потомками , даже теми, которые не нужно стилиизовать. (Если внутри только один элемент, то это не проблема)
- Если вы экспортируете SVG из графического редактора или получили его от дизайнера, и по какой-то причине не можете отредактировать SVG код, вероятно вы остановитесь на атрибутах представления, которые в свою очередь переопределят любые стили, применяемые к . И если вы определяете стили на , вы хотите, чтобы они были унаследованы всеми потомками, т.о. атрибуты представления вызвали бы неудобство.
И даже если у вас есть доступ к коду SVG и вы можете избавиться от атрибутов представления, настоятельно рекомендую этого не делать, потому что:
- Удаление атрибутов, используемых для установки определенных свойств, сбросит эти свойства в значения браузера по умолчанию — в большинстве случаев это черная заливка и обводка (если говорить о цвете)
- Сбрасывая все значения, вы вынуждаете себя определять стили для всего набора свойств.
- Первоначально доступные атрибуты представления являются отличным механизмом запасного варианта, когда устанавливаемые вами внешние стили по какой-либо причине не применились. Если CSS файл не сможет подгрузиться, у вашей иконки по крайней мере будут хорошие стили по умолчанию. Я настоятельно рекомендую их сохранять.
Хорошо, теперь у нас есть эти атрибуты, но предположим, что мы хотим стилизовать каждый экземпляр иконки по-разному.
Давайте начнем с простого примера, а затем перейдем к более сложным.
Усложняем задачу
Рассмотрим более сложную ситуацию — когда иконка состоит из нескольких простых svg-изображений. Например, примитивная лупа из прямоугольника и круга:
Код для кнопки с иконкой лупы будет таким:
Проблема здесь в том, что внутри svg-иконки два разных тега:
- <rect> (прямоугольник — ручка лупы)
- и <circle> (круг — ободок лупы).
Сделать как в примере с «ВКонтакте» не получится, потому что прямоугольник в нашем случае имеет заливку (fill), а круг — обводку (stroke).
Чтобы при наведении менять цвет обоих, используем два селектора. Один будет менять заливку у палочки, второй — обводку у круга:
Как видите, при наведении на кнопку мы сперва нашли rect, потом circle, то есть разделили логику.
Делить код таким образом приходится нечасто, но помнить об этой возможности полезно.
Иконка соцсети без текста
Почти на любом сайте есть блок со ссылками на Facebook, «ВКонтакте», Instagram и другие соцсети:
Поскольку это иконки, а текста (контентной составляющей) мы рядом не видим, — нужно использовать CSS.
Здесь есть пара нюансов:
- Раз текста нет, то у ссылки нет размеров. А фона без размеров не бывает (нельзя покрасить стену, когда самой стены нет).
- Если мы зададим размеры ссылке, то они не сработают, так как по умолчанию ссылка — строчный элемент (его размер не изменить с помощью свойств width и height).
Обойдём эти ограничения.
Сперва напишем простую разметку — список ссылок. Классы сделаем по БЭМ, чтобы наш компонент было удобно стилизовать и использовать повторно.
Начнём, конечно, с HTML-кода:
Далее — CSS:
- Заметьте, что свойству display для ссылок мы задали значение inline-block. Поэтому наши ссылки стали строчно-блочными элементами. Теперь можно задать им ширину и высоту — и это уже сработает.
- Одинаковые для всех элементов стили (background-position, background-size, background-repeat) мы вынесли в общий класс social__link.
- А вот фоновые изображения у нас разные — их мы задаём в разных классах.
Заключение
Уф. Многовато получилось.
Используя преимущества CSS каскадирования, стилизация содержимого (в теневом DOM) может стать проще. А с помощью CSS переменных (будь то единственный или кастомные переменные) мы можем проникнуть внутрь теневого DOM и кастомизировать графику так, как нам захочется, при этом обеспечивая хороший запасной вариант, когда что-то пойдет не так.
Лично я невероятно поражена связкой CSS переменные + SVG. Мне нравятся их возможности, при том что имеется отличный запасной механизм. Как уже говорилось ранее, пока поддержка реализована только в Firefox, но мы можем добиться более широкой поддержки браузерами, например проголосовав на форуме MS Edge.
В будущем мы даже можем получить другие способы стилизации содержимого , уже есть дискуссии по поводу использования CSS переменных а качестве SVG параметров. Т.о. хотя эта статья оказалась длинной, все же не затронула все, что нужно знать по этой теме.
Инспектирование содержимого элементов было одним из частых вопросов, вызывающих недопонимание. На эту тему существует много статей, но здесь не об этом.
Надеюсь статья вам понравилась и вы нашли что-то полезное для себя.
Спасибо за прочтение!
