Web Performance Calendar

The speed geek's favorite time of year
2021 Edition
ABOUT THE AUTHOR
Erwin Hofman

Erwin Hofman (@blue2blond) started building his own CMS in 2004, which is now used by several Dutch web agencies. The CMS also became his playground to eventually help e-commerce agencies adopting and improving (perceived) performance, Core Web Vitals and accessibility.


A lot, maybe even too much has been written about icon loading strategies already. CSS-tricks.com already had a great (inline) SVG versus icon font comparison way back in 2014.

But here I am, in 2021, a frontend developer enthusiastic about performance and still using web fonts to show icons on my site. FontAwesome, to be precise. jQuery (or any other JS library) might have become technical debt over time and harder to move away from. But I’ll admit: that isn’t really the case with icons, right?

So here’s my side of the debate, including my migration plan.

Why I was still using icon fonts?

I had my reasons to still use icon fonts. First of all: convenience. Just embedding a CSS to show icons sure is convenient in multiple ways. I didn’t even want to spend a moment thinking about the time it would take to rename all icon elements across multiple templates.

But there were other reasons too:

  • Performance
    It’s not one file or strategy that will make or break your overall (perceived) performance. It’s often about how it is being used, instead of what you’re using.
  • Not render blocking
    A stylesheet embedding the font file(s) and containing the FontAwesome CSS classes can be render blocking. But sometimes I make sure to prevent it from being render blocking. Especially when fetched from public CDNs. Cache partition in browsers is another reason to be sure to not fetch them from public CDN’s.
  • Accessibility
    Unlike SVG’s, there is no way to add a title element to your icons. You could use aria-label though. But as I made sure that buttons were always accessible in other ways, this didn’t really felt like a big issue in my cases.
    I’m obviously forgetting about users overriding CSS for better readability. And I do felt guilty about this argument.
  • Browser caching
    The FontAwesome icon font always is the biggest individual font file on any of my sites. But we’ve got browser caching, right? I actually made sure to implement other pagespeed best practices to keep the amount of kilobytes low. That’s what I kept telling myself.
  • Slow internet
    But it’s still 76kb (FontAwesome 4.7.0 woff2 file), not ideal on a slow internet connection. So I came up with a solution in case someone enabled saveData/liteMode in their browser settings, or if anything below 4G was detected. Although this felt more ethical, it became a cumbersome solution over time, increasing maintainability.

Alternatives

First of all, I didn’t feel like upgrading FontAwesome, as it introduced additional files and thus requests. But always using and seeing the same icons started to become a bit boring. And despite sticking to my guns, I was aware of alternatives.

But the alternatives such as using JavaScript or inlined SVG’s didn’t feel much better. I questioned a setup of introducing additional JavaScript to do something trivial as showing icons on my site. I sometimes see websites where FontAwesome is moved over to JSON objects in JS files, instead of stylesheets. That isn’t better at all. Especially as nowadays the amount of main thread work often is more of a performance bottleneck then the amount of kilobytes served.

So, SVG to the rescue, right? Well, that depends on how many visitors are still using Internet Explorer. To prevent increased document size and maybe even chunked HTML, I did not feel like inlining SVG’s. But if you wanted to use external SVG’s, a browser compatibility fix was needed.

By the way, the FontAwesome v6 docs actually have a page describing different icon loading strategies and their impact on performance.

What changed my mind?

I wouldn’t be writing this post if I didn’t change my mind. I worked on a project where we used a different icon library. Still icon fonts, but seeing a different set of fonts instantly triggered a FontAwesome-fatigue. And you could even download the icons of the other icon library in basically any format.

1100+ pixel perfect icons also available as, .sketch, .fig, .studio, .xd, .iconjar, .ai, .svg, .png, .pdf, .woff, .ttf
‘The icon of’ is an icon library that comes in different file formats.

Combine this with a website that I was building with the same boilerplate as my own site, but expecting (more) 3G visitors. Time for a change.

Let’s migrate

The above were ingredients to trigger a feeling that we sometimes have as developers: it shouldn’t be too hard to come up with a straightforward solution without having to change too much within the stack and without using third-party dependencies. I wouldn’t dodge the customization bullet as I had some specific challenges, so I didn’t expect to save any time trying to implement third-party solutions.

Migration challenges

My (and most likely any) situation came with the following challenges:

  • As mentioned before: naming convention. Each library will use different names and naming conventions for icons.
  • The CMS that is used allows content managers to add icons via the FontAwesome plugin. So I would also have to consider user generated content.
  • I wanted to come up with an external SVG containing all possibly needed icons across different pages to reduce the amount of requests and to benefit from browser caching. It would already involve less unused fonts than embedding a whole icon font.
  • Something I found out after migrating: Instead of always using an element with FontAwesome classes, I sometimes used the :before pseudoclass in my custom CSS to display icons. You could say this was my icon font-related technical debt as I didn’t always use FontAwesome the way it was meant to be used.

The technical part

As the website already used some icons, I had to search for the equivalent SVG’s in my newly used icon library. I renamed them manually to match FontAwesome’s naming convention. The SVG itself could look like the following:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>add</title><path d="M19,11.5v1a.5.5,0,0,1-.5.5H13v5.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V13H5.5a.5.5,0,0,1-.5-.5v-1a.5.5,0,0,1,.5-.5H11V5.5a.5.5,0,0,1,.5-.5h1a.5.5,0,0,1,.5.5V11h5.5A.5.5,0,0,1,19,11.5Z"/></svg>

With this as a starting point, I had to remove the id attribute and transform it into a symbol-element to be able to embed it into a SVG sprite. I ended up using PHP’s DOMDocument.

And now that I had a sprite SVG, I could use the use element, like this:

<use xlink:href="/svg/sprite.svg#add"></use>

But I also wanted a server side rendered solution, instead of using JavaScript to swap FontAwesome placeholders into this HTML setup. So I used PHP to do this for me before a server side cache is created:

preg_match_all('|(<span[^>]*class="([^"]*fa-[^"]*)"[^>]*>)([^<]*)</span>|', $html, $icons, PREG_SET_ORDER);
$iconsLooped  = [];
foreach ( $icons as $icon ) 
{
  /**
   * 0 = matched HTML  that we want to replace
   * 1 = opening span element (ignore)
   * 2 = class list we'll use to filter the icon name
   * 3 = contents within the FA element (ignore as it should be empty anyway)
  **/

  // no need to try to transform already transformed icons
  if ( isset($iconsLooped[ $icon[0] ]) ) {
    continue;
  }

  // get rid of FA's fixed-width class first
  $iconClasses  = explode(' ', str_replace('fa-fw', null, $icon[2]) );
  $iconClass    = null;
  foreach ( array_map('trim', $iconClasses ) as $tmpClass ) {
    if ( strpos($tmpClass, 'fa-') === 0 ) {
      $iconClass = substr( $tmpClass, 3 );
      break 1;
    }
  }
  
  if ( $iconClass ) {
    $iconsLooped[ $icon[0] ] = 1;
    $iconHtml  = str_replace('</span>', '<svg><use xlink:href="/svg/sprite.svg#' . $iconClass . '"></use></svg></span>', $icon[0]);
    $html   = str_replace( $icon[0], $iconHtml, $html );
  }
}

This would result in the following HTML for an individual icon:

<span class="fa fa-fw fa-add"><svg><use xlink:href="/svg/sprite.svg#add"></use></svg></span>

The advantage of this solution is that it would also transform icons inserted by CMS users (user generated content). And keeping the parent FontAwesome wrapper element enabled me to do additional styling and aligning on top of the icon itself as well as JavaScript mutations (see below).

I know you would normally want to do this using DomDocument, but that’s another discussion and not faster by the way 😉 (yes, I tested this).

The JavaScript

I would still have to use JavaScript, because new elements could be introduced by CMS users. Although the HTML was transformed already, it’s possible that some icons aren’t part of our SVG sprite yet. So I came up with the following JavaScript (jQuery syntax) to then fetch the individual icons:

$.ajax({url:'/svg/sprite.svg', dataType: 'html', cache: true, success: function (data) 
{  
  let isIE = navigator.userAgent.indexOf("MSIE ") > -1 || navigator.userAgent.indexOf("Trident/") > -1,
    spriteSvg = $( data ),
    iconsFa = $('.fa'),
    iconsLooped = {};
    
  for ( let i = 0; i < iconsFa.length; i++ ) 
  {
    let iconName = ( iconsFa[i].getAttribute('class').replace('fa-fw','').match(/(^|\s)fa-\S+/g) || [])[0].trim().substr(3);
    if ( iconName in iconsLooped ) {
      continue;
    }
    
    iconsLooped[ iconName ] = 1;
    let spriteIcon = spriteSvg.find('symbol[id="' + iconName + '"]');
    if ( spriteIcon.length == 0 ) {
      $.ajax({url:'/svg/' + iconName + '.svg', dataType: 'html', cache: true, success: function(data) {
        $('.fa-' + iconName ).html( data );          
      }});
    }
    else if ( isIE ) {
      // fetch from sprite
      let faHtml = isIE ? '<svg role="img" viewBox="0 0 24 24">' + spriteIcon.html() + '</svg>': 
        '<svg><use xlink:href="sprite.svg#' + iconName + '"></use></svg>';
      $('.fa-' + iconName).html( faHtml );
    }
  }
}});

This piece of JavaScript is doing the following:

  1. fetch the sprite.svg (by this time, it should already be in the browser cache due to the server side rendered svg use);
  2. loop all icons on the current page using the FontAwesome syntax;
  3. get the actual classname;
  4. check if the icon is in the sprite;
  5. if not, then fetch the individual SVG file and write the SVG icon contents into the FontAwesome wrapper;
  6. otherwise, if you still want IE support, then grab the SVG icon from the already fetched sprite, and insert it into the FontAwesome wrapper. This prevented me from having to use the mentioned browser compatibility library.

All icons that are in the sprite already, are already picked up by the browser.

You could choose to preload of prefetch this file to allow the browser to put it in the cache before this piece of JavaScript needs it. However, as I don’t consider icons to be as critical as my LCP candidate or the text itself, I choose to not do this.

The icon build proces

I wanted to come up with a solution that would automate this as much as possible, instead of baking this into my build proces. Especially as we still have to consider icons inserted by CMS users, there is no way of making this a task of the build process

So, I created the following .htaccess in my svg directory:

RewriteCond %{REQUEST_URI} !^/svg/sprite.svg$ [NC]
RewriteRule .+ index.php [L]

As a result, any request to an SVG file, expect for the sprite file itself, would result in being processed by the index.php in the same directory. I then made this index.php responsible for picking the right SVG file belonging to the request path:

$iconPath = '/upload/svg/'; // see 'Additional thoughts'
$uri 	= $_SERVER['REQUEST_URI'];
$path	= pathinfo( $uri );
$basename = preg_replace('/[^[:alnum:]-]/', '', $path['filename'] );
$filename = $iconPath . $basename . '.svg';

Next, the contents of the file would be returned and would also be added to the SVG sprite for the next visitor. Using PHP’s DOMDocument I remove any fill or other redundant attributes to be able to override them using CSS. For example on mouseover or focus states.

In this proces, I also remove the title element because accessibility is dealt with in a different way already (and using multiple title elements on a page can still result in weird title concatenation when sharing such pages using social media platforms).

I actually add the role="img" attribute and add an id attribute to be able to identify the icon in the JavaScript snippet.

When it comes to visitors, both the prior SVG sprite version as well as the individual SVG files are then cached in the browser. So there also is no real performance penalty here as this PHP step is only performed the first time.

Aligning the icons

Aligning SVG icons with your text is totally different challenge. I obviously did some homework here, but already experienced it will be different per site, depending on the body font being used.

I ended up using the following CSS:

.fa {
    box-sizing: content-box;
    min-width: 1.1em;
    display: inline-block;
}
.fa svg {
    width: 1.1em;
    height: 1.1em;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    fill: currentColor;
}

But on my own site, I had to add top: -0.1em; to .fa svg to better align it with the text.

Migration outcome

Although most users wouldn’t even notice any performance win or real visual change, it felt way cleaner already. Instead of a 76kb woff2 file, it’s now a 23kb SVG file as the amount of unused icons got reduced massively. Moreover, I’m able to ditch the whole CSS file that was needed in combination with the icon font files.

It also became way easier to introduce new icons as its just another SVG icon file that has to be added. And when wanting to switch to inlined SVG’s in case the SVG sprite becomes to big, I only need to change the strategy to inlined SVG’s while keeping the styling and HTML markup.

Additional thoughts

There are some other things I considered (and implemented) as well. For example, the index.php file will actually grab the individual icons from a totally different directory. A directory that can be accessed via the CkEditor within the CMS. This way, if a specific icon is missing, CMS users are able to upload new icons themselves. Or even replace icons.

Obviously, completely new icons that aren’t part of the CkEditor FontAwesome plugin, can’t be selected by CMS users. They would actually have to edit the HTML itself within the editor.

There is also the chance of using icons on very obscure pages. When individual SVG’s weren’t uploaded, no icon will be shown at all. I came up with a file_exists check. If an individual SVG doesn’t exist, then an SVG cross icon is returned while also logging the icon name to a 404 log. This way, I know if I missed some icons.

You might also want to set the cache duration of icons. For example if you want to use a totally different icon library in the future. Or maybe changing the SVG structure. I’m using .htaccess to set the cache duration for the sprite file and PHP to set the caching duration for the individual files.

Proof of concept

Although already implemented in a few sites, including my own, I still consider this a proof of concept. So if anyone has additional thoughts to improve frontend or backend performance, don’t mind sharing them!

26 Responses to “From fonts to SVG: an icon migration strategy”

  1. Tim Vereecke

    Have you considered creating a custom smaller FontAwesome font? Eg. I use fontello.com and have 6.6KB woff 2 file and a considerably smaller CSS?

  2. 7 Fresh Links on Performance For March 2022 - Codytechs

    […] From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the <use> technique. Five years later, I’m still a big fan of just dunking the <svg> in the HTML where you need them. It’s just an HTML partial like any other. […]

  3. 7 Fresh Links on Performance For March 2022 | CSS-Tricks - DZTECHNO

    […] From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the <use> technique. Five years later, I’m still a big fan of just dunking the <svg> in the HTML where you need them. It’s just an HTML partial like any other. […]

  4. 7 Fresh Links on Performance For March 2022 - underskore

    […] From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the <use> technique. Five years later, I’m still a big fan of just dunking the <svg> in the HTML where you need them. It’s just an HTML partial like any other. […]

  5. 7 Contemporary Hyperlinks on Efficiency For March 2022 | Marketing Solution Australia

    […] From fonts to SVG: an icon migration technique— Erwin Hofman notes that he was utilizing icon fonts out of sheer comfort, however that there are a great deal of causes to not use them. He supplies particulars on his new technique for utilizing icons, which is predicated on the <use> approach. 5 years later, I’m nonetheless a giant fan of simply dunking the <svg> within the HTML the place you want them. It’s simply an HTML partial like some other. Subsequent.js Efficiency: Making a Quick Framework Even Quicker— Ben Schwarz says that Subsequent.js is already a fairly quick framework in that it does good issues that hold even React powered pages snappy. However efficiency isn’t one thing that may be left solely to a framework. You must do work. Luckily, Subsequent.js has some fairly useful helpers for issues like dynamically (lazily) loading parts, deferring scripts, optimizing pictures, and extra.Redirect Liquidation— Tim Vereecke covers an enchanting approach the place as an alternative of redirecting an previous URL to a brand new URL, you let the previous URL load, dynamically load the brand new content material, then historical past.replaceState the previous URL with the brand new URL. It’s quicker, however simply don’t do it for bots. Performant A/B Testing with Cloudflare Employees— Philip Walton covers how A/B testing is a little bit trickier on static websites than server-backed websites, however you may pull it off (performantly) because of Cloudflare Employees which might manipulate HTML earlier than it hits the browser, very similar to a Service Employee besides on the edge slightly than on the shopper. Save a cookie and you’ll keep customers of their correct teams.A Unified Idea of Internet Efficiency— Alex Russell tries to reply Tanner Hodges’ name for really defining internet efficiency. It’s a kind of issues that appears apparent (prefer it’s clear when sure issues assist and damage internet efficiency) however really defining it’s difficult. And never simply defining it by way of particular metrics (even that’s difficult), however reply questions like: What are this self-discipline’s guiding rules? What does it seem like to observe internet efficiency? How can we do it?Unveiling the brand new WebPageTest UI— I completely love seeing WebPageTest’s design evolve and enhance. It’s a kind of merchandise that’s clearly a best-in-class instrument for efficiency practitioners, but had a prettttty gnarly design for lots of years. That is method higher. It’s like when Google Fonts lastly acquired a redesign and the broad group let loose a collective exhale of appreciation.Caching Header Greatest Practices— Simon Hearne’s dissertation on Cache headers. Once I first began caring about internet efficiency, this was, like, the most important factor. If you happen to incorrectly ship Cache headers, customers may be re-downloading a file time and again unnecessarily after they don’t have to, which is concerning the worst factor attainable. I’m glad to see headers hold getting consideration and re-imagined as the net evolves. […]

  6. 7 Fresh Links on Performance For March 2022Chris Coyier (3 March 2022) - Tavarro Magazine

    […] From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the <use> technique. Five years later, I’m still a big fan of just dunking the <svg> in the HTML where you need them. It’s just an HTML partial like any other. Next.js Performance: Making a Fast Framework Even Faster— Ben Schwarz says that Next.js is already a pretty fast framework in that it does smart things that keep even React powered pages snappy. But performance isn’t something that can be left entirely to a framework. You have to do work. Fortunately, Next.js has some pretty handy helpers for things like dynamically (lazily) loading components, deferring scripts, optimizing images, and more.Redirect Liquidation— Tim Vereecke covers a fascinating technique where instead of redirecting an old URL to a new URL, you let the old URL load, dynamically load the new content, then history.replaceState the old URL with the new URL. It’s faster, but just don’t do it for bots. Performant A/B Testing with Cloudflare Workers— Philip Walton covers how A/B testing is a little trickier on static sites than server-backed sites, but you can pull it off (performantly) thanks to Cloudflare Workers which can manipulate HTML before it hits the browser, much like a Service Worker except at the edge rather than at the client. Save a cookie and you can maintain users in their proper groups.A Unified Theory of Web Performance— Alex Russell tries to answer Tanner Hodges’ call for actually defining web performance. It’s one of those things that seems obvious (like it’s clear when certain things help and hurt web performance) but actually defining it is tricky. And not just defining it in terms of specific metrics (even that is tricky), but answer questions like: What are this discipline’s guiding principles? What does it look like to practice web performance? How do we do it?Unveiling the new WebPageTest UI— I absolutely love seeing WebPageTest’s design evolve and improve. It’s one of those products that’s clearly a best-in-class tool for performance practitioners, yet had a prettttty gnarly design for a lot of years. This is way better. It’s like when Google Fonts finally got a redesign and the broad community let out a collective exhale of appreciation.Caching Header Best Practices— Simon Hearne’s dissertation on Cache headers. When I first started caring about web performance, this was, like, the main thing. If you incorrectly send Cache headers, users might be re-downloading a file over and over unnecessarily when they don’t need to, which is about the worst thing possible. I’m glad to see headers keep getting attention and re-imagined as the web evolves. […]

  7. 7 Fresh Links on Performance For March 2022 -

    […] From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the <use> technique. Five years later, I’m still a big fan of just dunking the <svg> in the HTML where you need them. It’s just an HTML partial like any other. Next.js Performance: Making a Fast Framework Even Faster— Ben Schwarz says that Next.js is already a pretty fast framework in that it does smart things that keep even React powered pages snappy. But performance isn’t something that can be left entirely to a framework. You have to do work. Fortunately, Next.js has some pretty handy helpers for things like dynamically (lazily) loading components, deferring scripts, optimizing images, and more.Redirect Liquidation— Tim Vereecke covers a fascinating technique where instead of redirecting an old URL to a new URL, you let the old URL load, dynamically load the new content, then history.replaceState the old URL with the new URL. It’s faster, but just don’t do it for bots. Performant A/B Testing with Cloudflare Workers— Philip Walton covers how A/B testing is a little trickier on static sites than server-backed sites, but you can pull it off (performantly) thanks to Cloudflare Workers which can manipulate HTML before it hits the browser, much like a Service Worker except at the edge rather than at the client. Save a cookie and you can maintain users in their proper groups.A Unified Theory of Web Performance— Alex Russell tries to answer Tanner Hodges’ call for actually defining web performance. It’s one of those things that seems obvious (like it’s clear when certain things help and hurt web performance) but actually defining it is tricky. And not just defining it in terms of specific metrics (even that is tricky), but answer questions like: What are this discipline’s guiding principles? What does it look like to practice web performance? How do we do it?Unveiling the new WebPageTest UI— I absolutely love seeing WebPageTest’s design evolve and improve. It’s one of those products that’s clearly a best-in-class tool for performance practitioners, yet had a prettttty gnarly design for a lot of years. This is way better. It’s like when Google Fonts finally got a redesign and the broad community let out a collective exhale of appreciation.Caching Header Best Practices— Simon Hearne’s dissertation on Cache headers. When I first started caring about web performance, this was, like, the main thing. If you incorrectly send Cache headers, users might be re-downloading a file over and over unnecessarily when they don’t need to, which is about the worst thing possible. I’m glad to see headers keep getting attention and re-imagined as the web evolves. […]

  8. 7 Fresh Links on Performance For March 2022 - T-Grafix Graphic / Web Design

    […] From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the <use> technique. Five years later, I’m still a big fan of just dunking the <svg> in the HTML where you need them. It’s just an HTML partial like any other. Next.js Performance: Making a Fast Framework Even Faster— Ben Schwarz says that Next.js is already a pretty fast framework in that it does smart things that keep even React powered pages snappy. But performance isn’t something that can be left entirely to a framework. You have to do work. Fortunately, Next.js has some pretty handy helpers for things like dynamically (lazily) loading components, deferring scripts, optimizing images, and more.Redirect Liquidation— Tim Vereecke covers a fascinating technique where instead of redirecting an old URL to a new URL, you let the old URL load, dynamically load the new content, then history.replaceState the old URL with the new URL. It’s faster, but just don’t do it for bots. Performant A/B Testing with Cloudflare Workers— Philip Walton covers how A/B testing is a little trickier on static sites than server-backed sites, but you can pull it off (performantly) thanks to Cloudflare Workers which can manipulate HTML before it hits the browser, much like a Service Worker except at the edge rather than at the client. Save a cookie and you can maintain users in their proper groups.A Unified Theory of Web Performance— Alex Russell tries to answer Tanner Hodges’ call for actually defining web performance. It’s one of those things that seems obvious (like it’s clear when certain things help and hurt web performance) but actually defining it is tricky. And not just defining it in terms of specific metrics (even that is tricky), but answer questions like: What are this discipline’s guiding principles? What does it look like to practice web performance? How do we do it?Unveiling the new WebPageTest UI— I absolutely love seeing WebPageTest’s design evolve and improve. It’s one of those products that’s clearly a best-in-class tool for performance practitioners, yet had a prettttty gnarly design for a lot of years. This is way better. It’s like when Google Fonts finally got a redesign and the broad community let out a collective exhale of appreciation.Caching Header Best Practices— Simon Hearne’s dissertation on Cache headers. When I first started caring about web performance, this was, like, the main thing. If you incorrectly send Cache headers, users might be re-downloading a file over and over unnecessarily when they don’t need to, which is about the worst thing possible. I’m glad to see headers keep getting attention and re-imagined as the web evolves. […]

  9. 7 Fresh Links on Performance For March 2022 - Perfect Web Designs

    […] From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the <use> technique. Five years later, I’m still a big fan of just dunking the <svg> in the HTML where you need them. It’s just an HTML partial like any other. […]

  10. 7 Fresh Links on Performance For March 2022 - My Blog

    […] From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the technique. Five years later, I’m still a big fan of just dunking the in the HTML where you need them. It’s just an HTML partial like any other. […]

  11. 7 Fresh Links on Performance For March 2022 - 67nj

    […] From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the <use> technique. Five years later, I’m still a big fan of just dunking the <svg> in the HTML where you need them. It’s just an HTML partial like any other. […]

  12. 7 Fresh Links on Performance For March 2022 | CSS-Tricks - CSS-Tricks

    […] From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the <use> technique. Five years later, I’m still a big fan of just dunking the <svg> in the HTML where you need them. It’s just an HTML partial like any other. […]

  13. 7 nuevos enlaces de rendimiento para marzo de 2022 trucos CSS - Aprender Marketing

    […] De las fuentes a SVG: una estrategia de migración de iconos– Erwin Hoffman señala que usó fuentes para íconos por pura conveniencia, pero que hay muchas razones para no usarlas. Proporciona detalles de su nueva estrategia basada en íconos basada en <use> técnica Cinco años después, sigo siendo un gran fanático de la inmersión simple <svg> en HTML donde los necesite. Es solo HTML parcial como cualquier otro. […]

  14. 7 Fresh Links on Performance For March 2022 | CSS-Tricks – Tech News House

    […] From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the <use> technique. Five years later, I’m still a big fan of just dunking the <svg> in the HTML where you need them. It’s just an HTML partial like any other. […]

  15. Tommy Nilsson

    svg might use a few less kilobytes but it is more cpu/gpu intensive which will drain users batteries faster.

  16. 7 Fresh Links on Performance For March 2022 - IMoneyHub.com

    […] From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the <use> technique. Five years later, I’m still a big fan of just dunking the <svg> in the HTML where you need them. It’s just an HTML partial like any other. […]

  17. 7 Fresh Links on Performance For March 2022 | CSS-Tricks - Web Design

    […] From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the <use> technique. Five years later, I’m still a big fan of just dunking the <svg> in the HTML where you need them. It’s just an HTML partial like any other. […]

  18. Erwin Hofman

    Hi Tommy,

    Are you maybe talking about animating SVG’s?(https://fjorgedigital.com/insights/blog/can-svg-animations-use-less-cpu/)

    If not, happy to see/read any articles on this!

  19. 7 Fresh Links on Performance For March 2022 | CSS-Tricks - My Blog

    […] From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the <use> technique. Five years later, I’m still a big fan of just dunking the <svg> in the HTML where you need them. It’s just an HTML partial like any other. […]

  20. 7 Fresh Links on Performance For March 2022 - Artificial Intelligence & Blockchain Base Advertising Agency

    […] From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the <use> technique. Five years later, I’m still a big fan of just dunking the <svg> in the HTML where you need them. It’s just an HTML partial like any other. […]

  21. 7 Fresh Links on Performance For March 2022 | CSS-Tricks – M-SoftTech

    […] From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the <use> technique. Five years later, I’m still a big fan of just dunking the <svg> in the HTML where you need them. It’s just an HTML partial like any other. […]

  22. 7 Fresh Links on Performance For March 2022 | CSS-Tricks – vcodepedia

    […] From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the <use> technique. Five years later, I’m still a big fan of just dunking the <svg> in the HTML where you need them. It’s just an HTML partial like any other. […]

  23. 7 Link-uri noi despre performanță pentru martie 2022 | CSS-Trucuri - OnlineEverDay.ro

    […] De la fonturi la SVG: o strategie de migrare a pictogramelor— Erwin Hofman observă că folosea fonturi de pictograme din pură comoditate, dar că există o mulÈ›ime de motive pentru a nu le folosi. El oferă detalii despre noua sa strategie de utilizare a pictogramelor, care se bazează pe <use> tehnică. Cinci ani mai târziu, sunt încă un mare fan doar scufundarea <svg> în HTML unde ai nevoie de ele. Este doar un HTML parÈ›ial ca oricare altul. […]

  24. 7 Fresh Links on Performance For March 2022 | CSS-Tricks - Website How To

    […] From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the <use> technique. Five years later, I’m still a big fan of just dunking the <svg> in the HTML where you need them. It’s just an HTML partial like any other. […]

  25. 7 Fresh Links on Performance For March 2022 | CSS-Tricks - StoneLinks

    […] From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the <use> technique. Five years later, I’m still a big fan of just dunking the <svg> in the HTML where you need them. It’s just an HTML partial like any other. […]

  26. 7 Fresh Links on Performance For March 2022 – Coder's Jungle

    […] From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the <use> technique. Five years later, I’m still a big fan of just dunking the <svg> in the HTML where you need them. It’s just an HTML partial like any other. […]

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
And here's a tool to convert HTML entities