SVG Surface

A few months ago I've made an experiment: I've created a canvas-independent class that rendered on a SVG. Then, I've added a simple interface that allowed me to render the SVG on an operating-system dependent surface. This was a base for an UI based on SVG and completely independent of the OS. After a few more testing, I've decided to integrate this surface in Concept Client 2.0.190. So here it is:

All the buttons are defined in XML:

_Common.svg

<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <linearGradient id="linearGradient1">
   <stop stop-color="#ffb100" offset="0"/>
   <stop stop-color="#ffb100" stop-opacity="0.498039" offset="0.5"/>
   <stop stop-color="#ffffff" offset="1"/>
  </linearGradient>
  <linearGradient y2="-0.000052" x2="0.519006" y1="2.485417" x1="0.527431" id="linearGradient11" xlink:href="#linearGradient1"/>

  <linearGradient id="linearGradient2">
   <stop stop-color="#ffff00" offset="0"/>
   <stop stop-color="#ffff00" stop-opacity="0.498039" offset="0.5"/>
   <stop stop-color="#ffffff" offset="1"/>
  </linearGradient>
  <linearGradient y2="-0.000052" x2="0.519006" y1="2.485417" x1="0.527431" id="linearGradient12" xlink:href="#linearGradient2"/>

  <linearGradient id="linearGradient3">
   <stop stop-color="#ffb1ff" offset="0"/>
   <stop stop-color="#ffb1ff" stop-opacity="0.498039" offset="0.5"/>
   <stop stop-color="#ffffff" offset="1"/>
  </linearGradient>
  <linearGradient y2="-0.000052" x2="0.519006" y1="2.485417" x1="0.527431" id="linearGradient13" xlink:href="#linearGradient3"/>

 </defs>
 <metadata>image/svg+xml</metadata>
</svg>

Button.svg

<control class="Button">
    <svg for="normal" width="70" height="30">
        <rect fill="url(#linearGradient11)" stroke-width="0.799956" stroke-opacity="0.805" ry="5.809992" y="0" x="0" height="100%" width="100%"/>
    </svg>

    <svg for="prelight" width="70" height="30">
        <rect fill="url(#linearGradient12)" stroke-width="0.799956" stroke-opacity="0.805" ry="5.809992" y="0" x="0" height="100%" width="100%"/>
    </svg>

    <svg for="clicked" width="70" height="30">
        <rect fill="url(#linearGradient13)" stroke-width="0.799956" stroke-opacity="0.805" ry="5.809992" y="0" x="0" height="100%" width="100%"/>
    </svg>
</control>

Label.svg

<control class="Label" passive="1">
    <svg for="normal" width="70" height="30">
        <text style="font-size: 12; fill:#A0A0A0; font-style:bold; stroke-width:2px; font-family: verdana, arial, sans-serif;" id="text3208" y="100%" x="0" xml:space="preserve">Hello !</text>
    </svg>

    <svg for="prelight" width="70" height="30">
        <text style="font-size: 12; fill:#ffffff; font-style:bold; stroke-width:2px; font-family: verdana, arial, sans-serif;" id="text3208" y="100%" x="0" xml:space="preserve">Hello !</text>
    </svg>

    <svg for="clicked" width="70" height="30">
        <text style="font-size: 12; fill:#FF8080; font-style:bold; stroke-width:2px; font-family: verdana, arial, sans-serif;" id="text3208" y="100%" x="2" xml:space="preserve">Hello !</text>
    </svg>
</control>

This surface enables you do easily define your own custom controls.

I think that this will be the base for Concept Client 4.0 IF and only IF I decide do get rid of GTK+. Gtk is a fabulous UI framework, but moving to my own, backwards-compatible framework, it will give Concept Applications a nicer look and feel. This is just an idea. Most probably I will use both GTK+ and SVG surfaces.

Now, this is Gyro!