Imagine you could embed an image in a web page, scale that page to any size, and never lose image quality. Well, you can. It’s totally possible, we just haven’t been doing it as much as we should.
We live in the age of pixels. As designers & developers of the web, pixels can be both our friends and our enemies. We want everything to look nice and sharp for anyone who uses any of the websites we work on, but we need to keep file sizes down for performance. There is pretty much only one way to go with icons, logos and illustrations on the web — SVG. Scalable Vector Graphics can look crisp at all screen resolutions, can have super small file sizes, and can be easily edited and modified.
Fast, progressively-enhanced background images.
GitHub.com no longer delivers its icons via icon font. Instead, we’ve replaced all the Octicons throughout our codebase with SVG alternatives. While the changes are mostly under-the-hood, you’ll immediately feel the benefits of the SVG icons.
Going the extra mile designing for performance can shave vital seconds off of the page load of your site.
I think many of us are not using SVG to its full potential. I often see SVG used as an alternative image format or as a simple solution for icons, and whilst it’s great for these things, it’s also a lot more than that. SVG can solve problems that HTML and CSS alone can’t.
A journey into the world of m̶y̶s̶t̶i̶c̶i̶s̶m̶ ̶a̶n̶d̶ ̶m̶a̶g̶i̶c̶ JS’s requestAnimationFrame() and CSS transitions 🍀.