Как изменить цвет svg иконки через css

Как изменить цвет svg иконки в кнопке?

Имеется кнопка, при наведении фон меняется на синий через :hover в css, как сделать чтобы svg иконка меняла цвет на белый?

• Вопрос задан более двух лет назад
• 2480 просмотров

2 комментария

Простой 2 комментария

Как изменить цвет svg иконки через css

I want to use this technique and change the SVG color, but so far I haven’t been able to do so. I use this in the CSS, but my image is always black, no matter what. My code: .change-my-color < .

2020 answer

CSS Filter works on all current browsers

To change any SVGs color

1. Add the SVG image using an tag.

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%); 

.filter-green

answered Nov 16, 2018 at 11:14

Manish Menaria Manish Menaria

21.6k 3 gold badges 20 silver badges 23 bronze badges

To change the color of any SVG, you can directly change the SVG code by opening the SVG file in any text editor. The code may look like the below code:

You can observe that there are some XML tags like path, circle, polygon, etc.. There you can add your own color with help of the style attribute. Look at the below example

Add the style attribute to all the tags so that you can get your SVG of your required color.

As per Daniel’s comment, we can use fill attribute directly instead of fill element inside style attribute.

answered Dec 4, 2014 at 6:10

You can’t change the color of an image that way. If you load SVG as an image, you can’t change how it is displayed using CSS or JavaScript in the browser.

If you want to change your SVG image, you have to load it using , or using inline.

If you want to use the techniques in the page, you need the Modernizr library, where you can check for SVG support and conditionally display or not a fallback image. You can then inline your SVG and apply the styles you need.

You can inline your SVG. Tag your fallback image with a class name ( my-svg-alternate ):

And in CSS use the no-svg class from Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ) to check for SVG support. If there isn’t any SVG support, the SVG block will be ignored and the image will be displayed, otherwise the image will be removed from the DOM tree ( display: none ):

.my-svg-alternate < display: none; >.no-svg .my-svg-alternate

Then you can change the color of your inlined element:

#time-3-icon

answered Mar 7, 2014 at 14:39

22.9k 4 gold badges 48 silver badges 64 bronze badges

If you want to change the color dynamically:

1. Open the SVG in a code editor
2. Add or rewrite the attribute of fill of every path to fill=»currentColor»
3. Now, that svg will take the color of your font color, so you can do something like:

answered Dec 4, 2020 at 16:56

Mártin Alcalá Mártin Alcalá

3,440 1 gold badge 7 silver badges 13 bronze badges

Only SVG with path information. You can’t do that to the image… as the path you can change stroke and fill information and you are done. like Adobe Illustrator

So, via CSS you can overwrite the path fill value:

path

But if you want a more flexible way as you want to change it with a text when having some hovering effect going on, use:

path

body < background: #ddd; text-align: center; padding-top: 2em; >.parent < width: 320px; height: 50px; display: block; transition: all 0.3s; cursor: pointer; padding: 12px; box-sizing: border-box; >/*** desired colors for children ***/ .parent < color: #000; background: #def; >.parent:hover < color: #fff; background: #85c1fc; >.parent span < font-size: 18px; margin-right: 8px; font-weight: bold; font-family: 'Helvetica'; line-height: 26px; vertical-align: top; >.parent svg < max-height: 26px; width: auto; display: inline; >/**** magic trick *****/ .parent svg path

 
TEXT WITH SVG  

answered Apr 3, 2018 at 10:05

Biskrem Muhammad Biskrem Muhammad

3,794 2 gold badges 30 silver badges 37 bronze badges

Solution 1 — Edit SVG to point to the currentColor

Then you can control the color of the stroke and the fill from your CSS content:

• Simple and uses conventional supported CSS.

• You control the SVG
• SVG can be included inline in the HTML.

Solution 2 — CSS mask property

 .icon < -webkit-mask-size: cover; mask-size: cover; -webkit-mask-image: url(https://url.of.svg/. svg); mask-image: url(https://url.of.svg/. svg); background-color: blue; /* Or any color of your choice. */ width: 20px; height: 20px; >> 

• Relatively easy to use
• Browser support for the mask CSS property is partial.

• SVG is external, and included via URL
• Meant to be used on modern known browsers.

Solution 3 — CSS Filter property — static color

If the color is known in advance, you can use https://codepen.io/sosuke/pen/Pjoqqp to find the filter needed to change your SVG to the desired color. For example, to convert the svg to #00f :

.icon

If your original color isn’t black, prefix the list of filters with brightness(0) saturate(100%) to convert it first to black.

• There might be a small, nonsignificant difference between the result and the desired color.

• Desired color is known in advance.
• External image

answered Aug 7, 2021 at 18:21

Ben Carp Ben Carp

22.6k 8 gold badges 58 silver badges 70 bronze badges

SVG mask on a box element with a background color will result:

body < overflow:hidden; >.icon < --size: 70px; display: inline-block; width: var(--size); height: var(--size); transition: .12s; -webkit-mask-size: cover; mask-size: cover; >.icon-bike < background: black; animation: 4s frames infinite linear; -webkit-mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg); mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg); >@keyframes frames < 0% < transform:translatex(100vw) >25% < background: red; >75% < background: lime; >100% < transform:translatex(-100%) >>

_{Note — SVG masks are not supported in Internet Explorer browsers}

answered Jun 19, 2019 at 14:15

113k 55 gold badges 297 silver badges 382 bronze badges

The easiest way would be to create a font out of the SVG using a service like https://icomoon.io/app/#/select or such. Upload your SVG, click «generate font», include font files and CSS content into your side and just use and style it like any other text. I always use it like this because it makes styling much easier.

But as mentioned in the article commented by @CodeMouse92, icon fonts mess up screen readers (and are possibly bad for SEO). So rather stick to the SVGs.

answered Apr 16, 2015 at 14:55

Felix Hagspiel Felix Hagspiel

2,414 2 gold badges 24 silver badges 41 bronze badges

You can try to color it with this css filter hack:

.colorize-pink < filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5); >.colorize-navy < filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5); >.colorize-blue

answered Aug 6, 2020 at 13:03

565 4 silver badges 20 bronze badges

To simply change the color of the SVG file:

Go to the SVG file and under styles, mention the color in fill:

.cls-1 

answered Apr 30, 2018 at 10:42

Target the path within the ‘svg’ tag:

You can do it inline, like:

answered Feb 15, 2019 at 13:50

Uzair Khan Uzair Khan

2,682 7 gold badges 27 silver badges 47 bronze badges

To change the color of an SVG element, I have found out a way while inspecting the Google search box search icon below:

.search_icon

I have used a span element with «display:inline-block», height, width and setting a particular style «color: red; fill: currentColor;» to that span tag which is inherited by the child svg element.

answered Feb 24, 2021 at 18:59

You can change SVG coloring with CSS if you use some tricks.
I wrote a small script for that.

• go through a list of elements which do have an SVG image
• load the SVG file as XML
• fetch only the SVG part
• change color of path
• replace src with the modified SVG image as an inline image

$('img.svg-changeable').each(function () < var $e = $(this); var imgURL = $e.prop('src'); $.get(imgURL, function (data) < // Get the SVG tag, ignore the rest var $svg = $(data).find('svg'); // Change the color $svg.find('path').attr('fill', '#000'); $e.prop('src', "data:image/svg+xml;base64," + window.btoa($svg.prop('outerHTML'))); >); >); 

The code above might not be working correctly. I’ve implemented this for elements with an SVG background image which works nearly similar to this.

But anyway, you have to modify this script to fit your case.

answered Apr 28, 2015 at 12:14

179 1 silver badge 5 bronze badges

1. Method 1 The easy and effect way: Open your .svg file with any text editor

answered Jul 16, 2020 at 16:58

2022 Web Component answer

This (8 line) native Web Component loads external content, and injects it into the DOM.

It is explained and documented in a DEV blog post: Web Component.

Full source code:

customElements.define("load-file", class extends HTMLElement < // declare default connectedCallback as sync so await can be used async connectedCallback( // call connectedCallback with parameter to *replace* SVG (of persists) src = this.getAttribute("src"), // attach a shadowRoot if none exists (prevents displaying error when moving Nodes) // declare as parameter to save 4 Bytes: 'let ' shadowRoot = this.shadowRoot || this.attachShadow() ) < // load SVG file from src="" async, parse to text, add to shadowRoot.innerHTML shadowRoot.innerHTML = await (await fetch(src)).text() // append optional Elements from inside after parsed shadowRoot.append(. this.querySelectorAll("[shadowRoot]")) // if "replaceWith" attribute // then replace with loaded content // childNodes instead of children to include #textNodes also this.hasAttribute("replaceWith") && this.replaceWith(. shadowRoot.childNodes) > >)

answered Feb 4, 2022 at 13:09

If the same SVG must be used multiple times with different colors, define the set of paths within a hidden SVG which serves as the master copy. Then place new instances which refer to the master path with their individual fills.

Note: This approach only works with inline tags. It will not work with tags loading .svg files.

:root < fill: gray; >.hidden < display: none; >svg

answered Jan 16, 2022 at 11:13

1,761 23 silver badges 18 bronze badges

Here the fast and furious way

body < background-color: #DEFF05; >svg < width: 30%; height: auto; >svg path

answered Feb 5, 2021 at 7:26

For example, in your HTML:

$("#struct1").css("fill", ""); 

answered Aug 27, 2019 at 7:18

63 1 silver badge 1 bronze badge

Check out this code. It works.

CSS

answered Nov 19, 2022 at 9:51

Use an svg element.

This is better than other solutions because:

• Closely matches your original code.
• Works in IE!
• The embedded image can still be an external, unmodified file.
• The image does not even have to be an SVG.
• Color is inherited from font-color, so easy to use alongside text.
• Color is a normal CSS color, not a strange combination of filters.

answered Feb 18, 2021 at 21:37

1,303 2 gold badges 9 silver badges 12 bronze badges

If you want to do this to an inline SVG file, that is, for example, a background image in your CSS content:

background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(31,159,215,1)' viewBox='. '/%3E%3C/svg%3E");

Of course, replace the … with your inline image code.

answered Jun 7, 2018 at 20:24

There are some problems with Manish Menaria’s answer, if we convert white color it shows gray.

So I added some tweaks, and the below example specifically shows how to change the color in the material icon:

.draft-white

answered Aug 5, 2021 at 9:14

Shabeer M Shabeer M

150 3 silver badges 9 bronze badges

You can use a font icon to use any CSS option in SVG

I was searching for a way to have any CSS options, like animation for SVG, and I ended up to generate a font icon with my SVG(s) and then used it inside a span (like Font Awesome), so any CSS option, like coloring, was available on it.

I used https://icomoon.io to convert my SVG image to a font icon. Then you can use it like Font Awesome or MaterialIcon inside HTML elements.

answered Dec 25, 2021 at 11:15

I found it a bit clumsy, but it is definitely a working way to dynamically change the color of an SVG included with tag.

In the SVG file, you can add CSS content the following way:

There you can use @media rules, with which the SVG can look outside itself for contextual circumstances. There’s an aspect-ratio media feature that applies to the SVG box (e.g., the tag). You can create different contexts for the SVG by stretching the SVG box a little bit.

This way you can also make the favicon the same SVG that appears on the website, but with a different color. (In this case, no other SVG boxes should be square-shaped.)

/* img stretched horizontally (if SVG is square-shaped) */ @media (min-aspect-ratio: 1000/999) < path < fill: blue; >> /* img stretched vertically (if SVG is square-shaped) */ @media (max-aspect-ratio: 999/1000) < path < fill: green; >> /* img with exact sizes */ @media (aspect-ratio: 86/74) < path < fill: red; >> /* favicon with light browser theme */ @media (aspect-ratio: 1/1) and (prefers-color-scheme: light) < path < fill: black; >> /* favicon with dark browser theme */ @media (aspect-ratio: 1/1) and (prefers-color-scheme: dark) < path < fill: white; >> 

One very important thing

The SVG must contain viewBox information, so that the stretching does not affect the graphics. Example:

answered Nov 28, 2022 at 14:53

Actually, there is a quite more flexible solution to this problem: writing a Web Component which will patch SVG as text at runtime. I also published in a gist with a link to JSFiddle.

�� filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

answered May 26, 2020 at 16:06

My answer would be this. But I’m not 100% sure if it works for everyone:

Select ‘svg’ and then ‘path’. And you can change ‘fill’ then.

.eye-icon-container < width: 33px; height: 33px; border-radius: 5px; display: flex; justify-content: center; align-items: center; :hover < background-color: #ddf0ff; >:active < background-color: #1d398d; svg < path < fill: #fff; >> > > 

answered Nov 14, 2022 at 7:28

If you have a single-colour SVG with varying opacities that you simply want to tint to a different colour then there is another approach that can be used: the feFlood SVG filter.

This solution is not as straightforward as a single-line CSS, however:

• It works on SVGs inside of an img element.
• This doesn’t require editing the source SVG at all.
• It allows you to simply choose a target colour for the SVG and not worry about complex colour transforms, like hue-rotate .

Here is an example:

In the above example, we create an inline SVG to define the filters and then we apply it to the image. Inside of the block we first define the fill colour that we want via and then we create a composite image using the alpha channel of the source plus the flood colour. Finally, the filter is applied to the whole image via the filter CSS property on the img element.

I learned about this technique from this Smashing Magasine article. It’s a highly recommended read if you want to learn more about SVG filters.

A few additional things to note:

• This filter can be applied to any HTML element via the CSS filter property.
• The same filter can be reused multiple times on the same page.
• If you are using an inline SVG then the block can form part of the svg element and the filter can still be applied to the whole SVG or on selective elements. This avoids needing a separate SVG element for the filters.

answered Sep 21, 2022 at 10:48

525 6 silver badges 12 bronze badges

A good approach is to use a mixin to control stroke colour and fill colour. My ‘svg’s are used as icons.

@mixin icon($color, $hoverColor) < svg < fill: $color; circle, line, path < fill: $color >&:hover < fill: $hoverColor; circle, line, path < fill: $hoverColor; >> > > 

You can then do the following in your SCSS file:

.container

answered Jun 25, 2020 at 11:55

4,517 2 gold badges 34 silver badges 30 bronze badges

Как изменить цвет svg

Дата размещения статьи 25/09/2018 �� 103682

Как изменить цвет svg

Изменим цвет svg картинки двумя способами: сначала используем свойство fill , затем mask-image .

Первый способ. Картинка должна быть inline SVG. Если так, тогда просто изменим цвет с помощью свойства fill

Цвет svg картинки изменяется с помощью CSS свойства fill — заливки.

See the Pen Inline svg by Nikolay (@Only-to-top) on CodePen.

Если svg в вставлено в HTML в виде тега img , то нужно добавить следующий js-код:

$("img.img-svg").each(function () < var $img = $(this); var imgClass = $img.attr("class"); var imgURL = $img.attr("src"); $.get(imgURL, function (data) < var $svg = $(data).find("svg"); if (typeof imgClass !== "undefined") < $svg = $svg.attr("class", imgClass + " replaced-svg"); >$svg = $svg.removeAttr("xmlns:a"); if (!$svg.attr("viewBox") && $svg.attr("height") && $svg.attr("width")) < $svg.attr("viewBox", "0 0 " + $svg.attr("height") + " " + $svg.attr("width")) >$img.replaceWith($svg); >, "xml"); >);

В данном примере мы используем класс img-svg , который мы добавляем к изображению в HTML-странице, благодаря которому svg-картинка из img станет inline svg.

Изображение было в виде тега img :

Изображение стало inline svg :

Теперь можем изменить цвет нашей svg картинки, используя свойство fill , как в первом примере.

Какие ещё свойства можно применить к svg картинке

.img-svg path, .img-svg polygon < fill-opacity: 0.5; /* прозрачность заливки */ stroke: #ff6c00; /* цвет обводки */ stroke-width: 10px; /* толщина обводки */ stroke-opacity: 0.8; /* прозрачность обводки */ >

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

Второй способ. Реализуем с помощью свойства mask-image

В HTML создадим два элемента: div и ссылку:

Используем свойство mask-image чтобы задать фон для картинки и background-color чтобы задать цвет:

.link < width: 30px; height: 26px; background-color: #000; display: block; mask-image: url("img/youtube.svg"); >.div < height: 55px; width: 62px; background-color: #000; mask-image: url("img/youtube.svg"); >

Пробуем изменить цвет:

Полезные ссылки

• Как вставить SVG на сайт.
• Анимация SVG.

Дата обновления статьи 07/12/2021 12:14

Временная шкала Windows 10 Лучшие плагины для VS Code

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки,
то можете следить за выходом новых статей в Telegram.

• JavaScript: Работа с Массивами
• Наличие Динамически Добавленного Элемента
• Стилизация Input File
• Предзагрузка Картинок — Предварительная Загрузка Изображений на JavaScript
• Стилизация Скролла
• События Формы

На чтение 3 мин Просмотров 26.7к. Опубликовано 17.04.2021

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

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

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

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

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

Иконки
  

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

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

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

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

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

/* SVG фоновое изображение */ .block-bg < width: 600px; height: 200px; background-image: url('./../img/bg-zigzag.svg'); >

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

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

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

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

Стилизуем в файле .css по классу youtube-icon .

Будем менять цвет иконки по наведению при помощи свойства fill .

/* SVG inline код. Смена цвета по ховеру */ .youtube-icon < width: 64px; height: 64px; fill: black; >.youtube-icon:hover

Взгляните на результат:

Заключение

• Мы разобрали 3 стандартных способа подключения SVG-графики на сайт: тег , свойства CSS, тег .
• Узнали про то, как можно менять цвет SVG-иконки через CSS и свойство fill .
• В следующей статье продолжим работу с тегам , , разберем как можно ещё кастомизировать векторную графику.

Время прочтения
8 мин

Давно прошли те дни, когда для иконок в вебе использовались картинки и CSS-спрайты. С развитием веб-шрифтов номером 1 для отображения иконок на сайтах стали иконочные шрифты.

Шрифты — векторные, так что вам не нужно беспокоиться о разрешении экрана. Для них можно использовать те же CSS-свойства, что и для текста. В результате вы имеете полный контроль над их размером, цветом и стилем. Вы можете добавлять к ним эффекты, трансформировать или декорировать их. Например, повернуть ( rotate ), подчеркнуть ( underline ) или добавить тень ( text-shadow ).

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

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

TL;DR: этот пост позволяет вникнуть в то, как и почему. Если вы хотите понять весь процесс, читайте дальше. В противном случае вы можете посмотреть окончательный код на CodePen.

Настройка символов SVG-иконок

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

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

Начните с добавления встроенного SVG, спрячьте его, оберните содержимое в тег symbol и задайте ему id .

Полная разметка SVG-элемента пишется один раз и скрывается.

Затем все, что вам нужно сделать, это создать копию иконки с помощью элемента use .

Получится точная копия вашей оригинальный SVG-иконки.

Вот она! Довольна милая, правда?

Вы вероятно заметили атрибут xlink:href — это и есть ссылка между вашей иконкой и оригинальным SVG-изображением.

Важно отметить, что xlink:href — устаревший атрибут SVG. Даже если большинство браузеров все еще поддерживает его, вместо него нужно использовать href . Но дело в том, что некоторые браузеры, например, Safari, не поддерживают ссылки на SVG-ресурсы через атрибут href , поэтому вам все равно нужно указывать xlink:href .

Для безопасности используйте оба атрибута.

Добавление цвета

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

.icon

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

.icon < width: 100px; height: 100px; >.icon-red < fill: red; >.icon-blue

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

Сначала у вас может возникнуть идея положиться на специфичность.

.icon-colors .path1 < fill: red; >.icon-colors .path2 < fill: green; >.icon-colors .path3

Это не сработает.

Мы пытаемся задать стили для .path1 , .path2 и .path3 так, если бы они были вложены в .icon-colors , но технически это не так. use элемент это не плейсхолдер, который заменяется на определенный SVG. Это ссылка, которая копирует содержимое того, на что указывает, в shadow DOM.

И что нам тогда делать? Как мы можем повлиять на содержимое детей, когда говорят, что детей нет в DOM?

CSS-переменные помогут

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

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

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

Встречайте CSS-переменные.

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

.parent

Все дети .parent будут иметь текст красного цвета.

.parent < --custom-property: red; >.child

Все .child , вложенные в .parent , будут иметь текст красного цвета.

Теперь давайте применим эту концепцию для нашего SVG-символа. Мы будем использовать атрибут fill для каждой части path в определении нашей SVG-иконки и зададим им разные CSS-переменные. Затем мы назначим им разные цвета.

.icon-colors

И… это работает!

С этого момента все, что нам нужно для создания копии с другой цветовой схемой, это написать новый класс.

.icon-colors-alt

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

.icon-monochrome

Свойство fill будет работать, потому что атрибут fill исходного SVG задан с неопределенными значениями CSS-переменных.

Как назвать мои CSS-переменные?

Обычно используют один из двух способов именования в CSS: описательный или семантический. Описательный — это значит назвать переменную по названию самого цвета: если ваш цвет #ff0000 , вы называете переменную —red . Семантический — это значит назвать переменную по ее назначению: если вы используете цвет #ff0000 для ручки чашки, вы называете переменную —cup-handle-color .

Возможно вашим первым желанием будет использовать описательный способ наименований. Это кажется естественным, поскольку цвет #ff0000 может использоваться и для других вещей, помимо ручки чашки. CSS-переменную —red можно использовать и для других частей иконки, которые должны быть красными. В конце концов, так работает методология utility-first CSS и она хороша.

Проблема в том, что в нашем случае мы не можем применять атомные классы к элементам, которые хотим стилизовать. Принципы utility-first не применимы, так как у нас есть только ссылка для каждой иконки, а мы должны стилизовать ее через вариации классов.

Использование семантического способа наименований, как например, —cup-handle-color , в нашем случае более уместно. Когда вам нужно изменить цвет какой-то части иконки, вы точно знаете, что и как вам нужно переопределить. Имя класса останется актуальным независимо от того, какой цвет вы назначили.

По умолчанию или не по умолчанию

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

Добиться этого можно двумя способами: через :root или через var() default.

:root

Вы можете определить все ваши CSS-переменные в селекторе :root . Это позволит держать их все в одном месте и «делиться» схожими цветами. :root имеет самую низкую специфичность, поэтому его легко переопределить.

:root < --color-1: red; --color-2: green; --color-3: blue; --color-4: var(--color-1); >.icon-colors-alt

Однако, у этого метода есть существенные недостатки. Для начала, хранение определений цвета отдельно от соответствующих иконок может сбить с толку. Когда вы решите переопределить их, вам придется прыгать туда-обратно между селектором класса и :root . Но, что еще более важно, этот метод не позволяет вам изменять ваши CSS-переменные, поэтому вы не можете повторно использовать одни и те же имена.

В большинстве случаев, когда в иконке используется только один цвет, я называю переменную —fill-color . Это просто, понятно и позволяет использовать это наименование для всех одноцветных иконок. Если я определю все переменные в селекторе :root , я не смогу иметь несколько переменных —fill-color . Я буду вынуждена определять —fill-color-1 , —fill-color-2 или использовать пространства имен такие, как —star-fill-color , —cup-fill-color .

var() default

Функция var() , которую вы используете для назначения CSS-переменной для свойства, может принимать значение по умолчанию в качестве второго аргумента.

Пока вы не определите —color-1 , —color-2 и —color-3 , иконка будет использовать значения по умолчанию, установленные для каждого path . Это решает проблему глобального определения, которую мы имеем при использовании :root , но будьте осторожны: теперь у вас есть значение по умолчанию, и оно выполняет свою работу. Таким образом, вы больше не можете написать только одно свойство fill , чтобы сделать иконку монохромной. Вам нужно назначать цвет для каждой CSS-переменной, используемой в иконке, по отдельности.

Установка значений по умолчанию может быть полезна, но это компромисс. Я предлагаю не привыкать к этому, и делать только тогда, когда это имеет смысл для конкретного проекта.

Как это все поддерживается браузерами?

CSS-переменные поддерживаются всеми современными браузерами, но, как вы вероятно догадались, IE не поддерживает их, совсем. Даже IE11, и поскольку его развитие было прекращено в пользу Edge, нет никаких шансов, что он когда-либо будет их поддерживать.

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

Все, что вам нужно сделать, — это добавить определение цвета, которое будет работать только, если CSS-переменные не поддерживаются. Этого можно добиться, указав свойству fill резервный цвет. Если CSS-переменные поддерживаются, это объявление не будет учтено. Если же это не так, оно сработает.

Если вы используете Sass, вы можете записать эту проверку в @mixin .

@mixin icon-colors($fallback: black)

Теперь можно определять цветовые схемы, не беспокоясь о поддержке браузеров.

.cup < @include icon-colors() < --cup-color: red; --smoke-color: grey; >; > .cup-alt < @include icon-colors(green) < --cup-color: green; --smoke-color: grey; >; > 

Передача CSS-переменных в mixin через @content необязательна. Если вы сделаете это снаружи, скомпилированный CSS будет таким же. Но может быть полезно держать все это в одном месте.

Вы можете проверить этот пример в разных браузерах. В последних версиях Firefox, Chrome и Safari последние две чашки будут соответственно красной с серым паром и синей с серым паром. В Internet Explorer и Edge ниже 15 версии третья иконка будет вся красная, а четвертая — вся синяя.

Как изменить цвет svg в img [дубликат]

Если я вставлю сам .svg файл в html то это будет занимать 400 over дофига строк кода что не кравиво
Изменять цвет .svg через notepad++ меняя fill= неудобно Але админы зачем вы классные вопросы закрываете тут есть понятный ответ зачем типа сами делаете хуже Это не дубликат потому что тут вопрос в том не как изменить цвет .svg а в том как его изменит в img теге Также тот вопрос не понятный с непонятным ответом

Отслеживать
nevazno_html_css_js_1
задан 26 фев в 14:43
nevazno_html_css_js_1 nevazno_html_css_js_1
27 4 4 бронзовых знака

2 ответа 2

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

Этот вопрос на на англоязычном StackOverflow тут

Изменить цвет на другой тут

img < width:50%; height: 50%; >.pic

1. Вместо src=»https://ru.stackoverflow.com/questions/1500193/%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B0″ — вставь свой путь к .svg файлу
2. Скопируй результат с сайта и вставь его в css файл

Отслеживать
ответ дан 26 фев в 14:44
nevazno_html_css_js_1 nevazno_html_css_js_1
27 4 4 бронзовых знака
А нельзя было просто написать filter: grayscale(1); ?
27 фев в 5:56
@NNL993 А для других цветов как?
27 фев в 8:08

Никак. grayscale нужен для того, чтобы был чёрно-белый фильтр. А чем вас собственно не устраивает сам тег

27 фев в 8:34

Много строк кода занимает я вставил там +-110 строк кода (возможно я что-то не то делаю но я просто открыл .svg файл через notepad++ сделал ctrl+a ctrl+c ctrl+v ) А с тем как менять цвет .svg я ещё не разобрался мне через ответ который я написал удобно (буду пользоваться им т.к как по мне это самый простой способ)

27 фев в 9:10

Комментарии были перемещены в чат; пожалуйста, не продолжайте дискуссию здесь. Прежде чем разместить комментарий ниже этого, пожалуйста, ознакомьтесь с назначением комментариев. Комментарии, которые не запрашивают уточнения или не предлагают улучшения, скорее всего должны быть ответами, размещены на Stack Overflow на русском Meta или написаны в Чат Stack Overflow на русском. Комментарии, продолжающие дискуссию, могут быть удалены.

27 фев в 13:00

Я так решаю проблему, но не знаю насколько она вам подойдёт, так как это лишний jquery код замедляющий загрузку страницы.
И в идеале нужно грузить бесцветные svg — обычно они чёрного цвета и на них уже легко накатывать цвет стилями. А на вашей зелёный мешает немного).
Этот скрипт хорошо подходит для проектов, в которых вам нужно создать иконки меняющие цвет при наведении, но при этом которые могут добавляться или меняться через админку контент-менеджером.

(function ($) < $(document).ready(function () < $('.content img, .menu-list img').each(function () < let $img = $(this); let imgClass = $img.attr('class'); let imgURL = $img.attr('src'); if (imgURL) < $.get(imgURL, function (data) < let $svg = $(data).find('svg'); if (typeof imgClass !== 'undefined') < $svg = $svg.attr('class', imgClass + ' replaced-svg'); >$svg = $svg.removeAttr('xmlns:a').attr('style', function (i, style) < return style && style.replace(/enable-background[^;]+;?/g, ''); >); if (!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) < $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width')); >if ($svg.attr('viewBox') && !$svg.attr('height') && !$svg.attr('width')) < let width = $svg.attr("viewBox").split(' ')[2]; let height = $svg.attr("viewBox").split(' ')[3]; $svg.attr('width', width); $svg.attr('height', height); >$img.replaceWith($svg); >, 'xml'); > >); >); >)(jQuery);

.content svg < width:70px; >svg .grn < fill: red; transition: 0.3s; >svg:hover .grn < fill: green; >.menu-list < padding: 0; margin: 0; >.menu-list svg < width: 30px; >.menu-list li

  
Строка 1
  
Строка 2
  
Строка 3
  
Строка 4

Как изменить цвет SVG изображения с помощью CSS

Хотите изменить цвет svg изображения на вашем сайте? Это легко сделать с помощью CSS! В этой статье вы узнаете, как изменить цвет svg-картинки, используя CSS-свойства, включая fill и stroke. Получите готовый пример кода и узнайте, как настроить цвет svg для получения желаемого эффекта.

SVG-графика — это векторная графика в XML-формате, которая позволяет создателям веб-сайтов отображать иконки, логотипы и другие графические элементы на страницах. Хорошая новость заключается в том, что вы можете изменять цвета SVG-графики с помощью CSS без необходимости изменять саму графику. Это очень полезное умение при создании дизайна веб-сайтов. Если вы новичок в CSS и не знаете, как изменить цвет svg-графики, то эта пошаговая инструкция для вас.

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

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

Как поменять цвет svg картинки через CSS

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

Для изменения цвета SVG изображения через CSS, сначала необходимо добавить иконки в HTML с помощью тега :

Читать далее«Знак больше и меньше в математике: картинки и уроки для понимания направления» — Научитесь правильно использовать знаки больше и меньше в математике с помощью понятных картинок и подробных уроков. Узнайте, в какую сторону обращается каждый из этих знаков и как это влияет на решение уравнений и неравенств.

Затем добавляем CSS-код:

В этом CSS-коде мы используем свойство fill для определения цвета заливки изображения. Выберите нужный цвет и замените #ff0000 на соответствующий цвет в шестнадцатеричной системе.

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

Что такое SVG-картинка?

SVG — это сокращение от Scalable Vector Graphics, что в переводе с английского означает масштабируемая векторная графика. Она создается как код XML-формата и представляет собой векторное изображение. В отличие от растровых изображений, SVG не теряет качество при увеличении или уменьшении изображения. Более того, SVG может быть анимирован и привязан к событиям пользователя.

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

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

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

Почему нужно менять цвет?

Читать далее«Как центрировать заголовок на сайте: правила установки в HTML» — в формате Как центрировать заголовок на сайте: правила установки в HTML.

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

Кроме того, менять цвет SVG-картинки может помочь улучшить ее читаемость, особенно если она содержит текст или другие важные элементы.

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

Инструменты для работы

Для корректной работы с SVG картинками необходимы несколько инструментов:

• Редактор SVG — программное обеспечение, позволяющее создавать, редактировать и экспортировать файлы SVG.
• Текстовый редактор — любимый текстовый редактор для написания кода, предпочтительно с поддержкой визуального редактирования и подсветкой синтаксиса.
• Браузер — SVG является векторной графикой, задаваемой в формате XML, поэтому необходим браузер для ее отображения.
• Редактор CSS — поскольку изменение цвета SVG картинки происходит с помощью CSS, нужно иметь редактор CSS для его написания.

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

Пошаговая инструкция

Шаг 1: Откройте файл SVG-изображения в любимом текстовом редакторе.

Шаг 2: Найдите элемент, который вы хотите изменить цвет, и добавьте атрибут fill со значением нового цвета. Например, если вы хотите изменить цвет фона на красный, то атрибут fill должен выглядеть так: fill=»red»

Шаг 3: Сохраните свой файл.

Шаг 4: Откройте файл CSS в любимом текстовом редакторе.

Шаг 5: Найдите селектор для элемента, который вы хотите изменить цвет и добавьте свойство fill с новым цветом. Например, если вы хотите изменить цвет фона на том же изображении, который вы изменили на красный в SVG-изображении, то селектор и свойство должны выглядеть так:

Шаг 6: Сохраните свой файл CSS.

Шаг 7: Откройте свой HTML-файл в любимом текстовом редакторе и добавьте ссылку на свой CSS-файл внутри тега head:

Шаг 8: Сохраните свой HTML-файл и откройте его в любом браузере. Ваше SVG-изображение должно отображаться с новым цветом!

Шаг 1. Открыть SVG-файл

Первым шагом в изменении цвета SVG-файла через CSS является открытие файла. SVG-файл можно открыть в любом текстовом редакторе, таком как Блокнот на Windows или TextEdit на Mac. Также существуют специализированные программы для работы с SVG-файлами, такие как Adobe Illustrator или Inkscape.

Чтобы открыть файл, найдите его на жестком диске или используйте команду «Открыть файл» в меню программы. После этого файл откроется в редакторе, где вы сможете увидеть его код.

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

Шаг 2. Выбрать нужный элемент

Чтобы изменить цвет определенного элемента SVG-картинки, вам нужно определить его селектор. Это может быть как класс, так и идентификатор, которые вы добавили в код SVG.

Наиболее распространенным вариантом является использование классов. Если вы хотите изменить цвет всех объектов SVG с определенным классом, например, «logo», то используйте CSS-селектор .logo.

Если вы хотите выбрать определенный элемент SVG по идентификатору, то используйте CSS-селектор #id.

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

Если вы не уверены, какой селектор использовать, можете воспользоваться инструментами для разработчиков браузеров, такими как «Инспектор элементов» в Chrome или «Firebug» в Firefox, чтобы узнать, какой класс или идентификатор присвоен нужному объекту SVG.

Шаг 3. Добавить класс

Для того чтобы изменить цвет определенной svg иконки на странице, нужно ей назначить уникальный класс. Добавить класс можно с помощью атрибута «class» в коде SVG-изображения:

В данном примере значением класса является «unique-class». Также, вы можете задать свое уникальное имя класса. Главное, чтобы оно было уникальным и не пересекалось с другими классами на странице.

Далее, в CSS-файле нужно указать нужный цвет для заданного класса. Используйте свойство «fill» для задания цвета заливки:

Таким образом, все SVG-изображения с классом «unique-class» будут иметь красный цвет заливки.

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

В данном примере, общим классом для svg-иконок является «icon». А родительскому элементу «icon-container» мы назначили отдельный класс. Теперь, чтобы изменить цвет всех иконок на странице, нужно прописать соответствующие стили:

Таким образом, все SVG-иконки на странице, которые находятся в родительском блоке с классом «icon-container», будут иметь синий цвет заливки.

Шаг 4. Написать CSS-код

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

Сначала необходимо определить селектор для нашего SVG-изображения. Для этого мы можем использовать идентификатор, например, #my-svg. Затем, используя свойство fill, мы можем изменить цвет заливки элемента.

Таким образом, для того, чтобы изменить цвет нашей SVG-иконки при наведении на неё курсора мыши, мы можем написать следующий CSS-код:

Этот код означает, что при наведении курсора мыши на элемент с идентификатором #my-svg, цвет заливки будет изменен на красный.

Конечно, вы можете использовать любой другой цвет или свойство stroke для изменения цвета обводки SVG-элемента. Также вы можете добавлять другие стили и анимации для создания более интересного эффекта.

Вопрос-ответ:

Зачем менять цвет svg картинки через CSS?

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

Какую картинку можно изменить через CSS?

Можно изменить цвет любой svg картинки, главное, чтобы она была векторной.

Как выбрать нужный цвет для картинки?

Цвет можно выбирать в формате HEX, RGB или RGBA. HEX — это шестнадцатеричная система, которая состоит из 6 символов, например #ffffff. RGB — это красный, зеленый и синий цвета, где каждый цвет представлен числом от 0 до 255, например rgb(255, 255, 255). RGBA — это RGB цвет с прозрачностью, где значение прозрачности может быть от 0 до 1, например rgba(255, 255, 255, 0.5).

Как применить новый цвет к svg картинке?

Новый цвет можно применить к svg картинке с помощью CSS свойства fill. Для этого нужно выбрать нужный элемент в svg коде и добавить к нему свойство fill со значением выбранного цвета.

Как выбрать нужный элемент в svg коде?

Элемент в svg коде можно выбрать с помощью CSS селекторов, таких как id, class, селекторы элементов и других. Например, если элементу в svg задан id, то его можно выбрать с помощью селектора #id, например #logo. Если элементу задана класс, то его можно выбрать с помощью селектора .class, например .button. Если нужно выбрать все элементы определенного типа, то можно использовать селектор элементов, например rect или circle.

Как быть, если svg кода нет?

Если svg кода нет, но есть только картинка, то можно воспользоваться онлайн конвертером, который позволит превратить картинку в svg код. Затем уже можно будет изменить элементы и цвета через CSS. Конвертеров много в интернете, например, можно воспользоваться сайтом https://www.online-convert.com/ru.

Как проверить, что изменения правильно отображаются на сайте?

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

Шаг 5. Проверить результат

После того, как вы сохранили изменения в CSS файле, откройте страницу с SVG картинкой в браузере и проверьте, изменился ли цвет фигуры или элемента, которому вы присвоили новый цвет. Если цвет не изменился, проверьте правильность написания селектора и значения свойства fill в CSS.

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

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

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