SVG icons: how are you supposed to change fill colour?

SVG icons: how are you supposed to change fill colour? Started by Antechinus · September 03, 2020, 03:36:01 am · Read 18898 times 0 Members and 3 Guests are viewing this topic. previous topic - next topic

SVG icons: how are you supposed to change fill colour?

September 03, 2020, 03:36:01 am

Just wondering. Say I wanted to do a dark theme. Default icons colours are no good, so I want to change them. CSS has a fill attribute you can use, but it doesn't appear to work on Elk icons. I assume this is because with Elk icons the .svg image is set as ::before content, rather than as just an .svg image as part of the DOM.

Anyway, since this is something really obvious I assume there must be an easy and obvious way of changing icon colours via CSS. Do note that I would not classify having to directly edit the XML for every .svg icon as "easy" or "obvious".

PS: By the way, it's easy with Font Awesome icons if you are actually running FA. You can change colours just like any other font. Elk 1.1.6 doesn't appear to run FA though, so no can do that way.

Re: SVG icons: how are you supposed to change fill colour?

Reply #1 – September 05, 2020, 05:04:19 pm

Ok, haz solution: CSS transforms and filters. If you do this:

Code: [Select]

  .i-board-off {
  	position: relative;
  	top: 6px;
  	left: 6px;
  	transform: rotate(15deg)scale(.85);
  	filter: brightness(.6)
  }
  .i-board-redirect {
  	position: relative;
  	top: 6px;
  	left: 6px;
  	transform: scale(.85);
  	filter: brightness(.8) sepia(1) hue-rotate(-10deg) saturate(1.4)
  }}

It looks like the attached screenshot^[1], which is a lot easier than editing the XML for each icon.

¹And before anyone asks: yes, the theme will be available soon, for certain rubbery definitions of "soon" that depend on my mood and various life things.↵

Re: SVG icons: how are you supposed to change fill colour?

Reply #2 – October 01, 2020, 03:48:11 pm

I've attached the current state of the CSS for this thing, meant for running in Stylus or Stylem.

Caveats:

1/ It may not be consistent absolutely everywhere, since I've only been using it for browsing on this site and I don't visit every possible page here. I haven't done a serious and comprehensive de-bug on a test site yet.

2/ The CSS is functional as is, but has gone through umpteen stages of being minified to save space, then having extra stuff tacked on the end when I think of something else. then having minified bits expanded when I go back to add another selector in somewhere, etc, etc etc.

IOW it works, but it's nasty. Hence the file name.

Re: SVG icons: how are you supposed to change fill colour?

Reply #3 – October 02, 2020, 07:47:41 am

What is FA?

Re: SVG icons: how are you supposed to change fill colour?

Reply #4 – October 02, 2020, 07:49:46 am

Ohh that picture... Looking forward to trying it out at some point!!!

Re: SVG icons: how are you supposed to change fill colour?

Reply #5 – October 02, 2020, 07:54:12 am

Looking at the CSS file... By the way not nice to curse in your CSS

Like people like me might read it...
In any case I need to watcg that 1 hour CSS course on youtube. At least I'll get some more understanding. Like yea... Anyway nice work on the black again keep it up

Re: SVG icons: how are you supposed to change fill colour?

Reply #6 – October 02, 2020, 08:44:58 am

Quote from: Darkijah – October 02, 2020, 07:47:41 amWhat is FA?

Font Awesome https://fontawesome.com/

Re: SVG icons: how are you supposed to change fill colour?

Reply #7 – October 02, 2020, 09:15:51 am

Quote from: radu81 – October 02, 2020, 08:44:58 am
Quote from: Darkijah – October 02, 2020, 07:47:41 amWhat is FA?
Font Awesome https://fontawesome.com/

Interesting, I've seen this Font Awesome in my video player although not sure what it was, or what it does - although still not. But the page gave me some ideas to what it was. Like Icons which are a kind of font and can easily be edited to do things. It seems... Hmmm I still wonder what the use in the video player is for it, or maybe it is just for the people using it. No idea... hmmm

Re: SVG icons: how are you supposed to change fill colour?

Reply #8 – October 02, 2020, 04:19:54 pm

The basic idea of FA is that as the icons are vectors, rather than raster images, they look good at any scale. So you can use them on high density displays (usually mobiles of some sort) and they won't go blurry, and of course you can do a fair bit of custom styling of them with CSS.

Re: SVG icons: how are you supposed to change fill colour?

Reply #9 – October 03, 2020, 02:02:01 pm

I'll have to do a search on that at some point.
Thanks.

Re: SVG icons: how are you supposed to change fill colour?

Reply #10 – October 14, 2020, 06:15:46 am

Quote from: Antechinus – October 02, 2020, 04:19:54 pmThe basic idea of FA is that as the icons are vectors, rather than raster images, they look good at any scale. So you can use them on high density displays (usually mobiles of some sort) and they won't go blurry, and of course you can do a fair bit of custom styling of them with CSS.

I actually got some FontAwesome working on my website, although I don't the idea of it getting it from the outside, but it works. So it will do for now for Music and Video Icon. it's on the JIGA page top left. Actually why don't I just take a picture of it... Argh, Quick reply...

-edit-

It seems you might be able to get some FontAwesome file so you can have it on your web server directly... At least I've seen one theme with some files with the name. I wonder if I can do the same with what I'm using, which might fix a minor detail while loading. Anyway, will be some future thing at some point. Lets move on with ElkArte and the Dark Theme.

Re: SVG icons: how are you supposed to change fill colour?

Reply #11 – October 14, 2020, 10:03:43 pm

You can enable FA support in 1.1, look at the top of index.template for how ... Just to note 1.0 was only FA, 1.1 moved to SVG, but themes can still enable FA if wanted.

Quoteseriously_gruesome

Even with the warning I still had a small leak

Re: SVG icons: how are you supposed to change fill colour?

Reply #12 – October 15, 2020, 06:36:57 am

I guess FontAwesome will only have the free icons then in it? As a lot of the icons on there webpage one have to pay... It does not sound so open source, but apparently people don't care about that.

Ahh the index.template.php... Kinda still no overall certain of all the theming things, there is so much. Although I have looked into one specific file to changes mostly colors in Besocial

It's moving forward, but there are so many many settings. But really nicely laid out by the team and instructions as well on things. Like it start out with an intro of all the things found in the file and talks about another file which have all the other things of another kind then colors.

But there is a lot, a huge amount of CSS even with those instructions.

I guess these are the files you are talking about... There really is a lot to learn. Picture included.

-edit-

What is the difference between FontAwesome and SVG? I don't even know what SVG is, is it better?
No idea how one would know if something had a leak on not - I'm not a programmer and not much into such things.

Re: SVG icons: how are you supposed to change fill colour?

Reply #13 – September 17, 2021, 09:56:43 pm

Here's an odd one. I'm trialling Kiwi browser for Android*. Although I can get Stylus running custom CSS overrides on Android for an SMF test site, for some reason I can't get it to recognise the custom stylesheet on elkarte.net.**

Which is odd, since the stylesheet is enabled in Stylus settings on Android, just like the desktop version I'm using at the moment on Windows. The desktop version on Windows applies here just fine, but the version running on Android does not.

At the moment I don't have an online Elk test site, so I suppose I should set one up and see if I can get the Stylus override stylesheet working there.

Yes, Grumpychinus now haz teh smartphone. Yay me.

* Incidentally, I do know that Kiwi browser seems to have some odd bugs. It always crashes the tab if I try to access the forum over at SMF, and sometimes (but not always) crashes the tab if I try to access the TLD there.

So the Stylus custom stylesheet not working on elkarte.net could be due to Kiwi having weird bugs per domain. But, at the moment, it seems to be the only browser for Android that will allow running extensions. Hey ho.

Re: SVG icons: how are you supposed to change fill colour?

Reply #14 – September 18, 2021, 01:02:05 am

Aha! Figured it out. On mobile you have some sort of trickery injecting a style tag for elements related to Didomi, and that is killing Stylus's attempt to inject the custom style tag in the same location (ie: just before the closing tag of the body element).

So to get Stylus working on this site I would have to use a script blocker to kill the Didomi thing (which frankly does not seem like a useful addition, considering it's not applied to desktop anyway). If that was done, custom stylesheets via Stylus/Android might work on this site.