Systemcolors in SVGs
2Kmm at gmx.de
Sun Feb 20 10:56:39 CET 2011
since 4.6 plasma allows prepered svgs to use system colors. For this to work
the svg needs to have a css-style with the id 'current-color-scheme' which
gets replaced by a style containing classes with the actual system colors on
For someone with knowlage of xml/svg code it should be trivial to apply this
after the graphic itself was finished. But I think most people creating
graphics don't want to dive in the source code. For this purpose I am working
on a little tool to help them.
Take a look at http://kame2.de/KDE/svgmod/
To get a colorscheme aware svg there are four steps needed:
* Define which system colors you want to use.
* Create the svg like you are used to but use one defined color at places
where on system color should take effect.
* Add the corresponding classes to your svg with svgmod -a
* Transform elements using a defined color to the corresponding system color
with svgmod -c
A little example:
Say that we want to use window background and window text colors.
Now we create our svg and use color #123456 for text and #abcdef for the
background. We don't use this colors in any other place. (For now, you need to
apply this colors to the elements directly, so don't put them in gradients.
Also don't try to use different system colors for fill and stroke of the same
element. This limitations should go away in future versions of svgmod.)
After that we need to add the classes ColorScheme-Background and ColorScheme-
Text to the svg in a style with id current-color-scheme:
svgmod -a current-color-scheme ColorScheme-Background '#e0e0e0' \
-a current-color-scheme ColorScheme-Text '#000000' \
The colors #e0e0e0 and #000000 are the colors you see if the svg is not
processed by plasma. This happens for versions before 4.6 and if you look at
the graphics with a svg viewer or editor. You are free to choose which ever
colors you like for that.
In the last step we need to finaly replace the colors #123456 and #abcdef with
our classes. This is as simple as:
svgmod -c '#123456' ColorScheme-Text \
-c '#abcdef' ColorScheme-Background \
Some things to keep in mind:
Put the colors in quotation marks to prevent the shell from interpreting
charakters like # and ().
The commands modify the graphic itself. So if you need the original file, make
a copy before using svgmod or use the -b switch to create a backup. But be
aware of the fact that -b overwrites a existing backup.
Hope you like this little tool. Please provide feedback to help me making it
Thanks for reading
More information about the Plasma-devel