How to configure SVG for custom star images

Finding and Creating the perfect SVG for your custom star images

Minh Vu avatar
Written by Minh Vu
Updated over a week ago

Requirements

The following criteria must be met before your SVG can be uploaded

Dimension Attributes: The SVG must contain width & height attributes and/or a viewBox.

In order for the SVG's dimensions to be recognized on our widgets, the markup must have valid dimension attributes present. Open your SVG file in any text editor, like Notepad, and confirm that the first line is similar to below:

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100">

Width Height Ratio: The width to height ratio should be as close to 1:1 as possible.

The ratio limit ensures the custom star images fit into our existing widgets, and don't affect the layout of other elements. For example, this is how an SVG with a ratio of 3.7:1 looks on the reviews badge and a review card.

Size: The size of the SVG must be smaller than 30KB.

We have limited the file size to ensure the time it takes to serve images on your websites is as short as possible, and that our storefront resources are within Shopify's technical limits.


Examples of preferred SVGs

The fewer details and colors on your SVG, the easier it is for site visitors to make out the image on your widgets. It also helps to reduce the file size that needs to be processed and served to storefronts. The following are the types of SVGs which produce the most consistent results, all from online resources listed at the end of the article.

Illustrations with solid colors

On Okendo Star Ratings:

On Okendo Reviews Badge:

Simple shapes

On Okendo Reviews Widget:

Okendo Reviews Widget


What to avoid

SVGs with gradient colors or animations

Due to our specific approach to sanitizing and optimizing SVGs, some elements of the image, especially ones using gradient colors, animations, and script execution, may be omitted to ensure performance and security. Examples of this behavior are listed below.

Penguin Image with gradient

On Okendo Star Ratings

This can be fixed by changing the colors to "Solid" using your editing software (Figma, AI, etc.). Figma example shown below.

Resulting SVG after publishing:

Detailed illustrations

Although they look great up-close, detailed images tend to be harder to make out when used in an onsite widgets. They are also slower to load on the websites.

Illustrated bird with detailed outlines

On Okendo Homepage Carousel:

Full-fidelity images converted to SVG

When image files are converted to SVG format, the file size tends to be inflated significantly. This translates to longer load time on storefronts and defeats the benefit of using SVGs, which is the compact file size.


Online SVG Resources

Did this answer your question?