Using Scalable Vector Graphics (SVG) in your (web) projects

Now that computers get faster and faster more elaborate presentation methods such as SVG can be considered a good alternative to other technologies such as flash. We decided to investigate.

Scalable Vector Graphics (SVG) is a text-based graphics language that describes images with vector shapes, text, and embedded raster graphics.

SVG files are compact and provide high-quality graphics on the Web, in print, and on resource-limited handeld devices. In addition, SVG supports scripting and animation, so is ideal for interactive, data-driven, personalized graphics.

SVG is a royalty-free vendor-neutral open standard developed under the W3C (World Wide Web Consortium) Process. Follow the link at the top of the page to learn more on the Adobe website.

The great advantage of using SVG over flash is the good control you have from javascript. To demonstrate this we made a simple linegraph showing three parameter value readings. The value of the paramter is controlled from JavaScript and set to a random value.

The graph scrolls automatically by moving the viewbox. Theoretically this means that it would have been simple to create a function that allows scrolling back over the graph.

Copy and paste the following into a document you save with the extension .svg and open the document in your Internet Exporer.

For more information about SVG see the Adobe website.

You can also download the sample files here. If you download than make sure you re-open the file from your local disk, you cannot view it online due to your browser security settings.

<?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [ <!ENTITY CANVAS "stroke:black;stroke-width:1;fill:none;"> ]> <svg xml:space="preserve" width="100%" height="100%" viewBox="0 0 800 360" xmlns="http://www.w3.org/2000/svg" onload="Init(evt)"> <!-- Copyright 2003 Robota Softwarehouse, all rights reserved --> <g id="canvas" style="&CANVAS;"> <text x="400" y="20" text-anchor="middle" style="font-size:20px;font-weight:bold;font-family:geneva, trebuchet ms">Carlabs Test</text> <br /> <br /> <g id="DATA" transform="translate(0,0)"> <g id="PARAMETER0"> </g> <g id="PARAMETER1"> </g> <g id="PARAMETER2"> </g> <g id="PARAMETER3"> </g> <g id="PARAMETER4"> </g> <g id="PARAMETER5"> </g> </g> <br /> <br /> </g> <script><![CDATA[ // Copyright Robota Softwarehouse - http://www.robota.nl <br /> <br /> var gNumParams = 0; var gParameters = new Array(10); var gHorScroll = 0; var graphLen = 500, shiftLen = 800; var gSampleRate = 20; var gStepSize = 2+gSampleRate*0.5; var gMasterScrolled = 0; var gMasterScrollSize = gStepSize*5; var kDefautltPointStyle = "stroke:red;stroke-width:0.01;fill:red;"; // must be calculated from viewbox to w x h var x0 = 0; var y0 = 0; var vboxW = 0; var vboxH = 0; var svgW = 0; var svgH = 0; var boxH = 0; <br /> <br /> function Init(evt){ svgdoc = evt.getTarget() != null ? evt.getTarget().getOwnerDocument() : null; svgroot = svgdoc.getDocumentElement(); <br /> <br /> var vbox = (svgroot.getAttribute("viewBox")).split(' '); x0 = parseInt(vbox[0]); y0 = parseInt(vbox[1]); vboxW = parseInt(vbox[2]); vboxH = parseInt(vbox[3]); svgW = parseInt(svgroot.getAttribute("width")); svgH = parseInt(svgroot.getAttribute("height")); boxH = (vboxH-20); graphLen = vboxW-24; <br /> <br /> AddParameter("TESTPARAM", "Air Intake Temperature", 0, 100, "stroke:green;stroke-width:1.5;fill:none;", 1); AddParameter("ASDPARAM", "Engine Speed", 0, 100, "stroke:blue;stroke-width:1.5;fill:none;opacity:0.5"); AddParameter("TESTPARAM", "Pizzas", 0, 100, "stroke:red;stroke-width:4.5;fill:none;opacity:0.5", // line style "stroke:none;fill:blue;", 1); // point style MakeLegend(); TimeElapsed(); } <br /> <br /> function Parameter(pid, title, x, y, min, max, lineStyle, pointStyle, markPoints, markValues) { this.pid = pid; this.title = title; this.sample = 1; this.value = 0.0; this.x = parseInt(x); this.y = parseInt(y); this.min = parseInt(min); this.max = parseInt(max); this.pointStyle = pointStyle ? pointStyle : kDefautltPointStyle; this.lineStyle = lineStyle; this.markPoints = markPoints; this.markValues = markValues; } <br /> <br /> function AddParameter(pid, title, min, max, lineStyle, pointStyle, markPoints, markValues) { xborder = 20; gParameters[gNumParams] = new Parameter(pid, title, 24, vboxH-24, min, max, lineStyle, pointStyle, markPoints, markValues); var XYAXISSTYLE = "stroke:red;stroke-width:2;fill:none;"; <br /> <br /> // var gelem = svgdoc.createElement("g"); // gelem.setAttribute("id", "PARAMETER"+gNumParams); <br /> <br /> var gelem = svgdoc.getElementById("PARAMETER"+gNumParams); var pathelem = svgdoc.createElement("path"); pathelem.setAttribute("d", "M24,"+boxH); pathelem.setAttribute("style", lineStyle); gelem.appendChild(pathelem); <br /> <br /> var rootElem = svgdoc.getElementById("canvas"); if (gNumParams == 0) { var text_elem = svgdoc.createElement("text"); var text_node = svgdoc.createTextNode(title); // text_elem.setAttribute("id", "PRM"+name); text_elem.setAttribute("x", boxH/2); text_elem.setAttribute("y", boxH); text_elem.setAttribute("text-anchor", "middle"); text_elem.setAttribute("style", "stroke:black;stroke-width:0.01;fill:black;font-size:16"); text_elem.setAttribute("transform", "rotate(270,"+16+","+boxH+")"); text_elem.appendChild(text_node); rootElem.appendChild(text_elem); <br /> <br /> var path_elem = svgdoc.createElement("path"); path_elem.setAttribute("style", XYAXISSTYLE); path_elem.setAttribute("d", "M"+(vboxW-20)+","+boxH+" l"+ (-vboxW+24) +",0 m20,10 l0,"+(-boxH)); rootElem.appendChild(path_elem); <br /> <br /> text_elem = svgdoc.createElement("text"); text_elem.setAttribute("x", vboxW/2); text_elem.setAttribute("y", boxH+20); text_elem.setAttribute("text-anchor", "middle"); text_elem.setAttribute("style", "stroke:black;stroke-width:0.01;fill:black;font-size:16"); text_node = svgdoc.createTextNode("Time"); text_elem.appendChild(text_node); rootElem.appendChild(text_elem); <br /> <br /> text_elem = svgdoc.createElement("text"); text_node = svgdoc.createTextNode(min); text_elem.setAttribute("x", 4); text_elem.setAttribute("y", boxH + 24); text_elem.setAttribute("style", "stroke:black;stroke-width:0.01;fill:black;font-size:14;text-align:left"); text_elem.appendChild(text_node); rootElem.appendChild(text_elem); <br /> <br /> text_elem = svgdoc.createElement("text"); text_node = svgdoc.createTextNode(max); text_elem.setAttribute("x", 4); text_elem.setAttribute("y", 0); text_elem.setAttribute("style", "stroke:black;stroke-width:0.01;fill:black;font-size:14;text-align:left"); text_elem.appendChild(text_node); rootElem.appendChild(text_elem); } else { } gNumParams++; } <br /> <br /> function Opaque(s) { var p = s.split(';'); s = ""; for (var i = 0;i<p.length;i++) { if (p[i].indexOf('opacity') == -1) s += p[i] + ";"; } return s; } <br /> <br /> function MakeLegend() { var rootElem = svgdoc.getElementById("canvas"); <br /> <br /> r = svgdoc.createElement("g"); // r.setAttribute("transform","translate("+(vboxW-200)+",20)"); r.setAttribute("transform","translate(40,20)"); <br /> <br /> var rect = svgdoc.createElement("rect"); rect.setAttribute("width", 190); rect.setAttribute("height", gNumParams*20); rect.setAttribute("style", "stroke:black;stroke-width:0.01;fill:yellow;font-size:14;text-align:left;opacity:0.8"); r.appendChild(rect); <br /> <br /> for (i = 0; i < gNumParams; i++) { var path = svgdoc.createElement("path"); path.setAttribute("d", "M4,"+(10+i*20)+" l20,0"); path.setAttribute("style", Opaque(gParameters[i].lineStyle)); r.appendChild(path); <br /> <br /> var text = svgdoc.createElement("text"); text.setAttribute("x", 32); text.setAttribute("y", 14+i*20); text.setAttribute("style", "stroke:black;stroke-width:0.01;fill:black;font-size:11;text-align:left"); text.appendChild(svgdoc.createTextNode(gParameters[i].title)); r.appendChild(text); } rootElem.appendChild(r); } <br /> <br /> function SetParameterValue(name, value) { TimeElapsed(); } <br /> <br /> function TimeElapsed() { for (i=0;i<gNumParams;i++) { if (parseInt(Math.random()*100) % 100 == 0) { var range = (gParameters[i].max - gParameters[i].min); var v = Math.abs(Math.random()*range);//gParameters[i].min + gParameters[i].value = v/range; //window.status = v; } else { gParameters[i].value += Math.random() * 0.1 - 0.05; if (gParameters[i].value > 1) gParameters[i].value = 1; else if (gParameters[i].value < 0) { gParameters[i].value = 0; } } } //gParameters[0].value = 0; //gParameters[1].value = 0.5; UpdateGraphs(); timer = setTimeout('TimeElapsed()',1000/gSampleRate); } <br /> <br /> function UpdateGraphs() { for (i=0;i<gNumParams;i++) { var param = gParameters[i]; var sample = parseInt(param.sample); var dx = parseInt(param.x); var dy = parseInt(param.y); var dop = param.markPoints; var dov = param.markValues; gMasterScrolled = 0; dx += gStepSize; <br /> <br /> if (gHorScroll+dx>shiftLen) { gHorScroll -= gMasterScrollSize; var data = svgdoc.getElementById("DATA"); data.setAttribute("transform","translate(" + gHorScroll + ",0)"); gMasterScrolled = 1; } <br /> <br /> var data1 = svgdoc.getElementById("PARAMETER"+i); dy -= gParameters[i].value * boxH; <br /> <br /> var path = data1.firstChild.nextSibling; attr = path.getAttribute("d"); if (gHorScroll+dx>graphLen) { attr = newPath(attr); if (dop || dov) { obj = data1.firstChild.nextSibling.nextSibling; obj.parentNode.removeChild(obj); } if (dop && dov) { obj = data1.firstChild.nextSibling.nextSibling.nextSibling; obj.parentNode.removeChild(obj); } path = data1.firstChild.nextSibling; if (!gMasterScrolled && (dop || dov)) { var p = path.nextSibling; while (p) { if (dop && p.hasAttribute('cx')) { p.setAttribute('cx', p.getAttribute('cx')-gStepSize); } else if (dov && p.hasAttribute('x')) { p.setAttribute('cx', p.getAttribute('x')-gStepSize); } p = p.nextSibling; } } dx -= gStepSize; } path.setAttribute("d",attr+"L"+dx+","+dy); <br /> <br /> if (dop) { var pt1 = svgdoc.createElement("circle"); // pt1.setAttribute("id", "d1"+sample); pt1.setAttribute("style", param.pointStyle); pt1.setAttribute("cx", dx); pt1.setAttribute("cy", dy); pt1.setAttribute("r", 1.5); if (dov) { pt1.setAttribute("onmouseover", "a(evt)"); pt1.setAttribute("onmouseout", "b(evt)"); } data1.appendChild(pt1); } if (dov) { var txtdata = svgdoc.createTextNode(gParameters[i].value + " pizzas"); var text = svgdoc.createElement("text"); text.setAttribute("x", dx+2); text.setAttribute("y", dy); text.setAttribute("style", "stroke:black;stroke-width:0.01;fill:black;font-size:10;opacity:0"); text.appendChild(txtdata); data1.appendChild(text); } <br /> <br /> //alert(printNode(data1)); param.x = dx; param.sample = sample+1; } } <br /> <br /> function newPath(attr) { var p = attr.split('L'); if (gMasterScrolled) { attr = "M"+p[1]; for (var i = 2;i<p.length;i++) { attr = attr +"L"+p[i]; } } else { var xy = p[1].split(','); xy[0] -= gStepSize; attr = "M"+xy[0]+','+xy[1]; for (var i = 2;i<p.length;i++) { var xy = p[i].split(','); xy[0] -= gStepSize; attr = attr +"L"+xy[0]+','+xy[1]; } } //alert(attr); return attr; } <br /> <br /> // mouse_over_a function a(evt) { <br /> <br /> var id = evt.currentTarget.id; if (id!="") { var svgobj = svgdoc.getElementById(id); var svgstyle = svgobj.getStyle(); style = svgstyle.getPropertyValue('fill'); svgstyle.setProperty ('fill','yellow'); //alert(svgobj.firstChild.nodeName); svgstyle = svgobj.nextSibling.getStyle(); //alert(svgobj.firstChild.getAttribute('style')); svgstyle.setProperty ('opacity',1); //alert(svgobj.firstChild.getAttribute('style')); } <br /> <br /> } <br /> <br /> //mouse_out_b function b(evt) { var id = evt.currentTarget.id; var svgobj = svgdoc.getElementById(id); var svgstyle = svgobj.getStyle(); svgstyle.setProperty ('fill',style); <br /> <br /> svgstyle = svgobj.nextSibling.getStyle(); svgstyle.setProperty ('opacity',0); <br /> <br /> } <br /> <br /> //onclick function c(evt) { // only on left mouse button if (evt.getButton()==0) { target = evt.getTarget(); var id = target.id; var svgobj = svgdoc.getElementById("T"+id); var date = svgobj.getFirstChild().getNextSibling().getFirstChild().getData(); // if (dataWin4!=null) dataWin4.close(); // dataWin4 = window.open(servlet,"dataWindow4","width=300,height=400,left=0,top=0,scrollbars=yes,toolbar=yes, location=yes, menubar=yes,resizable=yes,status=yes"); } } <br /> <br /> ]]></script> </svg>

Tags