render SVGs with system colors
Manuel Mommertz
2Kmm at gmx.de
Mon Sep 27 22:04:47 CEST 2010
Hello,
today I want to show you a way to apply system colors to SVGs before rendering
them. This has some nice effects. The generated graphic can adobt to system
colors and use colors other then black, white and the system background. And
even better: The SVG can use more then one system color. It can use colors for
window background, window text, button background, and so on.
Take a look at this:
http://imagebin.ca/view/oRViMe.html
http://imagebin.ca/view/EElPXR.html
http://imagebin.ca/view/Yl8W8QYR.html
So how does it work, do you ask? It's quite simple. On the SVG-side it is just
a bit css. You put a style tag in your SVG, give it the id 'color-scheme' and
before rendering, this is replaced by the actual system stylesheet.
As you also want a SVG that is pretty when you edit/view it, it is a good idea
to put some standard colors in the style-tag.
This is, how a minimal SVG can look like:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="320" height="320">
<defs>
<style type="text/css" id="color-scheme">
<![CDATA[
.ColorScheme-Background{color:#7f7f7f;}
]]>
<g id="hint-apply-color-scheme" />
</style>
</defs>
<rect x="0" y="0" width="320" height="320 class="ColorScheme-Background"
fill="currentColor" />
</svg>
Do you spot the nice trick with the hint? As the complete style-tag is
replaced, this hint gets lost when the SVG-data gets processed. But if the
user has a libplasma without my patch, plasma sees this hint and applys at
least the background color from current color scheme.
For now there are 8 different colors that can be used within the SVG:
Text
Background
ButtonText
ButtonBackground
ButtonHover
ButtonFocus
ViewText
ViewBackground
I attached two sample SVGs and the patch to get this working. I don't think
this can go in plasma in the current state. Feels more like a hack to me. A
better solution would require a way to hook in the parser of QSvgRenderer and
I don't think that this will become possible in the near future. But as the
amarok devs want this too, afaik, maybe sometimes...
So would do you think of this? Should we try to get something like this in
libplasma? Or is it to exotic? Maybe someone even has an idea how we can
archive this in a clean way. Let me know. :)
Cheers,
Manuel
-------------- next part --------------
A non-text attachment was scrubbed...
Name: button.svg
Type: image/svg+xml
Size: 20979 bytes
Desc: not available
Url : http://mail.kde.org/pipermail/plasma-devel/attachments/20100927/a2ba20a2/attachment-0002.svg
-------------- next part --------------
A non-text attachment was scrubbed...
Name: clock.svg
Type: image/svg+xml
Size: 25467 bytes
Desc: not available
Url : http://mail.kde.org/pipermail/plasma-devel/attachments/20100927/a2ba20a2/attachment-0003.svg
-------------- next part --------------
A non-text attachment was scrubbed...
Name: system-colors-in-svg.patch
Type: text/x-patch
Size: 9062 bytes
Desc: not available
Url : http://mail.kde.org/pipermail/plasma-devel/attachments/20100927/a2ba20a2/attachment-0001.patch
More information about the Plasma-devel
mailing list