Faster is better!
What a wholesome B R U H video
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?
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.
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
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)
It feels like you could test this in production if necessary
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.
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.
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.
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.
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)
How can we use system font icons in web app without including extra libraries/external svg
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.
You say font icons are bad (without good reasons) and then you compare SVG to PNG :/
For me a big disadvantage of SVG that you can't using SVG sprite from external domain because of CORS issues..
Your email address will not be published. Required fields are marked *
Save my name, email, and website in this browser for the next time I comment.