Features

• No images. All graphics are drawn using HTML SVG that scales to any size.
• No external CSS file. Default style classes are injected into your page. 
  If you want to tailor the style classes in your own CSS you can. 
  You can also style the individual widgets via options. It's your choice.
• Databinders for Knockout MVVM.
• MIT License.

Usage

Include jQuery and jQuery UI in your HTML before including sevenSeg.js. If you intend to use Knockout it needs to be included before sevenSeg.js too, but it's completely optional.

<span class="pln" style="color: rgb(255, 255, 255);">
</span><span class="tag" style="color: rgb(137, 189, 255);">&lt;script</span><span class="pln" style="color: rgb(255, 255, 255);"> </span><span class="atn" style="color: rgb(189, 183, 107);">src</span><span class="pun" style="color: rgb(255, 255, 255);">=</span><span class="atv" style="color: rgb(101, 176, 66);">&quot;http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js&quot;</span><span class="tag" style="color: rgb(137, 189, 255);">&gt;&lt;/script&gt;</span><span class="pln" style="color: rgb(255, 255, 255);">
</span><span class="tag" style="color: rgb(137, 189, 255);">&lt;script</span><span class="pln" style="color: rgb(255, 255, 255);"> </span><span class="atn" style="color: rgb(189, 183, 107);">src</span><span class="pun" style="color: rgb(255, 255, 255);">=</span><span class="atv" style="color: rgb(101, 176, 66);">&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js&quot;</span><span class="tag" style="color: rgb(137, 189, 255);">&gt;&lt;/script&gt;</span><span class="pln" style="color: rgb(255, 255, 255);">
</span><span class="tag" style="color: rgb(137, 189, 255);">&lt;script</span><span class="pln" style="color: rgb(255, 255, 255);"> </span><span class="atn" style="color: rgb(189, 183, 107);">src</span><span class="pun" style="color: rgb(255, 255, 255);">=</span><span class="atv" style="color: rgb(101, 176, 66);">&quot;http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js&quot;</span><span class="tag" style="color: rgb(137, 189, 255);">&gt;&lt;/script&gt;</span><span class="pln" style="color: rgb(255, 255, 255);">
</span><span class="tag" style="color: rgb(137, 189, 255);">&lt;script</span><span class="pln" style="color: rgb(255, 255, 255);"> </span><span class="atn" style="color: rgb(189, 183, 107);">src</span><span class="pun" style="color: rgb(255, 255, 255);">=</span><span class="atv" style="color: rgb(101, 176, 66);">&quot;sevenSeg.js&quot;</span><span class="tag" style="color: rgb(137, 189, 255);">&gt;&lt;/script&gt;</span><span class="pln" style="color: rgb(255, 255, 255);">
    </span>

You can then instantiate sevenSeg and sevenSegArray widgets on any div's of your choosing. 
sevenSeg creates a single digit display, and sevenSegArray creates a group containing an arbitrary number of digits. You'll most likely want to use sevenSegArray. (See examples below).

These are the widget options supported by sevenSeg:

options: {
    /**
    This option controls the display value on the 7seg.  Set this to the numeric digit you
    want displayed.
    */
    value: null,

    /**
    Override the default segment on color (Red).  
    Note: You can alternatively define a CSS style for the class.sevenSeg-segOn that specifies a 'fill' color.
    */
    colorOn: null,

    /**
    Override the default segment off color (#320000).  
    Note: You can alternatively define a CSS style for the class .sevenSeg-svg that specifies a 'fill' color.
    */
    colorOff: null,

    /**
    Override the default background color of the display (Black).  
    Note: You can alternatively define a CSS style for the class .sevenSeg-svg that specifies a 'background-color' color.
    */
    colorBackground: null,
    
    /**
    This option allows skewing the segments to create a slant effect.
    Note: Setting "transform: skew()" in CSS is problematic for SVG. Would be nice to have, but browser support just 
    isn't there yet. So, setting the slant must be done through options.
    */
    slant: 0,  

    /**
    This flag controls the appearance of the decimal point 'dot' in the display.
    The default is to display it (true), but you can set to false to omit it.
    */
    decimalPoint: true
}