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