SVG Based Star Rating Plugin For jQuery - star-rating-svg.js

File Size: 30.3 KB
Views Total: 13969
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
SVG Based Star Rating Plugin For jQuery - star-rating-svg.js

A lightweight jQuery plugin for rendering a SVG based star rating system on your webpage that supports for arbitrary star fractions, variable star sizes and colors.

How to use it:

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. Import jQuery library and the jQuery star-rating-svg.js script at the bottom of your web page.

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

4. Call the function to render a basic star rating inside the container you just created.


5. Available options to customize your star rating system.


  // the number of stars
  totalStars: 5,

  // min rating
  minRating: 0

  // 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



  • fix level colors


  • adds minimum rating


  • adds forceRoundUp



  • Adding fix for baseUrl having a hash


  • adds public method to setReadOnly dynamically


  • Fixed issues with SVG and <base> tag


  • Adds method to resize stars on the fly


  • Fixed: When activating full stars it is not possible to return to zero stars.


  • Fixed: Need option to round up or down, when using "setRating"


  • prevent setting out of bounds rating


  • Fixed unload method


  • Update


  • adds support for full stars
  • Disables rating after initial rate selected


  • v3.5.0


  • indentation fix

This awesome jQuery plugin is developed by nashio. For more Advanced Usages, please check the demo page or visit the official website.