SVG in design. Little story behind the curtains

When we started developing of ZANZARRA’s official website, we decided to make the first stable version and run it ASAP. And after that, we add new features, correcting design elements, modifying existing structure etc, using the initial website as a basement (some sort of MVP using startup worlds). Actually, it was a good idea to start at once, instead of having to grind design to the last pixel, while the potential client could use our site and contact us.

When the main page has already taken the right view, there was one thing that has to be fixed. Huge images were loading too slow and the whole layout was "jumping". We needed a cute splash screen, which itself would not overload the page. The idea was to make our animated logo that will remain on the page for a few seconds until it is completely loaded. So I decided to acquire some new knowledge: SVG and its stylization.

I had read some articles with many examples and get a little confused, because, as a designer, I can not master the coding as easy as I would like.

 

true detective capture

 

But, eventually, the work did not pass in vain.

Why did I choose SVG?

This format has a very good cross browser support, it has a smaller size than JPG or PNG, and since it is a vector format, it can be easily scaled and still retains the accurate look on any screen resolution.

SVG stylization principles combine classic CSS commands and SMIL attributes. But you can not modify SVG only with CSS because the SVG path comes with a set of data that defines the shape of the path. For example, that's how path attribute of our logo looks like:

<path class="stroke" d="M395 363c3,0 7,-1 10,-1 -35,33 -84,75 -134,118 -56,-14 -111,-26 -138,-26 -3,0 -5,0 -7,0 35,-31 83,-72 133,-115 53,13 105,24 136,24zm-1 450l2 0c104,-1 135,-143 125,-143 -11,0 -25,36 -88,36 -41,0 -239,-61 -300,-61 -3,0 -5,0 -8,0 20,-18 45,-39 72,-62 70,17 154,39 198,39 104,0 136,-143 126,-143 -11,0 -25,36 -88,36 -19,0 -71,-13 -127,-27 88,-76 172,-153 193,-193 2,-3 3,-5 4,-8 18,-34 23,-67 18,-67 -11,0 -25,36 -88,36 -11,0 -36,-5 -66,-12 62,-56 113,-106 130,-137 0,0 0,0 0,0 0,0 1,-1 1,-1 0,0 0,0 0,0 22,-38 28,-77 23,-77 -11,0 -25,36 -88,36 -41,0 -239,-61 -300,-61 -101,0 -139,143 -127,143 13,0 20,-36 84,-36 44,0 231,61 305,61 4,0 7,0 10,-1 -20,19 -45,41 -72,65 -73,-18 -163,-41 -200,-41 -101,0 -139,143 -127,143 13,0 20,-36 84,-36 21,0 75,14 134,28 -83,72 -163,142 -186,179 0,0 -1,0 -1,0 -28,41 -38,88 -31,88 13,0 20,-36 84,-36 13,0 40,5 72,13 -57,51 -106,97 -123,124 0,0 -1,1 -1,1 -29,40 -39,89 -32,89 13,0 20,-36 84,-36 44,0 229,60 304,61z"/>
<path class="fill" d="M395 363c3,0 7,-1 10,-1 -35,33 -84,75 -134,118 -56,-14 -111,-26 -138,-26 -3,0 -5,0 -7,0 35,-31 83,-72 133,-115 53,13 105,24 136,24zm-1 450l2 0c104,-1 135,-143 125,-143 -11,0 -25,36 -88,36 -41,0 -239,-61 -300,-61 -3,0 -5,0 -8,0 20,-18 45,-39 72,-62 70,17 154,39 198,39 104,0 136,-143 126,-143 -11,0 -25,36 -88,36 -19,0 -71,-13 -127,-27 88,-76 172,-153 193,-193 2,-3 3,-5 4,-8 18,-34 23,-67 18,-67 -11,0 -25,36 -88,36 -11,0 -36,-5 -66,-12 62,-56 113,-106 130,-137 0,0 0,0 0,0 0,0 1,-1 1,-1 0,0 0,0 0,0 22,-38 28,-77 23,-77 -11,0 -25,36 -88,36 -41,0 -239,-61 -300,-61 -101,0 -139,143 -127,143 13,0 20,-36 84,-36 44,0 231,61 305,61 4,0 7,0 10,-1 -20,19 -45,41 -72,65 -73,-18 -163,-41 -200,-41 -101,0 -139,143 -127,143 13,0 20,-36 84,-36 21,0 75,14 134,28 -83,72 -163,142 -186,179 0,0 -1,0 -1,0 -28,41 -38,88 -31,88 13,0 20,-36 84,-36 13,0 40,5 72,13 -57,51 -106,97 -123,124 0,0 -1,1 -1,1 -29,40 -39,89 -32,89 13,0 20,-36 84,-36 44,0 229,60 304,61z"/>

This data can be modified and animated through SMIL.

By using certain attributes and determining appropriate values for them, I applied them to the path of our logo in SVG code.

svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  }
.stroke {
  stroke-width: 2;
  stroke-dasharray: 500 0;
  animation: dasharray 4s;
  stroke: #000000;
  fill: none;
  }
.fill {
  fill-opacity: 0;
  animation: fill 2s ease 4s;
  animation-fill-mode: forwards;
}
@keyframes dasharray {
  0% {
    stroke-dasharray: 0 500;
  }
}
@keyframes fill {
  from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}

After that, my design mission was over. Mikhail (one of our developers) has mounted my code into the site. I ask him to tell about this a few words, obviously, mysterious to me:

It was pretty easy. For this case, I used jQuery(window).load() and setTimeout() functions on JS side, so we wait until the image is fully loaded. Once page is loaded, we hide the splash screen. If page loaded faster than logo animation, we are waiting for the animation to complete.

Anyway, we got what we wanted — nice piece of animation, which you can see (in case you didn’t notice yet) by clicking on the home page link.