Server-side SVG generation using PhantomJS
What is PhantomJS?
PhantomJS is a command-line tool that generates HTML from a specified URL, without the help of any browser or rendering. Since rendering is not involved, the resultant HTML is generated very quickly.
Why PhantomJS?
When scripts related to Diagram are running in the browser, SVG, that is DOM elements, are generated and appended in the corresponding div element. Diagram generated using PhantomJS generates this SVG much faster as rendering is not involved. By generating this SVG in server-side, HTTP request and response time are saved. You can also cache the generated SVG and reuse it for multiple requests.
Performance Benefits:
- PhantomJS generates SVG at a faster rate.
- Generate Diagram, SVG, in server-side.
- HTTP request and response is quick in server-side.
- Generated SVG can be cached and reused for multiple requests.
The following steps are to help you to apply this to render Diagram.
You can generate SVG using PhantomJS in a Command prompt and MVC application. Used here is an MVC application where the command is executed that saves SVG onto the server using PhantomJS.
C#
ExecuteCommand(string.Format("cd {0} & phantomjs Scriptfile.js>FileName.svg", path));
Scriptfile.js- In this file, when you mention a URL to the page.Open function, it loads the URL and converts it into SVG.
Filename.svg- Defines the name for the generated SVG file.
JS
Scriptfile.js
var page = require('webpage').create();
var svgDrawer = function () {
var html = document.createElement("HTML");
var svgContainer = document.getElementById("FlatDiagram_svg");
svgContainer.setAttributeNS('http://www.w3.org/2000/svg', 'xmlns', 'http://www.w3.org/2000/svg');
html.appendChild(svgContainer);
var diagram = $find("FlatDiagram");
var Jsonstring= JSON.stringify({ nodes: diagram._Nodes, connector: diagram._Connectors });
var Createsvg = document.createElement("svg");
Createsvg.setAttributeNS('http://www.w3.org/2000/svg', 'xmlns', 'http://www.w3.org/2000/svg');
Createsvg.style.display = "none";
Createsvg.setAttribute("id", "nodesandconnectors");
Createsvg.innerHTML = Jsonstring;
html.appendChild(Createsvg);
return html.outerHTML;
};
page.open('http://mvc.syncfusion.com/demos/ui/diagram/GettingStarted/FlatDiagram', function (status) {
console.log(page.evaluate(svgDrawer));
phantom.exit();
});
You can read the generated SVG in server-side and send it to client-side.
C#
var Filecontent = System.IO.File.ReadAllText(FilePath); return Content(Filecontent);
In client-side, the SVG from the server is directly appended into client-side DOM and you can hook events to SVG to enable client-side interaction.
JS
var origDiagram = document.getElementById ("DiagramMVC_svg");
for (var i = origDiagram.childNodes.length-1; i > 0; i--) {
if (origDiagram.childNodes[i])
origDiagram.removeChild(origDiagram.childNodes[i]);
}
var newChildren = document.getElementById ("testing").getElementsByTagName("svg")[0].childNodes;
for (var j = newChildren.length - 1; j > 0; j--) {
origDiagram.appendChild (newChildren[j]);
}
var diagram = $find ("DiagramMVC");
var Jsonparse= JSON.parse (document.getElementById("nodesandconnectors").textContent);
diagram._Nodes = Jsonparse.nodes;
diagram._Connectors = Jsonparse.connector;
diagram._NodeScript._Nodes = Jsonparse.nodes;
diagram._NodeScript._LineScript._Connectors = Jsonparse.connector;
}
You can save the generated SVG into the cache and load the same SVG whenever you require it.
The following code illustrates how to save the generated SVG into the cache.
C#
var Filecontents = System.IO.File.ReadAllText(cachedFilePath); //set object to cache HttpContext.Cache.Insert(FlatDiagram, fileContents);
The following code illustrates how to retrieve the SVG from the cache.
C#
HttpContext.Cache.Get(FlatDiagram)
Drawbacks:
- You need to run the PhantomJS every time you want to render SVG, when you do any changes in your Diagram.
- More suited for read-only Diagram.
- Concurrency issue may have to be handled, when there are multiple requests.
