Optimize SVGs

Why Do You Need to Optimize SVG Files?

Faster Webflow website loading time is one of the biggest SVG optimization benefits, that can positively affect your Core Web Vitals scores.

This means that optimizing your SVGs can improve your user experience, which can result in lower bounce rates and higher conversion rates. 

And this can send positive user interaction signals to search engines.

Image compression and asset optimization is an important technical SEO practice that makes sure that your Webflow website:

• Loads faster on desktop and mobile devices
• Can be crawled and indexed faster

How to Minify SVG Files?

Because SVGs are basically XML code snippets on your website, you will need to minify SVG code to make your SVG file smaller.

The best way to do that is to use an SVG compressor.

You can use the one we linked above or look for similar tools that can either compress your SVG images online.

Also, there are open-source software options that you can use directly on your device.

How Small Should Your SVG Files Be?

There is no right or wrong answer to when SVG is too big for the web. 

If you can make your SVG file size smaller, do it. 

After all, it’s a scalable vector and will not lose any quality during the compression process.

Remember that thousands of people might load that SVG on their mobile on desktop devices each day. So every KB saved counts!

Inline SVG (embed) vs. SVG as Image

Wondering when you should use inline SVG or SVG as image file?

Inline SVGs - Embeds

Inline SVGs load with the document, but they add more nodes to the HTML file. Which is usually not an issue unless you're overdoing it. 

Inline SVG (Embed) Pros

The pros for inline SVGs is that you can style them with CSS, and JS, and that no additional HTTP requests are required. 

Inline SVG (Embed) Cons

Your DOM size will increase, also there’s no caching.

SVG as Image

You can also use SVG as an image instead of embedding it on your Webflow website.

There are upsides and downsides to doing that.

SVGs as Image Pros

Biggest upside for using SVGs as images is cleaner markup.

Using SVG as an image can make your HTML “simpler”, especially if the SVG has a lot of paths and shapes.

Also there’s caching benefits! 

Browsers can cache SVG images, so if you use the same SVG in multiple places or on different pages, it will be loaded faster.

SVGs as Image Cons

Biggest downside of using SVG image files in Webflow is the limited styling options you have.

Also, each SVG used as an image will trigger additional HTTP requests, so having too many on one page is probably not the best idea.

When should I use SVG embed or SVG image?

Use inline SVG embed for:

• Interactivity control
• dynamic styling needs
• or when used uniquely on a single page.

Use SVG as an image for:

• repeated usage across multiple pages 
• If you need cleaner or more optimized code, 
• or when no dynamic (custom code) adjustments are needed 

Note that if you use SVGs in an img tag, you should still use fetch priority attributes, and lazy or eager loading depending on where on the page the image is located. You can learn more about it in our Webflow image optimization guide.