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

A quick guide explaining how to change the color of an SVG when it’s used as a CSS background-image.

If you want you can jump to the code, else we can explore how this works together.

SVG Background Color Fill Demo

We’ll start with a live demo, focus, hover, or click on the circle below and the background color will animate.

I’ll let the cat out of the bag.

This is just a normal button with an SVG used as a CSS mask

Instead of changing the fill color of the SVG we change the background-color of the button. But that shouldn’t spoil the fun as it opens up a world of possibilities but we’ll get to that.

Using An SVG As A CSS Mask

We can see our cool smiley SVG below 😎

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <g
        stroke-linecap="round"
        stroke-width="4"
        stroke="rgb(0, 0, 0)"
        fill="none"
    >
        <circle cx="12" cy="12" r="10" />
        <path d="M7 11 H17" />
    </g>
</svg>

What’s amazing about the timeline we live in is that we can pass the SVG to the CSS url() function without base64 encoding it or escaping all kinds of characters.

1. Prefix the SVG with data:image/svg+xml,
2. Add some structure by ending a line with
3. Just like that a readable SVG has appeared in our CSS.

Allright, let’s first assign the SVG to the background property so we can see it, we’ll turn it into a mask in a couple minutes.

button {
    /* ...Other styles */

    /* Color */
    background-color: Crimson;

    /* Store the SVG in a variable so it's easy to re-use */
    --svg: url('data:image/svg+xml,
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <g stroke-linecap="round" stroke-width="4" stroke="rgb(0, 0, 0)" fill="none">
            <circle cx="12" cy="12" r="10"/>
            <path d="M7 11 H17"/>
        </g>
    </svg>');

    /* Assign the SVG variable */
    background-image: var(--svg);
}

button:hover,
button:focus {
    background-color: Turquoise;
}

button:active {
    background-color: Gold;
}

We can interact with the live demo below to see the SVG has loaded and the styles are correctly applied.

Now it’s time to remove the background property and assign the --svg variable to the mask property.

The black parts of the SVG will be the visible parts of the element and the transparent parts will become invisible.

button {
    /* ...Other styles */

    /* Chrome, still requires prefix in 2022 */
    -webkit-mask: var(--svg);

    /* Firefox and Safari */
    mask: var(--svg);
}

Tadaa! 🥳

If you have trouble getting the mask to work, a handy trick is to temporarily assign the mask to the background-image property.

This allows us to visually see where the black and transparent parts of your mask are, this becomes especially useful when building more complex masks.

Any Background Goes

Because we’re masking the button we can use any background style or effect we can think of.

The Complete SVG Background-image Style Code Snippet

You can find the copy button on the right hand side of the code snippet, enjoy!

<button type="button">I'm a cool circle button</button>

<style>
    button {
        /* Base styles */
        display: block;
        width: 4rem;
        height: 4rem;
        border: none;
        cursor: pointer;

        /* Hide button caption text */
        overflow: hidden;
        color: transparent;

        /* The fill animation */
        background-color: Crimson;
        transition: background-color 0.2s;

        /* Store the SVG in a variable so it's easy to use */
        --svg: url('data:image/svg+xml,
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <g stroke-linecap="round" stroke-width="4" stroke="rgb(0, 0, 0)" fill="none">
                <circle cx="12" cy="12" r="10"/>
                <path d="M7 11 H17"/>
            </g>
        </svg>');

        /* Chrome, still requires prefix in 2022 */
        -webkit-mask: var(--svg);

        /* Firefox and Safari */
        mask: var(--svg);
    }

    button:hover,
    button:focus {
        background-color: Turquoise;
    }

    button:active {
        background-color: Gold;
    }
</style>

Conclusion

We learned a nice trick where we used the CSS mask property to change the fill color of a SVG when it’s used as a background-image

On top of that we learned that the mask property is identical to the background property so we can switch them out to make debugging the mask image easier.

<img src="img/icon.svg" alt="Иконка лупы">

.icon {
      background-image: url("../img/icon.svg");
    }

<svg>
    <rect x="10" y="10" width="100" height="100" />
</svg>

<a href="https://vk.com/" class=”vk”>
    <svg id="Bold" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512"
      xmlns="http://www.w3.org/2000/svg">
      <path d="m19.915 13.028c-.388-.49-.277-.708 0-1.146.005-.005 3.208-4.431 3.538-5.932l.002-.001c.164-.547 0-.949-.793-.949h-2.624c-.668 0-.976.345-1.141.731 0 0-1.336 3.198-3.226 5.271-.61.599-.892.791-1.225.791-.164 0-.419-.192-.419-.739v-5.105c0-.656-.187-.949-.74-.949h-4.126c-.419 
      0-.668.306-.668.591 0 .622.945.765 1.043 2.515v3.797c0 .832-.151.985-.486.985-.892 
      0-3.057-3.211-4.34-6.886-.259-.713-.512-1.001-1.185-1.001h-2.625c-.749 0-.9.345-.9.731 
      0 .682.892 4.073 4.148 8.553 2.17 3.058 5.226 4.715 8.006 4.715 1.671 0 1.875-.368 1.875-1.001 
      0-2.922-.151-3.198.686-3.198.388 0 1.056.192 2.616 1.667 1.783 1.749 2.076 2.532 3.074 
      2.532h2.624c.748 0 1.127-.368.909-1.094-.499-1.527-3.871-4.668-4.023-4.878z" />
    </svg>
  </a>

.vk:hover svg {
      fill: red;
    }

<button class="btn-reset search">
            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="19.5138" y="18.5495" width="8" height="2" transform="rotate(45 19.5138 18.5495)"
              />
              <circle cx="11.5" cy="11.5" r="10.5" stroke-width="2" />
            </svg>
</button>

.search svg rect {
  fill: #000;
}
 
.search svg circle {
  stroke: #000;
}
 
.search:hover svg rect {
  fill: yellow;
}
 
.search:hover svg circle {
  stroke: yellow;
}

Школа дронов для всех
Учим программировать беспилотники и управлять ими.
Узнать больше

In one of the previous articles, I have mentioned Best 5+ Free HTML Rich Text Editor to use but now in this article, I have provided few possible ways to change the color of SVG images using CSS or Javascript.

If you are using SVG image icons or  SVG image logo and want to change the color of the image, then you can have an issue while changing its color, because if you will use CSS property like background-color or color for SVG files it will not work, so I have provided solutions to resolve this issue.

Change SVG color using CSS

Every SVG has XML file like structure so, it could be as below

<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24">
<path d="M19,1H5A5.006,5.006,0,0,0,0,6V18a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V6A5.006,5.006,0,0,0,19,1ZM5,3H19a3,3,0,0,1,2.78,1.887l-7.658,7.659a3.007,3.007,0,0,1-4.244,0L2.22,4.887A3,3,0,0,1,5,3ZM19,21H5a3,3,0,0,1-3-3V7.5L8.464,13.96a5.007,5.007,0,0,0,7.072,0L22,7.5V18A3,3,0,0,1,19,21Z"/>
</svg>

So, if you want to change SVG color, then you can directly target «path» element or «polygon» element of SVG structure and use CSS property «fill«

So, you can have CSS has below

svg path{
  fill:red
}

Output

Here is the complete Fiddle sample

But the above solution will only work when you have SVG with path information. 

You can also open SVG in any Text Editor and then get to it’s XML as shown above and then in <path> tag use property «fill» to add change color, as shown below

<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24">
   <path fill="#AB7C94" d="M19,1H5A5.006,5.006,0,0,0,0,6V18a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V6A5.006,5.006,0,0,0,19,1ZM5,3H19a3,3,0,0,1,2.78,1.887l-7.658,7.659a3.007,3.007,0,0,1-4.244,0L2.22,4.887A3,3,0,0,1,5,3ZM19,21H5a3,3,0,0,1-3-3V7.5L8.464,13.96a5.007,5.007,0,0,0,7.072,0L22,7.5V18A3,3,0,0,1,19,21Z"/>
</svg>

Another way (Using SVG as background image)

You can also use SVG as a background image for an icon and then use CSS ‘mask’ property to fill it as Background.

Once you have set it as the background image, you can simply use ‘background-color’ CSS property to change image’s color

Example CSS

.icon {
  width: 48px;
  height: 48px;
  display: inline-block;
  
  -webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
}

.icon-red { background-color: red; }
.icon-orange { background-color: orange; }
.icon-yellow { background-color: yellow; }

With Sample HTML

<i class="icon icon-red"></i>
<i class="icon icon-orange"></i>
<i class="icon icon-yellow"></i>

Gives output as below

Fiddle

Using Filter and SVG inside IMG tag

If you are using SVG with IMG tag, you can use CSS property ‘filter’ with saturation, which will change the color of the SVG image

Sample HTML

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg" class="colorize-orange ">

CSS

.colorize-orange {
   -webkit-filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
  filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
}

Here is the fiddle

Using CSS Mask

We can also use CSS mask property to change SVG color

<i class="icon"></i>

CSS

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-heart{
  background: black;
  animation: 4s frames infinite linear;
  
  -webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg);
  mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg);
}

@keyframes frames {
  0% { transform:translatex(100vw) }
  25% { background: red; }
  75% { background: lime; }
  100% { transform:translatex(-100%) }
}

Fiddle: https://jsfiddle.net/5hd0xfLj/

This approach can be useful if SVG is external, and included via URL.

That’s it, these are some 4 useful ways to change color of SVG using CSS.

You may also like to read:

Vertical Carousel (Bootstrap 4 and Bootstrap 3 With jQuery)

Useful CSS animation examples with code & animation basics

Top HTML and CSS interview questions

Creating Underline text in HTML (With or Without CSS)

Best HTML Editors for developers (Free)

Creating nested tables in HTML ( Example with code)

🗓️ Обновлено: 09.08.2022

💬Комментариев:
0

👁️Просмотров: 15921

В этой статье рассмотрим несколько примеров, как задать цвет любому изображению в формате svg с использованием css-стилей.

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

Давайте начнем с базы.

Основы

Изображение svg можно вставить кодом прямо в файл html — это будет инлайновый вариант:

<div class="svg-inline">
  <svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m12 24c6.629 0 12-5.371 12-12s-5.371-12-12-12-12 5.371-12 12 5.371 12 12 12zm-6.509-12.26 11.57-4.461c.537-.194 1.006.131.832.943l.001-.001-1.97 9.281c-.146.658-.537.818-1.084.508l-3-2.211-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.121l-6.871 4.326-2.962-.924c-.643-.204-.657-.643.136-.953z"/></svg>
</div>

А можно вставить через тег img:

<div class="svg-inline">
  <img src="img/icon.svg" alt="Svg" width="24">
</div>

Если заглянуть «под капот» и изучить код, который отвечает за отрисовку SVG, то можно выделить два свойства, которые отвечают за цвет — fill (заливка) и stroke (обводка). Их можно редактировать и тем самым менять цвет иконки.

Давайте выделим несколько методов, которые позволяют менять цвет SVG.

1. Меняем цвет с помощью свойства fill

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

Свойство fill можно применять к отдельному вектору в вашем изображении.

2. Меняем цвет в файле style.css

Или в любом другом файле css, который подключен к html.

Все легко и понятно. Мы обращаемся к тегу svg и с помощью свойства fill меняем цвет на тот, который нам нужен.

svg {
  fill: #5046e5;
}

Можете задать svg нужный класс и затем в css обратиться к элементу по этому классу:

<svg class="arrow-svg" width="24" height="24" viewBox="0 0 24 24">...

.arrow-svg {
  fill: #5046e5;
}

Это тоже будет работать.

3. Изменяем цвет с помощью инлайновых стилей

Мы можем прямо в файле svg прописать стили — с помощью <style></style>:

<svg 
  width="120" 
  height="120"
  viewBox="0 0 120 120" 
  xmlns="http://www.w3.org/2000/svg">
  <style>
    rect {
      fill: red;
    }
  </style>
  <rect x="10" y="10" width="100" height="100"/>
</svg>

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

<rect x="10" y="10" width="100" height="100" class="someclass" />

Так же, с помощью инлайновых стилей можем менять цвет svg при наведении. Это должно быть вам знакомо.

<style>
  rect:hover {
    fill: red;
  }
</style>

Это же актуально и для метода №2.

На этом все, если остались вопросы, то задавайте в комментариях. Мы отвечаем на все ваши вопросы.