Tips & Tricks: Inkscape

Forget everything you know about RGB, welcome to the world of Qt :

All rgba colors should be set between of 0-1, ex : Qt.rgba(0.050, 0.100, 0.500, 0) will result in something like this

And blur will strongly impact the color render

You can also replace rgba with hsla and hsva

1 Like

That’s quite the mystery. :sweat_smile:

1 Like

:artist_palette: How to Make an SVG Icon Adaptive (for KDE/Plasma Themes)

If you want your SVG icon to automatically adapt to the system color scheme (e.g., in KDE/Plasma), follow these steps. You can edit the SVG file in any text editor:


1. Add a <style> block inside the <defs> element with the exact ID current-color-scheme

:bell: Note: The ID must be exactly current-color-scheme. Other values won’t work — I’ve tested this.

<defs>
    <style id="current-color-scheme" type="text/css">
        .ColorScheme-Text { color: #ffffff; }
    </style>
</defs>

2. Locate the <path> element(s) you want to make adaptive

Find the path elements in your SVG that you want to respond to theme changes.


3. Add the ColorScheme-Text class to those <path> elements

<path class="ColorScheme-Text" ... />

4. Set the fill property to currentColor

Replace any hardcoded color (e.g., #000000) with currentColor, so the fill color is inherited from the class:

<path id="pathsample" class="ColorScheme-Text" style="fill: currentColor;" ... />

:white_check_mark: That’s it! Your SVG icon should now dynamically adapt to the system’s theme colors.

3 Likes

Perfect tutorial :pinched_fingers:

Side note :

You can set multiple .ColorScheme in this block to use different colors. Available classes are :

ColorScheme-Text
ColorScheme-Background
ColorScheme-Highlight
ColorScheme-ViewText
ColorScheme-ViewBackground
ColorScheme-ViewHover
ColorScheme-ViewFocus
ColorScheme-ButtonText
ColorScheme-ButtonBackground
ColorScheme-ButtonHover
ColorScheme-ButtonFocus
2 Likes

Thanks @perletero

2 Likes

@fog , thanks to your little secret, it got me wondering whether Inkscape has a Find & Replace feature.

When working on my Kvantum theme, I’ve been using the same method as you, replacing colors manually in a text editor.

Even when I need to add CSS styling while working with icons, I stick to the text editor.

Turns out Inkscape does have a Find & Replace feature. Now I know. Thanks! :grinning_face_with_smiling_eyes:

Changing colors in SVGs isn’t really an issue when using a text editor. What’s more challenging for me is drawing vectors. I’m not great with numbers. Former math student here… with a very “E”xcellent result :winking_face_with_tongue:

P.S. I didn’t want to spam the other thread, so I’m replying here :slightly_smiling_face:

2 Likes

I am in a “modern environment” like kde, the last 6 months, before I was using mainly command line utilities. I was an openbox junkie with my own openbox themes.
To modify the various gtk themes to my “openbox colors” I was using for some time geany 's find and replace feature in session (with all the css etc. files open).

But before this, for many years, the rpl -R command was my (THE) way. Simple, fast, all the files and subdirs in a folder, without Ctrl+S at the end. I was SPEED :stuck_out_tongue:

2 Likes

I tip my hat to this! Not a command-line junkie myself. :sweat_smile:

2 Likes

Imagine this:
The year is 2011, you have the any color you like monochromatic theme or 2019 with the fantastic DarK icons. A few thousands svg icons. You want to change the colors without config utilities. You don’t want to open 4000 files:
rpl -R #oldboringcolor #newsupercolor /here
Done.

PS. You don’t have to be “something”, only to be happy and have fun with your own choices :wink:

3 Likes

Yeah, doing it individually isn’t feasible :slightly_smiling_face:

2 Likes

I just discovered that Inkscape includes an XML Editor. You can access it via Edit → XML Editor, or use the shortcut Shift + Ctrl + X.

3 Likes

Looks like the new feature in Plasma 6.6 will make things a lot easier for us, @perletero! :heart_eyes:

2 Likes

Nice, this will make things easier, and you won’t have to change it every time there is an update…

1 Like

Thanks mate, I now know how to trace an image and create an SVG from it. Here’s what I did:
I started with this image which is small resolution and poor quality:

First of all I removed the background using Gimp:

You can probably do this in Inkscape but I’m more familiar with Gimp for this kind of operation.
The image now has a transparent background and looks like this:

I want to make it a smooth and noise free scaleable SVG so I open the image in Inkscape using the following settings…

Time to trace bitmap…


Adjust the settings to achieve the result you want…

Click “Apply”

Now it’s time to export the image as a SVG…

I used the following export settings…

I now have a lovely clear transparent SVG.

The end result…

3 Likes

Thanks a lot for the tutorial :vulcan_salute:

1 Like

My pleasure mate, thanks for showing me how to do it. :mage:

1 Like

@perletero application dashboard background follows color scheme now :slight_smile:

2 Likes

Thanks for pointing to. Application Dashboard AND Plasma Drawer :tada:

1 Like

Finally, won’t have to fiddle with obscure settings anymore :grin:

1 Like