The Spectra is becoming an integral part of the Gutenberg editor and is loved by the community. It is already making us proud and at the same time increasing our responsibilities. We are committed to making it better every day. And so we are here with an exciting update.
In Spectra version 1.8.1 we are replacing font icons with SVG icons. This means that the icon library you see with Spectra blocks will now display SVG icons.
What is SVG?
- Today, SVGs are the new standard for web icons.
- Since vector graphics or SVGs are coded completely, they don’t have to be imported from large external files.
- They offer higher scaling and render more swiftly and reliably than font icons
- SVGs are also much smaller in size than the commonly used JPG or PNG files and also the most font icon libraries.
Why SVG? How does it work?
Using SVG will not make any visual change on the page but will load your page even faster!
Yes! Till now, Spectra blocks were using a font icon library. Therefore, even if a single icon is used, an entire library of around 1MB is loaded.
We have heard of conflicts occurring due to themes using a different version of Font Icon than that of the Ultimate Addons.
To overcome such issues, we have replaced Font Icons and added an entire library of SVG icons from the plugin itself. When an icon is selected within a Spectra block, only a necessary HTML structure will load which is very tiny.
So using SVG will remove about 1MB load from your page! Relieving! 🙂 Isn’t it?
The benefits of switching to an SVG icon system over font icons are numerous, like:
- Load only the SVG files you need rather than the entire library
- Loading necessary icons to reduce page load time
- They have a very small file size
- They look crisper on high-resolution displays
- They offer more design control
- They are predictable and performant
- As the icons will be inlined, there are no HTTP requests
To stay consistent with the current design, the icons will still be those selected before but will be inlined SVG instead of a font icon.
Important: If you have previously used icons within the Spectra blocks on a page, you will have to fetch newly added SVG icons with a simple process.
In the Closing …
We are continuously working to take the plugin to the next level and make sure it woos everyone like it is already doing. With this update, we are glad to be powering over 9000+ websites that will now load faster than before! ✌
Do let us know how light you feel with this improvement ? We would love to see feedback in the comments below. In case of query write to our amazing support team.
Cheers!
Disclosure: This blog may contain affiliate links. If you make a purchase through one of these links, we may receive a small commission. Read disclosure. Rest assured that we only recommend products that we have personally used and believe will add value to our readers. Thanks for your support!
Hi
I used to convert image file in jpg format to svg format. The file was converted with bigger file size. Why this is happened and how to avoid it??