ILLUMINATE

SVG sometimes feels like that genius friend of yours who just doesn’t give a fuck. It has the potential to become a universal and open format for graphics: a tunnel between the world of desktop-based vector applications such as illustrator and the web. But it seems like SVG has been around forever, and not much has happened. This is partly, I would guess, because It hasn’t enjoyed the same popularity as CSS3 or canvas.

Originally, I wanted to make Web Typography for the Lonely library-free. Not because I’m anti-library, although I do think they can become a crutch, but because I wanted the site to focus on all the amazing stuff you could do using only javascript and web standards. Unfortunately, after a few hours of trying to script with SVG, I wanted to stick my head in a bucket of tiny angry grizzly bears. Writing the code to dynamically create one SMIL animation element can take 10+ lines of javascript, and after all of that, it still didn’t work.

I might be going out on a limb, but it seems like this difficulty in creating basic animations is a big reason why SVG hasn’t taken off. As designers and developers continue to prefer increasingly leaner and more dynamic code, SVG still seems painfully static and verbose. Fortunately, this is why libraries exist, and it is my hope that ones like Raphael.js will make doing cool stuff with SVG easy enough for it to gain more momentum.

The Code

If you want to fire up Illuminate and play with the code, you need to design your text element, and point the Javascript at it, using the id of the text element you are trying to effect. Don’t forget to include Raphael.js above the script.

ill.init('to_ill')

You can set some parameters, as shown below, where pathStr is a string containing all of the path data. I’ll explain how to get that next.

ill.colors = ["#00B6B8","#ED5F4C","#F9A235","#2E3192"]
ill.shapes = [pathStr1,Pathstr2,pathStr3,pathStr4]  

Bringing vectors into Raphael

I actually hand drew all of the shapes above, and then live traced them in Illustrator. If you are familiar with save for web and devices, there is an option to save as SVG. If I save one of my shapes, which looks like this:

And open it up in a text editor, at the bottom, I get some code that looks like this:

<path fill="#CF5F4C" d="M14.347,394.635c17.649,54.164,40.817,98.91,87.838,148.009c11.56,12.081,23.362,25.914,36.352,34.552
	c16.626,11.105,39.894,21.105,60.333,29.662c61.048,25.59,119.076,37.748,181.796,40.217c19.076,0.748,43.06,6.707,56.472-10.277
	c-1.17-115.795-12.551-235.521-2.017-349.417c3.265-35.314-3.797-78.681-2.043-119.343c0.878-19.866,0.047-36.281-0.181-56.365
	c-0.308-25.336,7.454-49.057,8.361-73.866C441.68,26.1,443.339,14.312,432.8,2.98c-34.827-6.536-67.641-0.917-106.672,3.49
	c-54.665,6.202-112.221,13.435-157.813,35.257C142.287,54.18,114.785,74.402,93.058,93c-16.233,13.89-25.764,32.554-38.671,52.589
	c-10.115,15.684-22.764,30.231-30.559,45.274C8.323,220.625,1.454,261.873,0.141,295.936
	C-1.078,327.596,5.773,360.799,14.347,394.635"/>

To transport this shape into raphael, you first need to eliminate all of the returns, and then import it all into one big string, like so:

var myPathString = "M14.15,37.906c5.343,0.11,9.145-6.422,8.764-11.283 c-0.232-2.941-1.677-7.969-3.622-11.187c-0.277-0.458-0.651-0.848-0.985-1.319c-0.83-1.168-1.482-2.508-2.371-3.496 C13.23,7.612,9.766,3.211,6.733,0C5.777,0.283,5.312,1.225,4.862,2.03c-2,3.576-4.107,8.543-4.402,12.209 c-0.175,2.179-0.486,4.864-0.459,6.825c0.025,1.749,0.577,4.009,1.098,6.037c1.107,4.312,3.561,9.53,8.533,10.623 C11.026,38.031,12.402,38.038,14.15,37.906"

You can then create the shape dynamically.

this.paper = Raphael("element",0,0);
this.shape = this.paper.path(myPathString).attr({
    fill:"green",
    "stroke-width":"0.5",
    stroke: "transparent"
});
this.shape.scale(myscale,myScale,0,0);
this.shape.attr("opacity","0.6")

I thought I would leave Illuminate as telling example of the benefits of working with a library in SVG. I figure other people want to avoid ye-ole bucket of grizzly bears more than I do. The downside is that at 60kb, it can be a rather heavy handed solution for smaller tasks. Cluster, another piece on this site, is an example of how do SVG without raphael, so I recommend you check that out if you are interested.