We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Server-side SVG generation using PhantomJS

Platform: ASP.NET MVC (Classic) |
Control: Diagram |
Published Date: December 31, 2014 |
Last Revised Date: May 30, 2019

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:

  1. PhantomJS generates SVG at a faster rate.
  2. Generate Diagram, SVG, in server-side.
  3. HTTP request and response is quick in server-side.
  4. 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:

  1. You need to run the PhantomJS every time you want to render SVG, when you do any changes in your Diagram.
  2. More suited for read-only Diagram.
  3. Concurrency issue may have to be handled, when there are multiple requests.

 

 

ADD COMMENT
You must log in to leave a comment
Comments
MOHAN T
Nov 22, 2016
















































Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon