SVG Can Do That?!: Generating Custom Web Graphics

The Business Challenge:

Graphics make or break a webpage. But if you make them wrong, graphics become static blocks that wont adjust and can’t be adapted. We need graphics that can adapt to content relative to the page and be flexible to grow with growing needs of a site. How can we make graphics that are unique to different pages without having multiple images?

Case Study:

Imagine this: you’re a developer that just got handed a design that features beautiful graphics related to each page. Each graphic has a fundamental design but they’re just different enough on each page to warrant changes.
The initial thought, “Okay, I’ll just create unique JPG or PNG graphics for each page and that’ll be it.” But the pages have to be dynamic. What happens when a page’s content needs to change a week later? You don’t want to rely on changing graphics every single time, re-uploading the new image, and maintaining new links every single time.

SVG to the rescue!
Here’s how we do it — and how your company can do it too:

  1. Introducing SVG

    Scalable Vector Graphics (SVG) has been around for quite a long time. Image types that all web developers are familiar with (JPG, PNG, GIF, et cetera) suffer from resolution problems when scaled up or down. Scalable vector graphics are not pixel-based, resulting in beautiful graphics that are scalable without loss of resolution.  You would have to use multiple JPG, PNG, or GIF files if you wanted this same result (and who wants to deal with multiple files with the same stuff in it?!) Browser support has not been universal until recently, so most people have been hesitant to incorporate SVG into their plan, until now. Another great thing about SVG is that it is also its own XML-based language, so anyone familiar with XML can go in and change the content.

  2. Implementation

    Our development environment is PHP, which allows us to pass information back and forth to pages without any problem. You want something from one page to reference something from another page or from a database? No problem. Pass variables back and forth.

    In our case, the SVG graphic on each page needed to show what options were relative to the current page the user is visiting. Combining PHP with SVG is a breeze. All we needed to do was embed the SVG text into a PHP file. This allows everything, and I mean everything in an SVG graphic to be controlled and modified by the PHP engine, resulting in real-time modification of the graphic and the text inside it without having to change anything. I’ll repeat the last phrase because it’s important. “Without having to change anything.”

  3. Result

    We have SVG graphics on our pages where certain items appear and disappear, where text inside a graphic changes, and where interactions are enabled and disabled. All of this is dependent on if the content is available on the back-end via conditional checks. If no content exists, don’t display the graphic. Of only certain parts exist, only display those parts.

    This means that anyone can change the data in the back-end, which can and will affect the content of the graphics, and the developer will never have to worry about that request to update the content of an image because a page now has updated information. Content in a graphic will no longer be obsolete. It will change as soon as everything else changes. That last-minute call to the developer will never have to happen. Everything is taken care of. The graphics stay beautiful and relevant to whatever changes are being made. It’s a great thing.

And that’s how we do it.