SVG! What’s your vector Vector?

So, I got to playing with SVG in the old browser today. Amazing stuff can be had with this. SVG for the folks under that pet rock over in the corner is a acronym for Scalable Vector Graphics. Go ahead and mash that link to read up on what SVG is all about. The skinny: its all about the ‘scalable’ phrase.

As usual there’s some story and painful support issues, go figure. For the most part all your modern day browsers support SVG these days. ( yeah, so um, that does of course exclude IE ) Google even indexes SVG content. Huh? You didn’t read the WikiPedia link? Yeah, its text based goodness this SVG stuff. SVG files are basically a XML subset that can be rendered by whatever consumes it. Set your source free here. Here is a example that is resized to 100×100 for inline display, click it to open the same image at 100% of your browser view port. Go ahead and resize your browser to as big as you can. Notice no rastering or distortion, eh? Now ‘view source’in your browser and check out how its all whipped up. Also, note that the URL points direct to the SVG file and gets rendered. You can view source here too and see that the URL is the value passed to the src attribute. Pretty cool, eh? ( My wife says this image looks like rice, huh? Seems the Chinese character for rice is very similar. )

SVG Example

So that’s pretty swell and all, but what else can I do with this stuff? script it up! That is, I can create and manage SVG sources at runtime. This is done pretty much the same as with other DOM objects, with some slightly different syntax here and there. For my first example, I used a external SVG file loaded in at runtime and manipulated, well manipulated the positioning. Here is the SVG.


You can load up a SVG source using Object, Embed, or iFrame even. All depends on your use-case there. I used Object this time around, which made positioning of the nodes in JS a little easier.

Check out the full source here EXAMPLE ONE

Next up I wanted to call a method on the SVG object and send it some data to respond to. WAIT! What? Oh yeah, cool idea eh? You can use JavaScript inside a SVG file! Lets check out what might be the ugliest SVG around here.

View the source on that bad boy and see some JS like this…sweet eh?

Now, in the main HTML file loading this SVG, I simply add a onLoad handler, reach through the DOM and call this method passing the data I want

This technique could be useful for data driven SVG based UI controls, graphs, charts, etc.. Check out EXAMPE TWO

Both of the above exposed techniques to re-use the SVG source via using JS. Well, SVG already has this covered in itself by way of a couple tags: and . Use the former tag to define your re-usable graphic resource and use the latter to well, use the resource.

Here you see a rectangle with a gradient fill is defined in the defs section. The graphic is NOT displayed in here. Further down you will see two use tags used. This is where the display actually occurs. Note that you can use the transform attribute to place the copy in different locations in the UI. fairly easy eh? Its a little bit tricker to use JS here. Here is a JS fragment of the action

Check out EXAMPLE THREE for some in depth coverage.

Of course no graphic manipulation examples should go with out a corporate directory example, but alas, I’ll forgo that and use a graph instead. A graph of the node and connection variety. In this case I created the SVG elements direct using code like

The above fragment indicates how I added soem rectangles. I used Math.rand() to randomly place these rectangles on screen. I stored all the nodes and x-y values in a array and used this to then draw lines from center to center. No weighted edges or anything here, just a simple example showing how simple this sort of thing is. Well, its as simple as the outcome! Check out EXAMPLE FOUR In reality, you would want to checkout D3 JS for a very robust data driven graphical library, but this simple approach could prove useful in your use-case.


This entry was posted in CSS3, HTML5, JavaScript, Techy. Bookmark the permalink.