Scalable Vector Graphics Growing Into the Standard
It’s interesting how the benefits of Scalable Vector Graphics (“SVG”) are increasingly taken advantage of as technology and the web have evolved. It feels similar to a young comic book superhero discovering additional powers as new challenges are presented. The initial uses of SVG to retain visual integrity of images regardless of what size you wanted to use them has become even more relevant with the advent of responsive design, viewports and the increasing use of animation on websites.
At a basic level, just think about what SVG has done for an important part of a business’s branding: its logo. Something many businesses hold precious and as a result always want presented in as pristine a manner a possible. Prior to SVG, designers and developers were confronted with trade offs when creating logo images that would be used in various sizes across a website.
They had to be careful not to create a logo image that wasn’t large enough despite some potential benefits from smaller files and better rendering time. Scaling up a smaller logo image degrades its clarity since rastered images (e.g., gif, jpg, png) are composed of a fixed set of dots. Experienced designers and developers know this and so would never use a mini logo and size it up. Instead, they create an oversized logo image so that when scaled down it wouldn’t look too bad.
Putting aside that not looking “too bad” is not the same as pristine, such an oversized logo image results in a larger file and slower rendering on screen. SVG is rendered much more quickly since it is markup and not an image that needs to be rendered. So with SVG you get a smaller file that can be used across a website for various logo sizes and without a variance in visual quality or a drag on load times.
Using SVG Beyond Simple Image Sizing
Despite SVG being developed for the web, for a time there wasn’t extensive use of it beyond such sizing benefits. But now the web is discovering that SVG was ahead of its time. Increased mobile usage is moving responsive design from a luxury toward a standard (e.g., factored into Google algorithms) and SVG is going along for the ride. Additionally, Retina type displays are here to stay and SVG can resize for their pixel density without losing shape.
A recent design and website build for a client desiring a cutting edge look presented an opportunity to take advantage of SVG’s benefits. Among the visual aspects to be included on the site were diagonals and animations. The alternatives to SVG for achieving the look weren’t very enticing:
Use images to illustrate the diagonal lines. However, that would have required multiple images (i.e., more work meaning increased cost) to accommodate different viewports.
Use CSS transforms to rotate containers, but that’s just messy as well as unnecessary.
What was less messy and more efficient was to use SVG. It allowed the creation of polygon shapes that could also be animated with JavaScript. And of course there was just how good the site would look and how quick it would be whether viewed on a desk top, tablet or smart phone.
Maybe instead of a superhero, SVG is more like a pro athlete entering their prime after being a high draft choice by a bad team. The play of others is elevated as they discover and use all of the star’s talents. As the standards for visuals, especially increased usage of animation, and speed are elevated on the web, the capabilities of SVG will be called upon more and more.
Endertech is a Web Design Company in Los Angeles able to provide solutions for your website development needs. Contact us for your free consultation.
Top Photo Source: “Today’s latte, SVG logo” by Yuko Honda (https://www.flickr.com/photos/yukop) under
http://creativecommons.org/licenses/by-sa/4.0.
Are you interested in using scalable vector graphics in your responsive design?
Endertech is a Los Angeles Web Developer able to provide solutions for your website design and development needs. Contact us for a free consultation.