Как перекрасить svg css

Как закрасить svg?

Подскажите, как закрасить svg? т.е. чтобы синим были закрашены не только края, но и внутри.
Можно ли это сделать только с помощью css?

Отслеживать
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
задан 11 июл 2017 в 12:32
2,780 4 4 золотых знака 30 30 серебряных знаков 69 69 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Ваш svg внутри никак не закрасить, т.к. обрамление сердца в нем и есть вся фигура.

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

Чтобы это сделать, откройте ваш исходный в AI , наведите на контур фигуры, нажмите ПКМ и выберите «Расформировать составной контур». В итоге у вас получится 2 фигуры, которые можете в дальнейшем использовать.

UPDATE с учетом комментария про наведение на svg :

svg < fill: none; stroke:#f00; stroke-width:30px; >svg:hover

Как перекрасить svg в css

Подключаем SVG-иконку на сайт и меняем цвет через CSS

HTML, CSS

В предыдущих сериях…

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

Возьмем стандартную папку с проектом, в которой есть отдельная папка для изображений, отдельная — для файлов .css , а также файл .html

Подключение через тег в html

Работаем как с обычной картинкой. Тег , атрибут src , прописываем путь к файлу. Можно использовать любые атрибуты , включая атрибут width .

Подключение фона в .css

Можно подключить svg-графику в качестве фона элемента. Часто используются фоновые паттерны. Это небольшой фрагмент, впоследствии повторяющийся и создающий орнамент.

Так выглядит наш паттерн:

Укажите в html нужный класс и пропишите свойства фона background-image в файле css. Используйте функцию url() , чтобы задать путь к файлу с изображением.

Вот, что у нас получилось:

Описываем svg-графику inline

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

Тег используется как контейнер для хранения SVG графики. При помощи тега и его атрибутов создается фигура. Посмотрите, как выглядит иконка YouTube в inline формате.

Заливка и обводка

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

Атрибуты заливки и обводки (Fill and Stroke Attributes)

Раскраска (Painting)

Основная раскраска может быть сделана установкой двух свойств на ноде — fill и stroke. Fill — устанавливает цвет внутри объекта, а stroke задаёт цвет линии, которая рисуется вокруг объекта. Вы можете использовать CSS-наименования цветов, что и в HTML — названия цветов (например, red), rgb-значения, hex-значения, rgba-значения и т.д.

Кроме того, вы можете задать прозрачность заливке и обводке по отдельности в SVG. Их прозрачность управляется атрибутами fill-opacity, stroke-opacity.

Обводка (Stroke)

Кроме цветовых свойств обводки, есть несколько атрибутов, управляющих способом обводки.

Свойство stroke-width определяет ширину обводки. Штрихи обводки рисуются вокруг пути. В примере выше путь изображён розовым, а обводка — черным.

Второй атрибут, влияющий на обводку — свойство stroke-linecap. Демонстрируется выше. Свойство управляет отображением концов линий.

Есть три возможных значения для stroke-linecap:

• butt обрывает линию под прямым углом к направлению обводки и делает это сразу по окончании линии.
• square в основном действует также, но немного растягивает обводку по краям пути. Длина, на которую продлевается обводка — это половина заданного значения stroke-width.
• round задаёт закруглённые углы по краям обводки. Радиус этих кривых также управляется параметром stroke-width.

Используйте stroke-linejoin , чтобы определить, как соединять обводку двух сегментов линии.

Каждая из этих полилиний имеет два сегмента. Соединение, где они встречаются, управляется атрибутом stroke-linejoin . Есть три возможных значения для этого атрибута:

• miter продолжает линию обводки дальше её обычной ширины, чтобы создать единственный квадратный угол.
• round создаёт закруглённый сегмент линии
• bevel создаёт новый угол для помощи в переходе между двумя сегментами

Наконец, вы можете использовать пунктирные линии в обводке, определив атрибут stroke-dasharray .

В качестве аргумента атрибут stroke-dasharray принимает последовательность чисел, разделённых запятой.

Замечание: в отличие от путей, эти числа ДОЛЖНЫ быть разделены запятыми (пробелы игнорируются).

Первое число определяет длину штриха, второе — длину между штрихами. В примере выше, второй путь чередует заливку штрихом в 5 пикселей, затем 5 пустых пикселей перед следующим штрихом в 5 пикселей. Вы можете задать больше чисел, если хотите более сложную систему штрихов. В первом примере задано 3 числа и в этом случае рендер берёт эти числа дважды, чтобы создать чётный паттерн. Т.о. первый путь отображается 5 закрашенными, 10 пустыми, 5 закрашенными и затем ещё раз 5 пустыми, 10 закрашенными, 5 пустыми «пикселями». Затем паттерн повторяется.

Также есть дополнительные stroke и fill свойства: fill-rule, которое определяет как будут заливаться сложные фигуры, которые имеют пересечения внутри себя; stroke-miterlimit, which determines if a stroke should draw miters и stroke-dashoffset, который указывает где начинается dash-array в линии (позволяет задать смещение пунктирной обводки относительно первоначального положения)

Использование CSS (Using CSS)

В дополнение к установке атрибутов объектов, вы также можете использовать CSS для стилизации заливки и обводки. Не все атрибуты могут быть установлены через CSS. Но атрибуты взаимодействия с раскраской и заливкой обычно доступны, так что fill, stroke, stroke-dasharray и т.д. могут быть заданы этим способом, также как и градиенты, и паттерны, что показано ниже. Атрибуты вроде width, height или команд для путей SVG не могут быть установлены через CSS. Проще всего просто протестировать и узнать, что доступно, а что нет.

CSS может использоваться инлайн через атрибут style :

или может быть помещён в специальную стилевую секцию, которую вы включите. Вместо отображения такой секции в разделе , как это делается в HTML, она включается в зону , предназначенную для определений. Здесь можно создавать элементы, которые не появятся сами в SVG, но будут использованы другими элементами.

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

Также можно определить отдельный файл стилей для ваших CSS-правил через обычный XML-stylesheet синтаксис:

Как изменить цвет иконки SVG с помощью CSS?

На странице есть иконки в формате SVG . Сами иконки нарисованы в черном цвете.
Как с помощью CSS покрасить их их в красный цвет?

В данном контексте, когда svg у вас лежит отдельно в виде файла, через CSS ничего сделать нельзя. Нужно вставить svg в html текстом, тогда появится возможность использовать в css свойство fill к тегу svg и его вложенным тегам.

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

Но есть способ сделать изменение цвета иконки с помощью фильтров CSS или SVG

Допустим добавлена иконка ключа с помощью :

С помощью различных css фильтров меняем цвет иконок:

Пример, если svg файл добавлен с помощью background-image:

Нативный способ покрасить SVG-иконки

Когда вам нужна возможность менять цвет иконок через CSS, что вы делаете? Вариантов не так много.

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

Давайте посмотрим на еще один способ, доступный в современных браузерах, — тэг USE.

Чем нам полезен USE?

Этот тэг задуман для переиспользования символов и целых SVG-блоков на странице. Но в современных браузерах (прости, IE) он может даже доставать внешние ресурсы!

Это позволяет нативным образом вставить SVG в Shadow DOM, почти как тэг IMG с атрибутом src , только с возможностью использовать CSS. И оно даже само работает с кэшем! Но нужно слегка подготовить иконки. Вот что надо сделать:

Сначала в каждой иконке нужно сделать символ с уникальным id и переместить viewBox в него.

Затем надо назначить fill (или stroke ) на currentColor , чтобы потом использовать CSS-правило color для задания цвета. Можно также задать эти атрибуты в inherit на других элементах, что позволит сделать двухцветные иконки (подробнее — в примере ниже).

Когда наши иконки подготовлены, остается только скинуть их в папку assets и использовать:

Компонент именованных иконок для Angular

Писать путь и обращаться к символу каждый раз утомительно. Давайте сделаем Angular-компонент, который будет находить иконки по имени. С помощью Dependency Injection это сделать очень просто.

Нам понадобится токен для предоставления пути до всех наших иконок и простой компонент. Он будет формировать href исходя из имени и заданного пути. Мы даже можем повесить его на нативный SVG с помощью селектора: так мы вынесем наружу заботу о размере.

Сделаем stroke и fill прозрачными для использования нескольких цветов в CSS:

Заключение

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

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

Похожие публикации:

1. Как сделать отступ между абзацами в css
2. Как сделать первую букву заглавной css
3. Как сделать подчеркивание css
4. Как сделать прозрачность фона в css

Как воздействовать на svg в css, подключив его отдельным файлом?

Я хочу использовать псевдоклассы CSS ( :hover , :active ), подключив svg отдельным файлом воздействовать на него в css. Я сделал вот так,
svg-файл:

Но я не могу достучаться туда CSS’ом, он не видит CSS-переменную, пример:

 :root  

Но если бы я просто вставил svg прямо в файл, то всё будет работать:

:root < --journey: red; >#journey-svg < --size: 100px; width: var(--size); height: var(--size); >#journey-svg:hover < --journey: green; >#journey-svg:active

Отслеживать
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
задан 31 янв 2022 в 19:53
Михаил Камахин Михаил Камахин
8,672 2 2 золотых знака 16 16 серебряных знаков 55 55 бронзовых знаков
svg работает в своей области видимости. Можете заинлайнить svg, тогда достучаться получится.
31 янв 2022 в 20:02
@nazarpunk что значит заинлайнить? Покажите ответом, если не сложно
31 янв 2022 в 20:03
это значит всключить svg напрямую в html, а не файлом.
31 янв 2022 в 20:04
@nazarpunk так я так и сделал, показал пример, но мне так не очень нравится
31 янв 2022 в 20:04
@МихаилКамахин Добавлен второй ответ с переменными
2 фев 2022 в 13:16

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Добавление SVG иконок с помощью спрайта

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

Формируем спрайт из SVG иконок

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

Повторяете это для всех иконок, присваивая уникальные ID

Готовый файл нужно сохранить с раcширением *.svg и разместить его на сервере.

Ниже спрайт с двумя иконками: id=»headphones» и id=»phone» viewBox=»0 0 48 48″

viewBox добавлен, чтобы сделать иконки одинакового размера.

Ничего не выводится, так как скрывает содержимое до вызова иконки по ID с помощью

Перед этим необходимо добавить спрайт в HTML с помощью

Вызов иконки по ID с помощью

Ниже полный код вызова и стилизации иконок:

svg < display:block; >#u1,#u2,#u3,#u4 < transition:all 0.5s; fill:black; >#u1:hover < fill:red; >#u2:hover < fill:dodgerblue; >#u3:hover < fill: yellowgreen; >#u4:hover

Получаем результат: иконка с наушниками меняет цвет при :hover , а телефонная трубка не реагирует.

Это происходит из-за того, что в иконке с наушниками нет атрибутов представления, а у иконки телефонной трубки есть — fill=»#009688″ и вес стиля представления SVG, больше, чем стиль внешней таблицы CSS.

Каждый раз удалять стили представления из SVG довольно накладно. Но есть выход,- применить Computed стили, которые имеют наивысший приоритет.

Использование переменных для стилизации

В нашем случае будут использоваться переменные во внешнем CSS

#u1:hover

То есть видим, что можно менять несколько цветов одновременно.
Это даёт возможность для стилизации многоцветных иконок.

style="fill: var(--second-color, grey) 

svg < display:inline; >#u1,#u2 < transition:all 0.5s; fill:black; >#u1:hover < --primary-color: red; --second-color: purple; >#u2:hover < --primary-color: red; --second-color: dodgerblue; >#u3:hover < --primary-color: yellowgreen; >#u4:hover

Как перекрасить svg css

SVG — это формат векторных изображений, основанный на XML.

SVG имеет массу преимуществ перед растровыми изображениями:

• векторные изображения масштабируются без потери качества и лучше отображаются на устройствах с ретиной;
• SVG, как правило, весит несколько меньше, чем PNG-версия того же изображения;
• содержимое рисунка описывается на XML, SVG-файл можно открыть в текстовом редакторе и увидеть человекопонятный код;
• поэтому SVG-изображение можно не только нарисовать в векторном редакторе, но и написать руками;
• SVG-файл — это всегда исходник. В отличие от растровой графики, для его редактирования не требуется исходный PSD-файл, содержимое файла не склеивается в один слой, поэтому его всегда можно просто открыть и отредактировать. Правда, если в файле также есть стили и скрипты, лучше так не делать, потому что содержимое перезапишется;
• внутри SVG-файла можно описывать тени и градиенты, причем использовать их можно не только внутри этого файла, но также можно применять и к внешним элементам (пока работает не везде);
• внутри файла могут находиться CSS и JavaScript.

SVG хорошо поддерживается всеми современными браузерами и его уже вполне можно использовать, предусмотрев PNG-версии для старых браузеров.

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

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

Уже сейчас можно найти довольно много сайтов с готовой SVG-графикой, например:

В основном, это наборы иконок.

Можно использовать картинки как есть, а можно перекрасить, объединить в стек, спрайт или сделать шрифт.

SVG на страницу можно вставить несколькими способами. Они по-разному поддерживаются браузерами и предоставляют разные возможности.

Embed/object/iframe

Содержимое доступно для внешнего JavaScript. Хорошая поддержка браузерами (все, кроме IE8 и ниже).

Embed:

Object:

Iframe:

Embed:

embed src="your.svg" width="199" height="200">

Object:

object data="your.svg" type="image/svg+xml" width="199" height="200">object>

Iframe:

iframe src="your.svg" width="199px" height="200px">iframe>

Поддержка браузерами:

IE	Opera	Opera Mini	Opera Mobile	Chrome	Firefox	Safari
9+	9+	5+	10+	4+	3+	3.2+

IMG

Содержимое недоступно для JS.

img src="your.svg">

Поддержка браузерами:

IE	Opera	Opera Mini	Opera Mobile	Chrome	Firefox	Safari
9+	9+	5+	10+	4+	4+	4+

CSS-фоны

Содержимое недоступно для JS. Могут быть проблемы в старых Операх. Не работает в Opera Mini В Opera Mini работает только без viewBox в SVG.

background-image: url(your.svg);

Поддержка браузерами:

IE	Opera	Opera Mini	Opera Mobile	Chrome	Firefox	Safari
9+	12+	5+	16+	5+	24+	5+

Инлайновый SVG

Не работает в Opera Mini.

Поддержка браузерами:

IE	Opera	Opera Mini	Opera Mobile	Chrome	Firefox	Safari
9+	11.6+	—	12+	7+	4+	5.1+

Примеры в посте вставлены как есть, без фолбеков. Можно открыть страницу в интересующем браузере и посмотреть как поддерживаются разные способы вставки.

Способы отображение в старых браузерах:

1. Хак для элемента с фоном:

DIV  background-image: url(your.png); /* PNG для IE6-8 */ background-image: url(your.svg), none; >

Вторая строка сработает в браузерах с поддержкой CSS3, старые её проигнорируют и покажут PNG из первой строки.

2. Способ с image

Современные браузеры выберут атрибут xlink:href и покажут SVG, старые выберут src и покажут растровую версию:

svg width="200px" height="200px"> image xlink:href="your.svg" src="your.png" width="200px" height="200px"/> svg>

Способ найден здесь: lynn.ru/examples/svg/. Про этот способ есть статья у Криса Коера Svg fallbacks, в которой он анализирует этот вариант вставки и предлагает другие.

Способ хорошо работает в IE8 и Opera Mini. Минус способа — загрузка обоих файлов в IE9-11, хотя отобразится только SVG. Также есть проблемы с отображением в 12-й Опере: вместо картинки иногда загружается вот такое:

3. Modernizr

Элементы, содержащие SVG-графику, заворачиваются в div.svg (например). Затем определяем поддержку SVG с помощью Modernizr, браузеры без SVG определяем по классу .no-svg , дальше немного CSS:

/* Задаем обертке размеры и фон в PNG: */ .no-svg .svg  width: 200px; height: 200px; background: url(your.png); /* PNG-заглушка */ > /* Скрываем содержимое обертки (иначе будут отображаться иконки незагрузившихся картинок) */ .no-svg .svg IFRAME, .no-svg .svg OBJECT, .no-svg .svg EMBED, .no-svg .svg IMG  display: none; >

Стили сработают только в браузерах, не поддерживающих SVG.

Хорошее решение для IE8 и старше, но может возникнуть проблема с Opera Mini. Она имеет частичную поддержку SVG, поэтому не будет селектора .no-svg , и при этом она не поддерживает SVG в CSS-фонах и Inline Svg, так что они не отобразятся.

4. :root

Селектор :root сработает только в браузерах с поддержкой CSS3, следовательно с его помощью также можно отфильтровать стили для старых и для новых браузеров.

/* По умолчанию показываем PNG: */ .svg  width: 200px; height: 200px; background: url(your.png); > /* Контейнеры с SVG скрыты. */ .svg IFRAME, .svg OBJECT, .svg EMBED, .svg IMG  display: none; > /* Включаем содержимое для браузеров с поддержкой CSS3 */ :root IFRAME, :root OBJECT, :root EMBED, :root IMG  display: inline-block; >

Как и предыдущее решение, подойдет для IE8 и старше, но не поможет в Opera Mini, потому что она поддерживаeт CSS3, поэтому не будет заглушек для элементов с SVG-фоном и инлайновым SVG.

5. Решение для Opera на Presto (например, 12 и Mini)

В Opera 12 SVG-фоны могут вести себя странно, местами до сильного. Совершенно невинный CSS может привести к проблемам отрисовки векторых фонов при прокрутке страницы. Мне удавалось получить такое:

Действующий пример можно увидеть тут: http://jsbin.com/winag/1/edit. Откройте ссылку в Opera 12 и прокрутите страницу вверх-вниз.

В Opera Mini большие проблемы c фоновым SVG, а инлайновый не поддерживается совсем.

Opera Mini и фоновый SVG:

На этот случай можно использовать хак, который сработает только в Опере:

doesnotexist:-o-prefocus, .selector  background-image: url(your.png); >

Способ использует специфичный для оперы селектор, подробнее про такие селекторы можно почитать тут: opera.com/docs/specs/presto2.12/css/o-vendor

6. Селектор только для Opera Mini

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)  .selector  background-image: url(your.png); > >

Рассмотренная тема — только верхушка айсберга, в спецификации есть ещё много всего интересного. Продолжение следует : )

Показать комментарии

Сайдбар

Статьи

• Математические функции в CSS
• Адаптивное видео с помощью встроенных математических функций CSS
• Недоступность в картинках
• Единицы размеров в CSS
• Генератор цветовых тем
• Jekyll → Gatsby
• Вариативные шрифты
• Размеры в SVG
• Адаптивный Pixel Perfect
• Логотип не отвечает или временно недоступен
• SVG-паттерны
• Мыльные пузыри на SVG
• SVG-градиенты
• Весёлая консолька
• SVG-маски
• Умная прокрутка со Scroll Snap Points
• CSS-анимации для ротации изображений
• Анимированные SVG-маски
• Странности обводки в SVG
• SVG-прелоадеры
• Анимируем градиенты ещё раз
• Background-blend-mode
• Возможности оформления SVG
• CSS и SVG маски
• Nth-child и nth-of-type
• SVG-иконки
• SVG: заливка и обводка
• SVG-path
• SVG: группировка и переиспользование элементов
• SVG-фигуры и трансформации
• SVG
• СSS-градиенты и 3D
• Рисовалка анимированных теней
• Свежие CSS-паттерны
• CSS-паттерны
• Радиальные градиенты
• Линейные градиенты
• Крестики-нолики на CSS
• Border-image
• Электронные часы на CSS и JS.
• Сколько весят селекторы?
• Символы юникода
• Свойство content
• Анимируем CSS-градиенты
• Текстовые эффекты
• Древовидный список на CSS
• Css-селекторы, часть 2
• Css-селекторы
• Контекст наложения
• Два способа «прошить» элемент по краю
• Box-sizing
• Цвета в CSS
• Фон под строчками: добавляем поля
• Box-shadow
• Css-фигуры: лепесток
• Transform
• Css Animation
• 3D-куб
• Border-radius
• First letter
• Эти глаза напротив
• CSS-фигуры
• Стрелки с помощью свойства border
• Flexbox

Страницы

• SVG: полезные ссылки
• CSS-селекторы одной таблицей
• Таблица именованных цветов
• Функции Transform
• Свойства Transform
• Свойства Animation одной таблицей
• Разный синтаксис Flexbox
• Свойства Flexbox одной таблицей

Проекты