icon-flow icon-moisture icon-temperature vs-icon-pipe
Google - Paul DeCotiis

Interacting with

Author: Paul DeCotiis

Date: March 5th, 2015

Croscon - Ideas: Paul DeCotiis

When dealing with Scalable Vector Graphics (SVG), things can be pretty...unpredictable, to say the least. Sometimes things function in a logical and expected manner, while others yield unexpected (or downright ridiculous) results. Even though the SVG file type hasn't necessarily received any attention lately from most graphics programs, the benefits of using SVG far outweigh most other file type alternatives available to us today.

Most notably, SVG makes things like icons and other UI elements ridiculously easy to work with, while allowing for the ability to scale our graphics to whatever size we want, with no loss of quality. This lets us developers worry less about image resolution and more about core aspects of our sites that matter the most.

Out of all of our projects at Croscon, creating Blueprint Registry has taught me the most about how quickly SVG can become a critical part of your workflow. In this article, I'd like to explain a thing or two I've learned along the way, as well as highlight the limitless possibilities of using SVG files in your web applications.

Project Background

My latest standoff with SVG happened when I was tasked with designing our case study for Blueprint Registry. This particular client had a very well designed site, with the goal of creating a fully responsive, e-commerce platform. For a majority of our clients at Croscon, we make a point to develop systems that are available on every device and screen size possible, so I wanted to explore a way to visually represent this aspect of our work in our case studies.

Blueprint Registry had a design that was more unique than any other frontend system we had implemented in the past. The site itself was designed around a detailed blueprint of your home, broken up by individual room layouts. These layouts presented a challenging problem for us to keep performance high while maintaining the original integrity of the design as close as possible. Once the site was complete, I was tasked with designing a case study that showcased our work and highlighted a few key points we felt were important about the project. This was a great opportunity to put my design hat back on and do something fun.

One of the major challenges I had was trying to figure out a way to visually represent the responsive aspects of our work. My goal was to develop an experience that shows what it's like to have a design react to different screen sizes, while hopefully providing our visitors with a better idea visually of what it is that we actually do.

So we had a concept and now we needed to figure out how to implement our idea.

Getting started

The first step was to design some assets. I liked the idea of using minimalistic designs of a few screen types, which could easily be drawn with the pen tool in Adobe Illustrator. I also wanted to keep everything looking pretty simple so that in the future interacting with the SVG elements would be easier to manage.

The basic design of one of the devices looked like this:

Pretty basic. No frills. Just what I was looking for.

Having an pretty good understanding of Illustrator or Photoshop is critical for us Web Developers, amongst other things, understanding these programs will make the typical structure of SVG files easier to comprehend, even though sometimes things just might not make any sense.

Once I saved my device design file as an SVG in Illustrator I can now access the SVG code by selecting the 'SVG code' button in the SVG options panel:

Select the 'SVG Code' button in the SVG options panel to view the SVG code

Next, I copied the SVG code for our graphic and placed it directly in my HTML file. This step is also mandatory if you want to use CSS or JS to interact with an SVG file.

This gives me something like this:

See the Pen Basic by Paul DeCotiis (@DeCotii) on CodePen.

Now we have a vector graphic from Illustrator exported as an SVG and embedded into my HTML file. This was our basic workflow for getting any SVG file into our projects. Once we had that done we can start manipulating the SVG graphic directly using CSS and Javascript. Let's go over a few of those steps in detail.

First, we need to make sure that ALL paths in Illustrator have strokes. This is also mandatory. Additionally I've found that if I expand all of the paths in illustrator before I export the file to an SVG, it solved a lot of issues with lines not drawing correctly in various browsers. It also helps to give your layers smart names in Illustrator and be sure to organize them in a logical way. This will save some potential headaches in the future.

Now that our file is prepped correctly, we can start using CSS3 transitions and animations to the SVG paths directly. I've learned a majority of this from Chris Coyier's article: How SVG Line Animation Works. If you need a more comprehensive overview, this is a great place to start.

Step 1.

Basic SVG line animation

See the Pen EaPYqe by Paul DeCotiis (@DeCotii) on CodePen.

Step 2.

Once the line animations were setup, it was time to add the CSS and HTML for the videos that will be played on each device. For the videos, I used Quicktime to record my screen as I navigated throughout the site. Once I had my videos recorded, we used ffmpeg in our build process to compress the video files down, as well as render out the different video formats for each browser.

As far as the CSS and HTML goes, things are pretty straightforward. There is a main container with an ID of 'frame'. This container will also get a class called 'frame-tablet' which we will use to animate the frame to different dimensions. Inside of this container is the overlay that contains the video play button, as well as the individual videos for each respective screen size:

    <div id="frame" class="frame-tablet">
        <div class="cs-info-wrap>
        <video id="video" class="work-video bpr-tablet-video fade-last active" muted="" autobuffer="">>
            <source src="http://www.croscon.com/video/bpr-tablet.webm" type="video/webm; codecs="vp8, vorbis"">
            <source src="http://www.croscon.com/video/bpr-tablet.mp4" type="video/mp4">
            Your browser does not support the video tag

I also used Bootstrap for the carousel functionality, which made things a lot easier to implement. On each slide change, I add a class to the 'frame' container for the corresponding screen size, and set the current video to active while hiding the rest. This also allows us to animate the frame smoothly and create a seamless transition from one slide to another.

See the Pen With Videos by Paul DeCotiis (@DeCotii) on CodePen.

Step 3.

Now that the video CSS and HTML is setup, let's write some basic Javascript for controlling the HTML5 videos (initiate animation first).

See the Pen With Videos and JS by Paul DeCotiis (@DeCotii) on CodePen.

Final Step.

Our core setup is complete, now let's add the slide transitions, as well as the JavaScript for the HTML5 videos and Bootstrap carousel.

See the Pen Carousel + SVG Videos by Paul DeCotiis (@DeCotii) on CodePen.

Once this section was completed, we also added a few different bells and whistles like entrance animations, as well as some other minor UI enhancements. Feel free to explore this case study here if you want to view more about the end result.

Overall, this was a really fun internal project to work on that gave me full creative freedom, which I always love. This project also challenged me on both a design and development level to come up with a solution that would be versatile enough to be used on future responsive case studies.

In the end, we are very happy with the results and are looking forward to reallocating this component on many more of our case studies in the future. I hope this article helped explain a few things that we learned along the way, as well as highlight a few tips and tricks I've come across while exploring the many uses of Scalable Vector Graphics and how they can be used in real-world development environments.

Croscon News Section