svg fill in style

Tитан

Now I can change svg fill only by changing decoded svg-code. I saw some svgs with "fill" parameter, but it's don't works on most svgs. How can I change svg fill color by "fill" in my style. Should I change something in svg code?

Vednoc

Here is a live demo: https://codepen.io/anon/pen/ejvxWO

If your SVG have multiple path elements you can use svg > path:nth-child(n) to select them specifically. Don't forget to include a class name or id on SVG/parent element in order to prevent your settings being applied globally.

If this doesn't work out, please link to codepen that contains the SVG you want to change and I or someone else will take a look at it.

Tитан

What if svg haven't a class? If I'd change svg code in style to make a class and use it, it won't works

stonecrusher

You don't need a class to select an svg element. The tag / element selector is sufficient and can be limited by its parents.
https://www.w3schools.com/cssref/sel_element.asp

Tитан

I don't understand something. What should I do to fill this element by color?
The code is:
<li class="vk_reload_wrap"> <a class="ui_tab_plain vk_ui_tab_reload" onclick="return vkopt.wall.reload();" href="#"> <span class="blind_label">Reload</span> </a> </li>
And why there a "◄br►" appears inside a ◄code►◄/code►?

anagrammar

You can't. VK doesn't use traditional html SVG. Those are data-image SVG which are self contained, and aren't affected by CSS properties like fill:. The only way to manipulate them with CSS in any useful way would be to use filters, like filter: invert(1);.

Tитан

Can't I change svg-code the way it's color can be changable by css?

anagrammar

I suppose technically you could decode the data-image, download it, edit the SVG in a specialized graphics editor, then re-encode and add it back via CSS. That's a crazy amount of work to change an icon, even if you know how to do it all.

The real answer is still no, not in any sane way. You should be able to make them any color you like with the right filter combos though:

filter: invert(1)hue-rotate(180deg)brightness(1.2);

Play with the values till you get the desired look.

stonecrusher

I suppose technically you could decode the data-image, download it, edit the SVG in a specialized graphics editor, then re-encode and add it back via CSS. That's a crazy amount of work to change an icon, even if you know how to do it all.

Depending on how it's implemented, it's not that much work.
I discovered that pretty often they use base64-encoded standard html svg. That means you decode the base64, change the fill and stroke colors to your needs and encode to base64 again.

No graphics editor needed. https://www.base64encode.org/

I didn't investigate on vk.com though.

anagrammar

Alright, simple color changes can probably be edited right in the browser, but it'd still be just about the most complicated way possible to change the color of an icon. I maintain a personal style for VK, and they use the same bg-image method for at least a couple dozen icons.

I wouldn't recommend decode -> modify -> re-encode to anybody, let alone someone who doesn't know the difference between inline SVG and one encoded as a data-image bg. The end result for all that work would still leave you with a bg-image SVG which can't be affected by fill: either, so any hover or other state change would either require you to go through the whole process again, or use one of the more advisable methods anyway.

The simplest way to change them all would be filters, but even replacing them altogether with different icons/font-icons would be much more efficient than editing encoded data-image SVG individually.