still lovin’ the svg
i posted a few months back on using the scalable vector graphics (SVG) web format for visualizing data structures. i keep finding more great uses for it! by now i’ve also put it to work visualizing GPU memory allocations, asynchronous file operations and access patterns, hierarchical per render frame CPU work, and location based data map overlays. this is quite the handy visualization tool to have around! 
in addition to lines which i covered in the first post, i’ve now been using circles, rectangles, text, images, and layers. these are all super easy just like the lines. for example:
<text style="font-size:10px;fill:#ff0000" x="4" y="16">ReticulateTheSplines</text>
<image x="8" y="30" width="256" height="256" xlink:href="base.jpg" />
i’ve found it really handy to go into InkScape and make a quick SVG by hand then load it up in a text editor to see the right markup to use for different things. for example with layers InkScape has it’s own namespace and extra options so you can put really spammy data in topmost hidden layers and only reveal them when you’re zoomed in on some area of interest.
here’s a link to the full W3C SVG standard which is a great reference for all the possibilities. and here are some new examples of this madness in action.
Amazing!
There is an even better workflow with inkscape. Draw what you want to replicate with code, then go to the Edit/XML Editor… There you can interact with the nodes/drawing in realtime and its easier to understand how it works.
Go inkscape!
ah great tip, thanks!!
Interesting post! I’ve been using Inkscape to build the collision geometry for my pinball game that uses Box2d. Using Ruby I parse the XML and generate C++ headers to defines my Box2d collision shapes and the layout of other objects. It’s really handy.
I’ll be using SVG + Inscape more in the future, perhaps even as a level editor because you can add custom attributes to the SVG (and Inscape has some support for this).