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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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:

  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#

 

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

You can read the generated SVG in server-side and send it to client-side.

C#

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

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#

The following code illustrates how to retrieve the SVG from the cache.

C#

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.

 

 

Article ID: Published Date: Last Revised Date: Platform: Control:
3066 12/31/2014 12/31/2014 ASP.NET MVC (Classic) Diagram
Did you find this information helpful?
Comments
MOHAN T Nov 22, 2016
















































Reply
Add Comment
You must log in to leave a comment

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