The HTML does not need to be altered from the previous example. We made changes in the XML, so, in principle you may only need to alter the XML file location if you are using separate XML files like we are.

	<link type="text/css" rel="stylesheet" href="/js/yui/build/cssfonts/fonts-min.css" /> 
	<script type="text/javascript" src="/js/raphael/raphael-min.js" ></script> 
	<script type="text/javascript" src="/js/yui/build/yui/yui.js"></script> 
	<script type="text/javascript" src="/js/jsphylosvg-min.js"></script> 
	<!-- unitip -->
	<link rel="stylesheet" type="text/css" href="/js/unitip/css/unitip.css" > 
	<script type="text/javascript" src="/js/unitip/js/unitip.js"></script> 	
	<script type="text/javascript">
	window.onload = function(){
		YUI().use('oop', 'json-stringify', 'io-base', 'event', 'event-delegate', function(Y){
			var uri = "/trees/4-coffee.xml";
			function complete(id, o, args) {
				var data = o.responseXML; // Response data.
				var dataObject = {
							xml: data,
							fileSource: true
				phylocanvas = new Smits.PhyloCanvas(
					800, 800,
				init(); //unitip
			Y.on('io:complete', complete, Y);
			var request =;
	<div id="svgCanvas"> </div>

download version 1.55 here
If you use jsPhyloSVG, please be sure to cite us:
Smits SA, Ouverney CC, 2010 jsPhyloSVG: A Javascript Library for Visualizing Interactive and Vector-Based Phylogenetic Trees on the Web.
PLoS ONE 5(8): e12267. doi:10.1371/journal.pone.0012267

You might also be interested in Phylometrics.