Best Practice Exchange: Programming Magic

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:


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:

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!

Related Blogs

How much more productive could your salespeople be if they had access to their customer data, follow ups, and sales opportunities on their mobile phone no matter where they are in the world? New mobile business solutions are readily becoming the most effective tool
What tools are you using to manage your events? If you are not using a dedicated event management software, you are probably regularly faced with this challenging situation: you’re using a large number of Word and Excel documents to manage information that is duplicated
It’s been estimated that 70 percent of all printed conference materials are left at the hotel when attendees depart. Distributing traditional printed materials is often wasteful and ineffective but mobile tech offers an alternative. Why You Should Offer
Prior to their big October 15-17 IMEX America event in Las Vegas, IMEX America put together a sustainability guide containing seven ways attendees, exhibitors, and

Wir verwenden auf unserer Website Cookies, um Ihr Erlebnis auf unserer Website so benutzerfreundlich wie möglich zu gestalten. Cookies sind ungefährliche kleine Textdateien, die auf Ihrem Rechner abgelegt werden und die Ihr Browser speichert, sodass Ihr Browser beim nächsten Besuch wiedererkannt wird. Wenn Sie diesen Hinweis mit "OK" bestätigen, erklären Sie sich damit einverstanden. Nähere Erläuterungen zur Cookie-Nutzung finden Sie in unserer Datenschutzerklärung.