0

I want to adapt veusz app icons (svg files) to be more visible with dark breeze theme on Manjaro KDE, what I need is how to replace each color with its corresponding inverted color in each svg file.

1

I know nothing of practical application programming, but one easy way to invert every color is to group the items which should be inverted and use blending mode difference against white. An example (drawn in Inkscape):

enter image description here

I have here a group which contains colored rectangles and a black text object. The group is in the front and in the background there's a big white rectangle.

After changing the blending mode of the group to Difference the image looks this:

enter image description here

The result is the same if the white rectangle is on the top and it has blending mode Difference:

enter image description here

2
  • Hmmm . . . layer blending modes have somewhat flaky support in SVGs - especially in browsers. Not sure if things have improved recently. There's a possibility that other software may not be able to render this properly at all. Usually best avoided.
    – Billy Kerr
    Oct 22 '21 at 15:28
  • SVG blend modes have pretty good support for browser tech. Oct 22 '21 at 17:00
0

OK, let's say you have an icon like the following. I've used a very basic two colour icon to simplify this. You may be able to automate the following solutions for multiple SVGs by writing some code, but that's way above my skill set, and coding is generally off-topic here anyway.

enter image description here

Here's the SVG

<?xml version="1.0" encoding="UTF-8"?>
<svg width="34.3mm" height="32.4mm" version="1.1" viewBox="0 0 34.3 32.4" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-44.8 -71.8)">
  <path d="m58 77.7a1.98 1.98 0 0 0-1.98 1.98v13.1l-1.32-1.77a1.98 1.98 0 0 0-2.78-0.397 1.98 1.98 0 0 0-0.397 2.78l4.5 6v0.811a2.1 2.1 0 0 0 2.1 2.1h11.4a2.4 2.4 0 0 0 2.4-2.4v-11.3a1.98 1.98 0 0 0-1.98-1.98 1.98 1.98 0 0 0-1.98 1.98v-1.78a1.98 1.98 0 0 0-1.98-1.98 1.98 1.98 0 0 0-1.98 1.98v-1.78a1.98 1.98 0 0 0-1.98-1.98 1.98 1.98 0 0 0-1.98 1.97v-5.34h-2.97e-4a1.98 1.98 0 0 0-1.98-1.98z" fill="#df2b3a"/>
  <path d="m58 73.3c-1.17-0.0023-2.34 0.315-3.37 0.953-2.06 1.28-3.23 3.62-3 6.04a1.43 1.43 0 0 0 1.56 1.29 1.43 1.43 0 0 0 1.29-1.56c-0.128-1.34 0.513-2.63 1.66-3.33 1.14-0.707 2.58-0.704 3.72 0.0078 1.14 0.712 1.77 2 1.64 3.34a1.43 1.43 0 0 0 1.28 1.56 1.43 1.43 0 0 0 1.56-1.28c0.241-2.42-0.914-4.77-2.97-6.05-1.03-0.643-2.2-0.964-3.37-0.967z" fill="#ffeb00"/>
 </g>
</svg>

You can see the fill colours are #df2b3a and #ffeb00. You'll need to scroll to the end of each path to find them.

Solution 1

All you'd need to do is to find and replace these with the colours you want. You could do this almost any text editor. If you want to work out the inverse of an RGB colour, there's an online calculator it here: *https://pinetools.com/invert-color.

*Note I have no affiliation or links with the owners or developers of this site.

Anyway, here's the result of inverting these two colours using that link. I calculated these as #20d4c5 and #0014ff respectively, and simply edited the SVG in a text editor (I used Notepad++)

enter image description here

Solution 2

In Inkscape you can add an SVG filter to invert existing colours. The potential problem with this however, is that your software may not be able to render it properly. Support for SVG filters can be a bit flakey. I suppose you could test it and see. In Inkscape it's located under Filters > Colour > Invert.

enter image description here

Here's an example of the above SVG with that filter used to invert the colours

<?xml version="1.0" encoding="UTF-8"?>
<svg width="34.3mm" height="32.4mm" version="1.1" viewBox="0 0 34.3 32.4" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <filter id="filter7931" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">
   <feColorMatrix result="color2" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 -0.21 -0.72 -0.07 2 0 "/>
  </filter>
 </defs>
 <g transform="translate(-44.8,-71.8)" filter="url(#filter7931)">
  <path d="m58 77.7a1.98 1.98 0 0 0-1.98 1.98v13.1l-1.32-1.77a1.98 1.98 0 0 0-2.78-0.397 1.98 1.98 0 0 0-0.397 2.78l4.5 6v0.811a2.1 2.1 0 0 0 2.1 2.1h11.4a2.4 2.4 0 0 0 2.4-2.4v-11.3a1.98 1.98 0 0 0-1.98-1.98 1.98 1.98 0 0 0-1.98 1.98v-1.78a1.98 1.98 0 0 0-1.98-1.98 1.98 1.98 0 0 0-1.98 1.98v-1.78a1.98 1.98 0 0 0-1.98-1.98 1.98 1.98 0 0 0-1.98 1.97v-5.34h-2.97e-4a1.98 1.98 0 0 0-1.98-1.98z" fill="#df2b3a"/>
  <path d="m58 73.3c-1.17-0.0023-2.34 0.315-3.37 0.953-2.06 1.28-3.23 3.62-3 6.04a1.43 1.43 0 0 0 1.56 1.29 1.43 1.43 0 0 0 1.29-1.56c-0.128-1.34 0.513-2.63 1.66-3.33 1.14-0.707 2.58-0.704 3.72 0.0078 1.14 0.712 1.77 2 1.64 3.34a1.43 1.43 0 0 0 1.28 1.56 1.43 1.43 0 0 0 1.56-1.28c0.241-2.42-0.914-4.77-2.97-6.05-1.03-0.643-2.2-0.964-3.37-0.967z" fill="#ffeb00"/>
 </g>
</svg>

You wouldn't even need to use Inkscape for this. You could just copy and paste the entire <defs>...</defs> section shown above into your SVG, and make sure you also have the filter="url(#filter7931)" attribute copied and pasted into the group.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.