svg fill in style
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?
Comments
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.
https://www.w3schools.com/cssref/sel_element.asp
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►?
fill:
. The only way to manipulate them with CSS in any useful way would be to use filters, likefilter: invert(1);
.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.
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
andstroke
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.
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.