Home | Blog

Inline SVG & External CSS

Adding interactivity to a site enhances a user’s overall experience. At Ignitro Studios, we strive to engage users with web content rather than just display information on your computer screen.

Recently, we were asked to create an interactive map of the United States. Our client wanted potential customers to be able to click on individual states, in order to see their various locations across the country. Traditionally in web-development, this request would be tackled using an image-map. However, as the internet continues to evolve, so must the ways that we tackle development. Today, mobile internet makes it easy to surf the web from just about anywhere.  A wide variety of devices such as smartphones, tablets & laptops exist as legitimate avenues that a visitor uses to access your site.  Because of this, the content we develop needs to be innately versatile.

By nature, the image-maps of yesterday are not responsive.  Meaning, they stay the same size regardless of the size of the viewport window. Today, it is common-practice for images to respond to the size of the user’s viewport window, actively re-sizing themselves to fill the screen.  To go a step further, at Ignitro Studios, we even design our sites in such a way that content is repositioned based on the user’s viewing device. So no matter how a visitor is accessing our websites, they will see the most attractive and functional version possible.

So back to the project at hand, it is possible to force image-maps to be responsive with extra code, but this still leaves a less than desirable result.  We actively searched for a better solution. We wanted a high-quality image that would load quickly, re-size according to the viewport window, support hyperlinks, and enhance user experience.  In the end, we decided to create a custom SVG for this project.

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The World Wide Web Consortium (W3C) has been working on specifications since 1999. SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. -Wikipedia

Today, SVGs are supported by all of the major browsers.

Using a Vector based application. We drew out a full map of the United States. In order to add hover effects to each State, it was necessary to give each state its own unique path. Once we had the artwork dialed-in, the graphics were exported into SVG. We then placed the SVG tag directly into our HTML. Placing the element in this way enables us to add styling externally with CSS. We were also able to add pseudo class triggering to create roll-over actions to show/hide different elements in our artwork.

We were successful in creating a vector map of the U.S. which resizes based on the viewport window / user device. We added animated roll-over effects to the graphic with CSS and also were able to show / hide different elements, depending on where the user clicks.

Mobile Inline SVG & External CSS
We found SVG to be a great solution for this project. The file size was kept low, and the interactivity was enhanced. In the end, it was a bit more work, but the best option was delivered to the client.