From Idea to Web: Designing a Web Interactive Graphic

This is how an idea became a digital object and transformed into a web interactive graphic using SVG.

Lily Li
Lily Li
Nov 14, 2018 · 4 min read

My manager and I sat down and looked at the web page of our firms’ investment process. It was a multi-paragraph/wall of text display. Not only was it intimidating, it was time consuming to digest even for the most seasoned professional.

Idea to Design

The challenge was that the investment process is not strictly linear or circular and consisted of simultaneous actions.

The graphic does not capture the complexity of the non-linear investment process.

Next, I played around with an overall circular shape. To retain the sectional display of information, I deployed trapezoids. Instead of creating a complete circle, which would defeat the purpose of the sectionals, I formed a mock circle (nod to Gestalt’s principle) by curving the trapezoids’ parallel edges towards the center. To demonstrate two paths of processes, I used white space and strategic overlapping.

There was concern that “risk management,” which is an all encompassing element, was not emphasized enough. Instead of layering a circle underneath the already circular graphic, I decided to explore a trapezoid underlay with various flow depictions (below). Since the investment process is sequential, I added in arrows to give a sense of direction.

After some feedback from the team and content writer, I scraped the outer container/underlay and went back to the trapezoid sectionals to reduce congestion. I kept the arrows to direct the flow but lightened them to be less distracting . I hung onto the circular format to depict the two-layer, simultaneous process. The thick outer arrows draw your attention but the rotated font keeps them from being too accessible and distracting.

Graphic to Web through SVG

The graphic presents a friendly way of digesting the content but not without sacrificing robust details that were offered in the text format. What if there was a way to keep both a customized graphic and content details? This is where SVG comes in.

The benefit of using Illustrator is that it has a neat export feature: “Export to SVG”. SVG stands for Scalable Vector Graphics, which is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. Without Illustrator’s SVG compiler, translating the file into a web graphic through HTML/CSS code would be a tremendous effort.

The exported SVG product is a lengthy file containing a sea of SVG and CSS code. If you open this in a browser, it will be the graphic from Illustrator. The benefit of using SVG for web is that it preserves the elements, layers, and respects the various types of objects (text vs. rectangle shape). The text is recognized by the browser as separate from the shapes (important for text to speech) compared to text in a JPG, where it’s knitted together with other elements into one graphic.

Static Graphic to Interactive SVG

To take the SVG to the next level, let’s add interactions such as hover effects and hover panels, which would be a good device to carry details and extra information without adding noise to the graphic.

As a first step, I created an HTML file and inserted the SVG code into the <body></body>. Then, I separated the CSS, which was embedded within the SVG code, into it’s own file and referenced it in the HTML <head></head>.

Taking a look at the SVG code, it’s not drastically different from HTML. It uses a similar structure but instead of <div></div> tags, it has <g></g> tags. I wanted to add a hover effect (color change upon hover) to the trapezoid areas so I searched for the class names of these elements in the HTML file. Similar to adding CSS flair to HTML elements, I created a class name: hover chunk in the CSS file (hover effect documentation).

Then I found this great walkthrough on adding tooltips to SVG, which gave me the ability to add extra information upon hover.

On brief overview, it involves adding a custom “tooltip” class to the <path> tag of the trapezoid element that is to be the hover trigger. To add tooltip content, insert it into a title attribute in the same <path> tag. Adding the trigger behavior itself, such as tooltip appearance upon hover, clicking, and tapping (important for mobile), involves adding a script in the <head></head> tags of the HTML file (and downloading a separate Javascript file from the tutorial I found).

I tinkered with the display and responsiveness of the SVG through the attributes in the <svg></svg> tags. But be careful as scaling is where SVG behavior differs greatly from image behavior. Luckily, I found this helpful guide on SVG scaling.

My graphic is still under development but I’ve already learned so much. SVG is not mentioned very often in web or graphic design but it deserves a spotlight in that it opens up a door of possibilities.

Lily Li

Written by

Lily Li

UX Designer | UC Berkeley ’17 | Intrigued by human behavior & passionate about design | San Francisco, CA

More From Medium

Also tagged Marketing

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade