Solved

SVG icons missing color

  • 25 August 2019
  • 3 replies
  • 98 views

Userlevel 4
Badge +10
Thinkwise documentation recommends using SVG icons because of their scalability. Once I read this I immediately switched to the SVG format and our application is now full of them. They indeed render great and are also very easy to customize with tools such as Inkscape. The readability of the format also makes it a great candidate for scripting leading to more dynamic icons instead of just static ones. SVG seems the way to go for any gui.

The problem though is that, for us at least, they often don't render well in the web application. They do appear and every button with an SVG icon works so there are no functionality issues. However they often miss color and appear in shades of grey. Here's an example:



The icons in the Windows application are at the top and the same icons through the web interface are at the bottom.

It gets stranger than that. Sometimes some of the SVG icons in the browser do have full color and this seems to occur quite randomly. We tested in Chrome, Firefox and Internet Explorer.

First I thought this might have something to do with how Inkscape formats SVG code but it also occurs with SVG files from other sources.

The first icon in the screenshot can be downloaded for testing and reference. When opened with a browser directly the color (green in this case) shows fine. It just seems that the web application does something making the color disappear.

We just upgraded to version 2019.1 and the problem hasn't gone away. Is this a known issue? I know you guys are working hard to get the new universal interface to production phase but if you find the time for a hotfix for this particular issue that would be really nice.
icon

Best answer by Jasper 27 August 2019, 09:47

Hi Roland,

The universal GUI will ultimately become a fully-fledged alternative to the Windows, Web and Mobile user interfaces. We will make sure that current layouts (with tabs and inline details) in Windows and Web are also supported in the Universal GUI, to make the transition as smooth as possible!
View original

3 replies

Userlevel 6
Badge +6
Hi Roland,

This is a know issue but we already have a fix available that will be released in a few weeks.

Teaser: the user interfaces will then also adjust the color of (black or uncolored) SVG images to match the color of the corresponding label.

Userlevel 4
Badge +10
Hi Jasper,

That does look very nice. And also great to know you're still investing time in the classic web application. You probably have your hands full already now with the ongoing Universal project.

Which reminds me of another question: the current Universal alpha shows details behind buttons. Do you plan to release different skins and can we then also choose to have a gui layout similar to the current windows application? But then still have a responsive web layout so it also works on mobile devices?
Userlevel 6
Badge +6
Hi Roland,

The universal GUI will ultimately become a fully-fledged alternative to the Windows, Web and Mobile user interfaces. We will make sure that current layouts (with tabs and inline details) in Windows and Web are also supported in the Universal GUI, to make the transition as smooth as possible!

Reply