When we talk about website optimisation, we often focus on reducing image sizes or minifying CSS and JS files, but the same attention should be given to SVGs. Large inline SVGs (we’re talking many paths, groups and defs nested) can be a silent killer of your site’s text-to-HTML ratio, impacting both user experience and web core vitals.
A low Text-to-HTML ratio suggests to search engines that your page is code-heavy, potentially affecting rankings. And from a user standpoint, bloated HTML leads to slower load and paint times that frustrate visitors.
So, how can you keep SVGs lightweight while retaining their visual quality? One of the best methods is using the <use> tag with external SVG files, which keeps your HTML code short while still allowing you to showcase detailed and complex vector graphics on your site.
Why Inline SVGs Can Be Problematic
When you include SVG graphics inline within your HTML code, it can quickly increase the page size, especially if these SVGs are complex or numerous. This extra code makes it harder for search engines to quickly find relevant textual content, affecting your page core vitals. Additionally, a large HTML document has a direct impact on load times, especially for users on slower internet connections. By reducing the amount of HTML dedicated to SVGs, this can improve load times and boost your SEO.
How to use the <use> tag
A great way to reduce inline SVG bloat is by using an SVG sprite sheet. SVG sprite sheets are simply collections of SVG graphics combined in a single file, with each graphic assigned a unique id. With a sprite sheet, you can call specific SVG graphics on your page without needing to add them inline each time. Here’s how it works:
1. Create a Sprite Sheet
Start by creating an SVG file containing all your SVG graphics, each with a unique id:
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon1" viewBox="0 0 100 100">
<!-- SVG paths go here -->
</symbol>
<symbol id="icon2" viewBox="0 0 100 100">
<!-- SVG paths go here -->
</symbol>
</svg>
2. Link to Specific Graphics with <use>
In your HTML, you can now link to specific symbols using a <use> tag:
<svg viewBox="0 0 100 100">
<use href="path/to/sprites.svg#icon1"></use>
</svg>
By doing this, you keep the heavy lifting outside your HTML, resulting in a much cleaner, smaller document.
P.s. You must declare xmlns="http://www.w3.org/2000/svg" within your SVG sprite file’s opening tag. Removing this will create parsing errors and discrepancies across different browsers and devices – or put simply, it won’t work without it.
Automating SVG Insertion with PHP
If you’re like me and prefer automated scripting magic, you can take this further with PHP. When building this website back in May 2024 to launch my new freelancing journey, I originally used <?php echo file_get_contents('path/to/inline.svg'); ?> which in hindsight, probably was a security issue.
I now use PHP to dynamically retrieve SVG dimensions and viewbox attributes. This allowed me to create placeholder SVG tags that perfectly mirror the dimensions of the originals, without embedding the SVG content itself.
Here’s a PHP function I use to extract the dimensions and view box values from an external SVG file:
function get_svg_dimensions($file) {
$svg_content = file_get_contents($file);
preg_match('/viewBox="(\d+\s\d+\s\d+\s\d+)"/', $svg_content, $viewBox);
preg_match('/width="(\d+)"/', $svg_content, $width);
preg_match('/height="(\d+)"/', $svg_content, $height);
return [
'viewBox' => $viewBox[1], // Returns '0 0 100 100'
'width' => $width[1], // Returns '100'
'height' => $height[1], // Returns '100'
];
}
And practically, it looks a little something like;
<?php
$values_array = get_svg_dimensions('path/to/file.svg');
?>
<svg viewBox="<?php $values_array[viewBox]; ?>">
<use href="path/to/file.svg#id"></use>
</svg>
This function takes a path to where the svg is stored on the server, uses file_get_contents() to load the file contents, and regex pattern matches to grab the viewBox, width, and height attributes. With these values in hand, I can generate a lightweight SVG tag that retains the correct aspect ratio and alignment, while keeping the SVG content external.
The Results: Improved Text-to-HTML Ratio and Performance Gains
Since implementing this method, I’ve seen dramatic improvements. On my own homepage, switching from inline SVGs to external SVGs linked with <use> tags dropped my HTML size from 15k characters to 9k, bumping my text-to-HTML ratio from 0.15 to 0.3. That’s a significant improvement, and it’s resulted in faster load times and a cleaner code base.
Final Thoughts
Using <use> to link to SVG sprite sheets is an effective, efficient way to keep your HTML lean without sacrificing visual quality. Not only does this improve your site’s performance, but it also makes it easier for search engines to focus on your content rather than getting bogged down by SVG tags, paths and code. And if you combine this with PHP scripting, you can automate the entire process and get the best of both worlds: a visually engaging, SEO-friendly website that loads fast.
If you’re keen to improve your site’s performance or just want to see the code in action, check out my SVG optimisation examples on my portfolio. Happy coding!
