Use in-line SVG instead of font icons to reduce HTTP requests and improve page load speeds

In modern web development, icons are an important part of the user interface. WordPress sites often use font icons (such as Font Awesome) to display a variety of icons, but with the popularity of SVG, more and more developers are starting to use SVG instead of font icons?

• WordPress Dashicons ProjectIt has also stopped accepting icon requests, and the block editor is even using SVG directly to display icons.
• Elelmentor specifically adds the option to allow users to load icons as inline SVGs.
• We are also gradually replacing font icons with SVG when we custom develop themes or plugins.

In this article, we will analyze the advantages and disadvantages of both word map icons and SVG icons, and provide practical optimization suggestions.

How font icons work

A font icon is essentially a special font file that stores icons as font glyphs. When we use font icons, we are actually using these special font characters. For example:

This approach requires loading the entire font file:

@font-face {
    font-family: 'FontAwesome';
    src: url('fontawesome-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

How SVG works

SVG is an XML-based vector graphics format that can be inlined directly into HTML:

<svg viewBox="0 0 24 24" width="24" height="24">
    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>

Comparative Performance Analysis

1. Loading performance

Font Icons

• vantage::
  • Load once, use in multiple places
  • Browser caching works well
• drawbacks::
  • Additional HTTP requests required
  • Presence of FOIT/FOUT problems
  • The entire font file has to be loaded, even if only a few icons are used

SVG

• vantage::
  • Can be inlined without additional requests
  • Immediate rendering without delay
  • Load on Demand
• drawbacks::
  • If there is too much inlining, it will increase the HTML size
  • Each icon is a separate code snippet

2. Comparison of document sizes

Let's look at a specific example:

• Font Awesome Free (Web Fonts): about 150KB
• Single SVG icon: about 300 bytes to 1KB
• 10 inline SVG icons: approx. 3-10 KB

3. Rendering performance

SVG usually has better rendering performance because:

• Allows for better GPU acceleration
• Browsers don't need to parse and process font files
• Reduced burden on text rendering engine

Use SVG or font icons?

The choice of SVG or font icons needs to be weighed according to the specific scenario, and we use the number of icons within a page as a reference basis:

• For small sites (<10 icons), inline SVG is preferred
• For medium-sized sites (10-50 icons), consider using SVG Sprite
• For large sites (>50 icons), a mixed strategy is recommended