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:
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.