Subscribe

CSS SVG star rating ⭐️

✍️

We will learn how to create an SVG powered rating component with stars. See the code example in the Codepen.

27 Oct, 2020 · 3 min read

Today we will be looking at making an SVG star rating. In our example, we will be using three types of stars:

  • Empty star
  • Half star
  • full star

Then we will be showcasing some examples of how to use them to show a specific star rating.

You can see the example code in this Codepen

See the Pen CSS SVG star rating ⭐️ by Chris Bongers (@rebelchris) on CodePen.

Creating the SVG set

As mentioned, we will be using three versions of the stars, and we will be using SVG Sprites to accomplish this. Here is the SVG code for the stars:

<svg id="stars" style="display: none;" version="1.1">
  <symbol id="stars-empty-star" viewBox="0 0 102 18" fill="#F1E8CA">
    <path
      d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218"
    />
  </symbol>
  <symbol id="stars-full-star" viewBox="0 0 102 18" fill="#D3A81E">
    <path
      d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218"
    />
  </symbol>
  <symbol id="stars-half-star" viewBox="0 0 102 18" fill="#D3A81E">
    <use xlink:href="#stars-empty-star" />
    <path
      d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792"
    />
  </symbol>
</svg>

Looking at the star paths, we can see we have three different star shapes:

  • stars-empty-star: This is the star with a very light gold background.
  • stars-full-star: This is actually the same shape but with a different color.
  • stars-half-star: This is a combination of an empty star at the bottom and a half star on top.

That will be our source, and we can use this in the following ways.

Using the SVG stars

The main question is, of course, how can we now showcase our stars?

Let's say you want to show an empty star:

<svg aria-hidden="true" focusable="false" class="rating">
  <use xlink:href="#stars-empty-star" />
</svg>

Or a full star:

<svg aria-hidden="true" focusable="false" class="rating">
  <use xlink:href="#stars-full-star" />
</svg>

Or even the half star:

<svg aria-hidden="true" focusable="false" class="rating">
  <use xlink:href="#stars-half-star" />
</svg>

That works, awesome!

But now we want to make a 5-star rating component, and SVG's tend to sit on top of each other.

So if we have the following code:

<!-- 2.5 Rating -->
<svg aria-hidden="true" focusable="false" class="rating">
  <use xlink:href="#stars-full-star" />
  <use xlink:href="#stars-full-star" />
  <use xlink:href="#stars-half-star" />
  <use xlink:href="#stars-empty-star" />
  <use xlink:href="#stars-empty-star" />
</svg>

It all looks like this:

SVG Stars

Hmm, weird? It only shows one star? Correct!

So let's use CSS to fix that.

use {
  &:nth-child(2) {
    transform: translate(20px);
  }
  &:nth-child(3) {
    transform: translate(40px);
  }
  &:nth-child(4) {
    transform: translate(60px);
  }
  &:nth-child(5) {
    transform: translate(80px);
  }
}

Every x child we give 20px offset position.

After applying the CSS to the star rating, we finally get this:

SVG Star rating

You can find the rest of the rating combinations in the Codepen!

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Trying out native dialog modals

8 Aug, 2022 · 3 min read

Trying out native dialog modals

HTML fallback images on error

6 Aug, 2022 · 2 min read

HTML fallback images on error

Join 1829 devs and subscribe to my newsletter