Ungerboeck Digital - Blog

Blog

 

Best Practice Exchange: Programming Magic

×

Warning

JUser: :_load: Unable to load user with ID: 235

Apr 30, 2015

So, you want a beautiful, flashy (pun-intended) website that is equal parts engaging and impressive? It also MUST be optimized for mobile and search. And you’re on a tight budget…

Time was, a digital agency would take one look at that wish list and run for the hills. But thanks to evolving technologies, programmers, designers and developers now have several tools and tricks at their disposal that can get the job done without breaking the bank. One of them is a little something called Scalable Vector Graphics (SVG), and here’s why it’s rad:

SVG > JPEG/GIF

Technically speaking, SVG is defined as an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. In plainspeak, that translates to an easier way to create interactive, resolution-independent graphics that will look great on any size screen.

As it relates specifically to images though, SVG has a leg up on JPEGs and GIFs for a variety of reasons. Unlike their bitmapped counterparts, SVG images are scalable to the size of the viewing screen and will not lose quality/resolution if they are zoomed or resized. Consequently, this means that SVG images can also be printed with high quality at any resolution. Another point for mobile usability is the relatively small files size of SVG compared to GIF & JPEF files. When you also consider that SVG images can be created and edited with any text editor, it’s easy to see why they come out on top.

SVG > Flash

You might be thinking this all sounds a whole lot like Flash. And you’d be right. Except that Flash on the web has gone virtually extinct – for good reason. First, Flash turned out to be a nightmare for search. Second, as a proprietary technology without open source, it proved difficult to work with. Despite all that, Flash clung to life for quite some time – and that’s also for good reason: It was cool!

So, why is SVG a better alternative than Flash?

  1. SVG animations can be made search-engine friendly through crawl-able text labels and descriptions
  2. SVG is open source
  3. SVG is complaint with other standards like XSL and the DOM

The final nail in the coffin: SVG animation is every bit as cool as anything you’ve ever seen in Flash. Case in point: www.justdesign.co.za

SVG > Custom Code

All you need to create something as slick as the above example are some static SVG images and a little Javascript. Thankfully, there are some great libraries out there that simplify this even further (Snap.svg and Raphael spring to mind). But, if you weren’t going to use SVG animation and you cared at all about searchability, then you’d be left with no other option but a whole lot of crazy-complicated, custom programming. We’re talking thousands of lines of code vs. a handful – and probably with duller results. Say goodbye to your budget!

SVG = Winner

Beautiful, engaging, interactive websites? Check.

Optimized for mobile and search? Check.

Budget-friendly? Check.

SVG for the win!

Let's Talk

Looking to know more? Drop us a note through the form below.

636.300.5606  |  100 Ungerboeck Park, O'Fallon, Missouri, 63368
Godzilla