SVG Star Rating In jQuery Plugin – Star-rating-svg.js

File Size:26.7 KB
Views Total:319
Last Update:December 31, 2017
Publish Date:December 29, 2017
Official Website:Go to website

A plugin that renders a SVG based star rating system on the webpage of the website that supports the main arbitary star fractions and the variable star sizes and the different kind of colours as it is a lightweight jQuery plugin.

How to use :

1. Import the star-rating-svg.css stylesheet for the basic CSS styles :

<link rel="stylesheet" thref="path/to/star-rating-svg.css">

2. Add the required CSS class ‘jq-stars’ to an empty DIV element :

<div class="demo jq-stars"></div>

3. Add jQuery library and the jQuery star-rating-svg.js script :

<script src="//"></script>
<script src="/path/to/"></script>

4. Call the function to render a basic star rating :


5. Available options to customize Plugin :


  // the number of stars
  totalStars: 5,

  // rate using whole stars
  useFullStars: false,

  // 'straight' or 'rounded'
  starShape: 'straight',

  // the color of empty star
  emptyColor: 'lightgray',

  // star color on hover
  hoverColor: 'orange',

  // star color on active
  activeColor: 'gold',

  // star color on rated
  ratedColor: 'crimson',

  // use gradient color
  useGradient: true,

  // readonly mode
  readonly: false,

  // auto disable after rate
  disableAfterRate: true,
  // when enabled (true), enables compatibility with the base tag in your head section
  baseUrl: false,

  // gradient color
  starGradient: {
    start: '#FEF7CD',
    end: '#FF9511'

  // the thickness of the border
  strokeWidth: 0,

  // the color for the border
  strokeColor: 'black',

  // Initial rating
  initialRating: 0,

  // star size
  starSize: 40,

  // if true, forces rounding the initial rating to the nearest upper half even if the value is closer to the lower (1.1 -> 1.5 rather than 1.1 -> 1.0)
  forceRoundUp: true

  // callback
  callback: function(currentRating){
    // do something after rating

  // more callbacks
  onHover: noop,
  onLeave: noop

6. API methods :

// Destroys the instance and removes events attached to it

// Gets the current rating from instance

// 0 to max stars (int), round (Boolean)
$('.demo').starRating('setRating', VALUE, ROUND);

// Resize the stars on the fly
// value: 1 to 200

// disable/enable stars manually
$('.demo').starRating('setReadOnly', true);

7. Events :

  onHover: function(currentIndex, currentRating, $el){
    // do something on mouseover
  onLeave: function(currentIndex, currentRating, $el){
    // do something after mouseout

Change Log


  • Adds color for manually rated stars 'ratedColor'


  • Adds public method to disable & enable stars manually


  • Fixes issue when using SVG + base tag


  • Change the star type
  • Adds method to resize star on the fly


  • Fixes Firefox hover issues


  • Adds set rating, and get rating
  • Adds onHover event
  • Adds onLeave event


  • Fixes support for enabling full stars


  • Returns element on callback
  • Fixed typos


  • Fixed bugs related to rendering in retina


  • Added readonly mode