Re: SVGO... check out SVGOMG for a non node solution.

Really great post about SVG's. Isn't it a bad idea to include inline SVG code on every single page though, since it can't be cached? We use this method for SVG sprites instead. 1) Create SVG sprite as SVG file (not PHP) 2) Reference it as needed like this:

I've been trying to convince designers to provide me with SVG files for years. Or to at least give me clean AI or EPS files so I can convert them to SVG. I'm sending two of them a link to this article. Thanks for making the case for me!

Great post Lewis !

I wonder if someone still uses raster images for icons

I like SVG, but you should mention the security issues with SVG, eg:alert( 'Well, hello there!' );

Awesome article!

Google doesn't support using an SVG for a logo in structured data/schema markup. Only PNG, JPG, and GIFs. See https://developers.google.com/search/docs/data-types/logo

Advanyages of SVG in web design are evident! Some small images may be stored right in code. By the way there is one more archive of free icons here Icons For Free. There is a feature 'Find similar icons' - helps to find images if you do not know exactly what you want.

Great article! Using raster images on web is losing popularity everyday.

I was just using SVG for icons for a while, but then I realized a lot of the section backgrounds I'd been designing could be much smaller as SVG. Even styled hero section typography is great because it is soo crisp! ( Just be careful about SEO )

you should note that while your SVG animation file itself is 11kb, the lottie-player.js which is needed in order for it to play is around 300kb

I like lottie, but it does come with some overhead

I have to correct you in this article. "SVG files" (or "SVGs" as you have called them) is not the only way SVG can be used. It is not just an alternative to PNG/JPG/etc, and isn't even an image format. It is a document format capable to describing shapes/lines/text in a vector fashion. There is a usage termed "inline SVG" where it can be used within HTML documents to create graphical UIs. That usage (one example described at https://parallaxviewpoint.com/SVG-FTG/) is also considered to have less security risks that simple "SVG files" where embedded script and CSS may be unexpected.

I'm guessing the browser support section is out of date considering IE is end of life and it is probably referencing edge classic and not chromium edge?

I've had issues with SVGs (particularly logos) not playing well in Safari. They flash constantly, so I quit using them, as I couldn't figure out how to stop it.

I had a customer who's product owner and accessibility consultant were having an argument in Jira over customer logos that looked bad and they were unable to land on a resolution that worked for them. It was an ugly mess. When I suggested they use SVG, it became my ticket to implement. I was elated, as there was never any issues with this again. Since I was the Sr. UX Engineer, I took the opportunity to build-in icons into the design system buttons instead of a reliance on icon fonts. I believe the team carried on my work after my departure. Huge thumbs up on this post!