When we decided to establish a Funkhaus brick and mortar dedicated to programming in Ithaca, New York nearly two years ago, we were keenly aware of the burgeoning technology landscape within the upstate town.
Full of recent graduates and technology aficionados, there’s a creative spirit and innovative energy within Ithaca that continually works to inspire and invigorate our endeavors in technology. Looking to make a mark in the Ithaca tech community, our team of programmers regularly take part in Ithaca Web People’s Tuesday Tech Talk—a monthly meetup for tech professionals and enthusiasts that facilitates discussion in all things tech.
Having spent a significant amount of time exploring the world of SVGs and animation while at Funkhaus, Sander’s knowledge on the topic has led to some incredible innovation when it comes to our work. We were eager to hear more on the tech topic, so we went straight to the expert themself to break down the ABCs of SVGs.
First things first: what are SVGs?
SVGs (scalable vector graphics) are an image format like PNG or GIF. The difference is that PNGs, GIFs, JPGs, etc. are “raster images,” meaning they contain information for each individual pixel in the image, while SVGs are a set of instructions for a browser to draw an image itself. Raster images are like a paint-by-numbers set, while an SVG is more like a document outline.
Cool. So what are the pros and cons when it comes to raster images versus SVGs?
Raster images contain information about each individual pixel, so they offer tons of control for the final image result—but that comes with a cost: raster images are larger files (containing lots of data) and are much more rigid. SVGs, meanwhile, are much more flexible—for example, instead of mapping out every pixel in a circle, they say, “draw a circle with its center right in the middle of the draw area,” then let you define how big you want that draw area to be. An SVG that’s 10 pixels wide uses the exact same code as an SVG that’s 1920 pixels wide, and it creates the same reliable result no matter what.
What are some of the main takeaways you gathered (and shared!) when it comes to SVGs and animation?
First off, you don’t need to sacrifice quality for fast, accessible, and animated websites. Sites can look vibrant and exciting and still be useful to the largest number of people possible with tools already in place in web browsers (and without long loading times or heavy data usage). Additionally, all users deserve the best experience you can give them on a website, and SVGs check a lot of boxes for a lot of audiences. Users on fast or slow connections, old or new computers, and with varying levels of assistive technology will all be treated more equally with SVGs than with other web animation formats. Last but not least, SVGs are useful for more than just logos. A lot of companies use SVGs as logos and nothing else, but they’re a really useful tool for several different scenarios.
SVGs seem like a great tool to bring websites to life. How are we using them at Funkhaus?
SVGs and animation make our work pop! They’re the subtle little details that take a site from something good enough to something exciting. They make our sites fun to program and fun to share with others—I have such a blast wrapping up an animation and knowing that it’s something the client didn’t necessarily expect during the read-in, but feels natural as soon as you see it in motion.
Looking for more technology insight? Check out Sander’s slides from their presentation!