January 29, 2020 19

Optimise page load time: icon font or SVG?

Optimise page load time: icon font or SVG?

19 Replies to “Optimise page load time: icon font or SVG?”

  • Emil Jørgensen says:

    Faster is better!

  • SilenceStabber says:

    Good video

  • Максим Чех says:

    What a wholesome B R U H video

  • Ayyash Ayyash says:

    I don't understand though, how is this better maintenance than icon fonts? What if i want to adjust a single icon across the site? And what about caching?

  • randall huamani says:

    This video felt kinda biased in favor of SVGs, and even when I love working with SVG, there are so many things you can do with icon fonts, but you know, when used properly, so rather than presenting SVGs as a better alternative to icon fonts, the focus should be in presenting good implementations of each one.

  • Mr Sarkar says:

    svg has huge problem with styling, but icon fonts are very easy with css, yaa it has some downside, but for now I will stick with icon font

  • Koray Tuğberk GÜBÜR says:

    Thank you!

  • Nitin Kumar says:

    https://iconify.design/ is a great resource for icon: script size 7KB GZIPPED, ICONS CACHING, Over 40,000 Icons from different libraries and also All EMOJIS with Latest Version (in SVG format)

  • Taylor Murphy says:

    It feels like you could test this in production if necessary

  • robrez says:

    Svgs are waaaaaaay better for styling… You can style stroke, fill, states, etc. Several implementations in the web component space even allow tree shaking/bundling.

  • Nick van Zwol says:

    The big problem with SVG's are that if you don't load them inline and you want to include them and change the color based on their context, you are not able to do that. That's is a big functional difference, it's only beneficial if you have your theme (colors etc..), UI components and HTML in the same source, like you have with React/Angular so you can manipulate the SVG's on the fly.

  • Jean Ceugniet says:

    1:54 : 'inline svgs don't need to be downloaded'. They don't need to be downloaded AS A SEPARATE FILE, which is hugely different. It is absurd to assert that a resource deosn't need to be downloaded. If you don't have it locally, of course it will need to be downloaded, one way or another. In this case, it's downloaded as part of the page html.
    1:58 : "and reduced the page weight as well". NO, THIS IS UTTERLY FALSE ! You've reduced the weight of the images linked to the page, you've added the weight of the svg source code the the one of the html source code : it's a transfer, not a magic disappearing.
    And you did not even talk about the fast that inline, in any dynamic content page (which is almost anything today), means NOT CACHEABLE !
    The lack of precision in this video is disappointing, to say the least.

  • Ojasvi Singh 786 says:


  • voidmind says:

    Correct me if I'm wrong but icon fonts can be styled with css color, drop shadows and every other CSS style that normal fonts cabget styled with. I never heard that an SVG icon getting a different color from CSS color. I'd love to be wrong though.

  • Colin Richardson says:

    We have our icons in a icon file. When someone goes to the Icon picker, it loads 1 file (which is cached).
    Please, explain to me how loading 150 icon SVGs in this situation would be better? (We don't have HTTP/2)

  • vivek gautam says:

    How can we use system font icons in web app without including extra libraries/external svg

  • aniran goncalves says:

    This video completely fails at pointing the fact that SVG's are lighter on network transfer but heavier on CPU. By using SVG's all along your website responsiveness on older smartphones will be terrible.

  • Vahid Mohammadi says:

    You say font icons are bad (without good reasons) and then you compare SVG to PNG :/

  • Wapweb s says:

    For me a big disadvantage of SVG that you can't using SVG sprite from external domain because of CORS issues..

Leave a Reply

Your email address will not be published. Required fields are marked *

© Copyright 2019. Amrab Angladeshi. Designed by Space-Themes.com.