Menu
I have a couple of SVG backgrounds on a site. Their size are less than 50kb, however, they load slow, or also, they seem to load as last element on the website. Since they are on the header of the page, I don't want a blank space while the image loads. I have been trying to find an answer or a reason to why this happens and optimize the svgs but can't seem to find a solution. My backgrounds are for about 2-3 secs white and then the SVGs appears.
I'm loading the SVG inline in CSS
This is what I have on my html
<div class='header-main'>
<div class="header">
<hr></hr>
<h1 class="tagline">Some Text</h1>
</div>
</div>
and the CSS loading the SVG is:
.header-main {
background: url('{{ asset "/img/background-main.svg"}}');
}
521
SVG code is loaded faster because there is no need for an HTTP request to load in an image file. The time taken for SVG code is only rendering time. There can be numerous editing and animating opportunities for SVG code like you said.
Once the bloat is removed, the file size can decrease by a large amount, which speeds up your end user load speed, especially if you have lots of SVGs on a single page. This article will show you what to remove from your SVGs to stop them from slowing down your page and giving your end user a poor experience.
Use groups. Using groups to apply styles rather than applying styles to each path is a lossless optimisation that reduces file size (making the file faster to load), as well as improves render speed by allowing the web browser to better optimise drawing.
SVG is just XML markup, therefore it lends itself to compression without any issues. The benefits in terms of file reduction are significant. Appendix J of the SVG 1.1 Specification shows a comparison table between examples of uncompressed and compressed SVG files.
You could write the svg directly into the html. That would force it to be loaded along with the rest of the page.
107
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
