Using SVG in Shopify
Add scalable SVG graphics to your Shopify store — from logos to product icons — for sharp display on all devices.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Uploading SVG to Shopify
Shopify allows SVG uploads in the Files section.
- Admin → Content → Files → Upload Files
- Select your .svg file — Shopify accepts SVG natively
- After upload, click the file to copy its CDN URL
- Use the URL in your theme's image tags or Liquid templates
Using SVG in Shopify Theme Code
Reference uploaded SVGs in Liquid templates using their CDN URL.
- <img src='{{ 'logo.svg' | asset_url }}' alt='Store Logo'>
- Or inline SVG in theme: {% render 'icon-cart' %} with icon stored in snippets/
- For SVG snippets: Settings → Files → download SVG → paste in theme snippets
- Inline SVG in snippets is the most flexible approach — allows CSS control
SVG Logo in Shopify
Replace your store's PNG/JPG logo with SVG for crisp display on all screen densities.
- Go to Themes → Customize → Header section
- Upload your SVG logo (most modern Shopify themes support SVG)
- Or manually edit theme code: find logo <img> tag, change src to SVG URL
- Add width and height attributes to prevent layout shift (CLS)
SVG Product Icons and Badges
Use SVG badges, trust icons, and feature highlights in product pages for crisp rendering at any size.
- Upload badge SVGs to Files section
- Add to product template via Liquid: <img src='{{ 'badge-organic.svg' | asset_url }}'>
- For animated badges: inline the SVG and add CSS animation in your theme's CSS
- Trust badge plugins often provide SVG options — choose SVG format for quality
Frequently Asked Questions
Does Shopify support SVG for product images?
Shopify supports SVG in the Files section and theme assets. Product images (in the product catalog) should be PNG or JPG — product image processing doesn't fully support SVG.
Why isn't my SVG showing in the Shopify theme editor?
The theme editor may not preview SVG correctly. Check the live storefront instead. Ensure the SVG CDN URL is correct and the file was uploaded successfully.
Can I use animated SVG in Shopify?
Yes. Upload the SVG to Files, reference via CDN URL in an <img> tag (animations run). Or inline the SVG in a theme snippet for full CSS control over animations.
How do I use SVG icons instead of an icon font in Shopify themes?
Create SVG snippet files (snippets/icon-cart.liquid containing the SVG code). Reference with {% render 'icon-cart' %}. This is how modern Shopify themes (Dawn, etc.) handle icons.
Does SVG improve Shopify page speed scores?
Yes. SVG logos and icons are smaller than PNG equivalents and don't need separate @2x versions for Retina. This reduces page weight and improves LCP scores.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free