Since the dawn of the web, it has been a technological platform in constant flux. When the first websites began emerging, simply having a .com was enough for a company to establish presence within the tech realm. As the web’s capabilities grew, so did the standards that came along with having an online presence. It became important to have a cool website. It became about how far the boundaries of innovation and interaction could be pushed. Flash, Web 2.0, skeuomorphic design, flat design, HTML5 canvas, WebGL, parallax… Ring any bells?
Fast forward to today. We now find ourselves in a world where our websites are no longer just brochures. They’re a pillar of business. We rely on these meticulously crafted platforms to generate leads and provide insights about our customers. Without them, our business would be in trouble.
But just because the needs of a modern website rely on business-driven requirements does not mean that fidelity of a web experience needs to take a back seat. On the contrary, there are countless opportunities to reinforce the strategy that drives your web presence with a slick experience — it just requires a smart approach.
Experience Without Sacrifice
Animation, dynamic interactions, and other highly-functional experiences are too often associated with a large price tag.
Indeed, orchestrating a digital team to ideate and execute a high-fidelity experience can be a substantial budget-suck. Creating assets, troubleshooting unforeseen edge-cases, and optimizing for performance across a spectrum of screen-sizes and devices can be time-consuming.
These are what we consider to be the pitfalls of fidelity. And while there’s no silver bullet, we’ve found that the majority of our problems can be solved with three letters. S, V, and G.
Scalable Vector Graphics
In the interest of sparing you a long-winded history lesson, all you need to know is that SVGs (scalable vector graphics) are a lightweight, non-raster graphic format.
Your organization’s logo exists in an SVG format because as the name implies, it’s infinitely scalable. You can shrink it down and print it on a small business card or blow it up and print it on a gigantic billboard. Rather of a bitmap, or a grid of pixels, they’re code. This code contains sequences of lines and shapes, each with unique attributes that dictate their colors and layout coordinates.
Another awesome thing about SVGs? Browsers love them. When properly optimized, their footprint is considerably smaller than that of a raster-based format (e.g, JPG, PNG, etc.). And because they’re infinitely scalable, they’re perfectly crisp even on the biggest displays with the highest of pixel densities.
You know who else loves SVGs? Designers! Web designers rely on SVGs to create beautiful designs for the modern web. SVGs are easily made and manipulated in programs like Adobe Illustrator or Sketch where they can then be exported for the web. From there, developers can incorporate them into their projects just like any other image.
But ladies and gentlemen, that’s not all!
Alternatively, when working with a more complex SVG, you might find it easier to open this file up in Adobe Illustrator, clean up or consolidate the layers, and name them something that isn’t auto-generated.
Because you can hook onto an SVG just like an HTML element, that means you can also animate it. Even better, you can animate a node (or multiple nodes) within an SVG independently. This is an incredibly powerful capability.
Here’s a realistic scenario. You’re working on a fitness application and you need to create an experience in which a user inputs their daily walking steps for the week. Once they submit those numbers, they are presented with a dynamic bar chart that reflects their steps on a X/Y axis.
Your first inclination might be to reach for a data visualization library. Hold up.
Instead, work with your designer to provide you an SVG asset of that bar chart with all 7 of the bars set to 0. Now, instead of mapping the user’s data into a 3rd party data visualization library, simply derive a bar height percentage for each day, then map those percentages to each of the 7 SVG nodes. And in your CSS, set the nodes to have a transition property that animated their height.
Data visualization in just a few lines of code AND no 3rd party dependencies? Yes please.
Advanced SVG Tooling
If you’re looking to push your experiences to the next level, look no further than GSAP (GreenSock Animation Platform). When it comes to experiences that demand more complex functionality than some high-level JS or CSS can offer, GSAP is our go-to solution.
The GSAP team has been hard at work for over 15 years (since the days of Flash!) crafting robust and reliable animation solutions that offer developers an incredible degree of power with very little code. Its API allows for the manipulation of any attribute on any DOM element in any way that can be imagined.
GSAP’s core can be used with any type of asset, but it also offers a couple of SVG-specific plugins that bring an entirely new level of manipulation to the table.
Specifically, the DrawSVG plugin can progressively animate the stroke of an SVG node inward and outward from any point of the shape.
The MorphSVG plugin morphs shapes into each other. Any developer can appreciate the unbelievably complex amount of logic that would go into something like this — it’s practically magic. The morphing mechanisms open up a world of opportunities. Shapes no longer need to be agnostic to each other. We often use this plugin to animate shapes along paths for dynamic and interactive data visualizations.
Go Forth and SVG!
Hopefully you’re as excited about the power of SVGs as we are. We love talking about potential animation opportunities in our initial first-round internal design reviews for a given project. We’ve found that getting all of these ideas out on the table early-on and deciding what is reasonable within the scope of the execution results in a much more polished final product.