After years of quarantine, the Scalable Vector Graphics is finally raising fame as a feature of HTML5 with full native browser support. Vlog.it, by Marco Rosella, is an experimental site launched last month to explore two aspects of SVG with interesting potential for the design of original interfaces: clipping paths and scalable 2D motion graphics. Marco is going to share a quick tutorial on how it is done.

View Demo Wheelayout

Download Demo ZIP

Overview

The interface of vlog.it is composed by three rotating circle created by 48 thumbnails (chosen randomly) that let play over 300 Vimeos and over 1000 YouTube videos from my favorite ones. At the onload and before the opening of every video several black & white animations, with primitive shapes, are played in full screen like shown here:

About the idea behind this work, if it was a commercial project I probably hold the client’s hand and whisper: “close your eyes and think about the centrality of The Man, surrounded by The Movement in The Digital Universe …”, but in fact the technique comes before the concept: I was testing After Effects’ masks with several shapes trying to reply some contemporary paper collage in this way, and straight after I wondered if something similar could be replyed in HTML. An old friend, lost in memories, comes to my mind…

Welcome back SVG

Many of you probably worked with SVG (first W3C draft in 1999) before – I have experimented with a PowerPoint-like web application introduced at the SVG Open 2005 and some SMIL animations – and you have maybe read the announcement of native support in Internet Explorer 9 as an unexpected green light for large scale development.

In the last months several experts studied its cross-browsing application in different topics: for example Shelley Powers wrote about scalable backgrounds, Brian Suda talks about the use in infographics and Jsdo drawn a cartoon movie; different Javascript libraries like SVGWeb or Raphaël use scripting for a rapid development providing the support for old browser (with Flash engine for the first, and VML for the second).
The next challenge is to look to SVG not only for animated scalable images, but also to use it as a core part of the interface of your site for the final knockout in the match with Flash, obviously not falling in useless skip intro animation and find a good compromise solution between usability and a never underestimated value: coolness.

An SVG interface example: the wheelayout (view demo)

To explain in a few steps how vlog.it is build, I extracted the inner circle from the core engine and created a carousel that could be used in ‘real life’ context using jQuery (only for events and selectors, so you can use your favourite library) and Raphaël working in all modern browsers.
I’ve imagined a culture web magazine that want to dedicate a focus of 5 articles about the nominations of a new discussed Oscar’s category:

Every slice of the wheel is made by the crop of images thought an important SVG feature, the clipping paths. Some simple shapes, and his related paths, could be easily created with a couple of JS functions, but for complex ones is easier to delegate to vector drawing tools like Illustrator or Inkscape that can export in SVG format. This is the first case (look at this pie chart), but we’ll use Illustrator anyway to meet the SVG tag.

1. Select the Pie Graph Tool, click on the artboard and enter 400×400px.

2. Enter five 10 values (for equal slices dimension) and click on the check to apply changes; close the data table.

3. Rotate the group created of 180° with Object->Transform->Rotate

4. With the graph selected, go to Object -> Ungroup to separate the graph into individual parts.
   5) Cancel all the slices other the one on the top and position it at the horizontal center of the artboard.

5. Export the file as SVG with Save as a copy.

Open the SVG file with and editor and keep in mind this tag, with ‘d’ attribute only:

<path  d="M200,175.223L97.395,34c62.396-45.334,142.814-45.334,205.211,0L200,175.223z"/>

we will use it later.

HTML

In the HTML code we have a div “wheel” where Raphaël will draw the SVG canvas, some header tags for the carousel title and an unordered list of 5 items where are inserted the title of ‘actor’, a little description and the link to the article.

<div id="wheel"></div>
<header>
  ...
</header>
...
<ul>
  <li>
    <div class="descr" id="pigeon">
      <h3>Rick Pigeon</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      <a href="#">Read the story →</a></p>
    </div>
    <img src="https://149842035.v2.pressablecdn.com/wp-content/uploads/2011/10/rickpigeon.jpg" alt="First Image"/>
  </li>
  <li>
  ...
  </li>
  ...
</ul>

Javascript

With the function called at the domReady we create a Raphaël main object and call a “vlogitWheel()” (just the original name I used in my site) method to generate the wheel and draw a black circle as background of the titles.

$(document).ready(function() {
    var paper = Raphael(document.getElementById('wheel'),400,350);
    var wheelayout = paper.vlogitWheel();
    var headerback = paper.circle(202, 175, 90).attr({fill: '#111', "stroke": "none"}).toFront();
});

In the “vlogitWheel” method function we create the clipping path using the coordinates of the Illustrator’s path tag above. The clipPath element is not generated using Raphaël because it isn’t supported by the library yet, so it can’t be displayed in Internet Explorer versions before 9 (until the release of a new Raphaël version I think is maybe possible create a patch with the related VML class).

Raphael.fn.vlogitWheel = function () {
      var paper = this;
      wheel = this.set();
      var angle = 0;
      var first = true;
      var slices = [];
      svgcanv = $('svg')[0];
      svg = "http://www.w3.org/2000/svg"; 
      var clippath = document.createElementNS(svg,"clipPath");
      svgcanv.appendChild(clippath);
      clippath.setAttribute("id","clipw");
      p = paper.path("M200,175.223L97.395,34c62.396-45.334,142.814-45.334,205.211,0L200,175.223z");
      clippath.appendChild(p.node);

Using a loop we create five SVG images (maskedImg) with the path of the HTML img tags and we attach to them the attribute “clip-path” with as value the id of the clipPath element created. Every clipped images is drawn rotated with an increasing angle, so the fifth item complete the wheel.

for (var j = 0; j < 5; j++) {
	angleplus = 360 / 5;
	var indimg = $('img').get(j).src;
	var titleimg = $('img').get(j);
	var bong = titleimg.getAttribute('alt');
	var maskedImg = paper.image(indimg, 65,0, 240,150);
        maskedImg.node.setAttribute("clip-path","url(#clipw)");
        var deg = angleplus*j;
	maskedImg.rotate(deg, 202, 175);
	maskedImg.attr({"opacity": "0.7"});
	maskedImg.node.style.cursor = 'pointer';
	maskedImg.index = j;

Thanks to its DOM element nature (the main advantage over the other graphics HTML5 feature, <canvas>) we can attach to every clipped images the hover - simple opacity switch - and the click - opening of motion graphics and fade in of description text - events.

maskedImg.hover(
	    function(event){
	      slices[this.index].animate({"opacity": "1"}, 200, "<>");
	    },
	    function(event){
 	      slices[this.index].animate({"opacity": "0.6"}, 200, "<>");
 	    } 
	).click(
	    function() {
		openDescr(this.index);
		stopAll();
 	    }   
	);

The motion graphics animation I chose to be displayed before the fadeIn is extremely simple: a scaled rotating pentagon.

function openDescr(el) {
	$(".descr").fadeOut();
	el = $(".descr").get(el).id;
	if(first) {
	  $("header").fadeOut();
	  var pentagon = paper.path("M 148.721,249.6 115.991,148.868 201.679,86.612 287.368,148.868 254.638,249.6 z").attr({fill: '#eee', "transform": "s0.01r180,202,175","stroke": "none"});
	  pentagon.animate({"transform":"s1.3r0,202,175"}, "1500", "<>", function(){$('#'+el).css("top",120).fadeIn(1000)});
	  first = false;
	} else {
	  $('#'+el).css("top",120).fadeIn(1000);
	}
       };

Let's SVGo!

As you may though reading the lines above, there are infinite creative possibilities to explore, with infinite paths for clip and infinite shapes to animate. (or think about an hypothetical use with a revelation of this year, the parallax scrolling).
But there also some important related topics that will conduct to some questions about the correct use:

• CSS3 - when is better to use the CSS3 transition selectors and when use the SMIL animations?
• responsive site - how can use the view box and preserveAspectRatio in correct way for small screen?
• canvas - forgetting the big handicap of DOM tree, canvas could have better performance than SVG in some cases?
• animal actors - will Whip Peggy won the deserved Oscar? (I'm with you Peg, your melodic barks really touched me.)

Guest Author Info

Marco Rosella is an italian interactive designer. After the degree in Computer Engineering, he worked in multiple disciplines of digital world, from semantic web to motion graphics to electronic music.
He won a SXSW Award for the project "The Horizontal Way".