drawsvg iconDRAWSVG user's guide

13.5. Customize DRAW SVG UI

13.5.1. Introduction
13.5.2. The MVP pattern
13.5.3. The SVG viewing area
13.5.4. The application
13.5.5. The DRAWSVG engine
13.5.6. The drwapp sample application
13.5.7. Website integration

13.5.1. Introduction

This chapter is intended for developers to create a personalized application for the DRAWSVG editor.

This developpement requires the Edrawsvg distribution

To download Edrawsvg, you should request a registered API Key .

See this sample of customized application.

13.5.2. The MVP pattern

DRAWSVG editor is designed on the MVP (Model View Presenter) .

The application is structured with logical views that interact with the SVG document through presenters.

Each view has a given presenter and is responsible to update its UI objects. Presenters does-not seen UI objects.

The structure of views and UI objects (buttons, inputs, labels,..) is full free of choices.

Drawsvg has 12 views and corresponding presenters

Table 13.1. DRAWSVG views and presenters


Document view

Shows and run document management tasks


Navigation view

Shows and run viewing actions (zoom in/out, pan,..)


Selection view

Shows selection and run available presenter's tasks on selected elements


Edit view

Shows and run (select, undo, redo) tasks


Stoke view

Shows and modify the stroke style properties of the selected element.


Fill view

Shows and modify the fill style properties of the selected element.


Text style view

Shows and modify the text style properties of the selected element.


Marker style view

Shows and modify the marker style properties of the selected element.


Elements view

Shows and run tasks to draw basic elements.


Shapes view

Shows and run shape drawing tasks.


Controls view

Shows and run controls drawing tasks.


Layer view

Shows and run layers tasks.


See the full API

By default UI objects of actions that depends on the selection should be disabled . Presenters send instructions to enable or disable UI when depends of the selection.

Implementation of views by the application can be fully , partially or not exist .


Each view and presenter are specified by a java interface because DRAW SVG kernel is written in java based on GWT framwork.

13.5.3. The SVG viewing area

The SVG viewing area is defined by the application and is specified by the SVG view interface.

This view has no presenter and is responsible to:

  • give the div element where to insert the svg engine window,

  • indicates whether this area is scrollable, if not the SVG document is scaled to fully covers the area, otherwhile it is displayed with its real size.

  • give the maximun SVG viewing area size.

Implementation of the SVG viewing area must be fully .

13.5.4. The application

The application is implemented as a javascript object that gives the views as specified by its ISVGEngineApp interface.

The object application make the glue between the UI objects and views.

The application object is informed by the method onSVGEngineLoad when the application is ready to use.

The application javascript object must be registered as a global variable of the window under the name svgEngineApp to be identified by the engine.

Implementation of the application can be fully or partially .

          // The SVG Engine application, implements ISVGEngineApp
var drwApp = {};

// Notify SVG engine ready
drwApp.onSVGEngineLoad = 
          (engine) {
	console.log("drwApp.onSVGEngineLoad engine="+engine);

// SVG view implements ISVGView (required)
drwApp.svgView = {
	// the svg window div element
	getSVGWindowContainer : 
          () {
		return document.getElementById("svgwindow");
	// The maximun sgv size
	getSVGMaxPixelSize : 
          () {
		console.log("drwApp.svgView.getSVGMaxPixelSize ");
		let w = document.getElementById("svgwindow");
		console.log("drwApp.svgView.getSVGMaxPixelSize "+w.clientWidth);
		return {width:w.clientWidth ,height:460};
	// Setting the svg area size
	setSVGPixelSize : 
          (sz) {
	// Indicates whether the visualization container has scrollbars.
	hasScrollbars : 
          () {
		return false;
drwApp.getSVGView = 
          () {return drwApp.svgView;};

// implements views ....

// Register drwApp as svgEngineApp


13.5.5. The DRAWSVG engine

The DRAWSVG engine is the controller, it detains view presenters and is visible from the application through its client API once ready.

The engine is automatically loaded on website startup:

  • It load presenters,

  • It find the object application,

  • Inserts the SVG window widget with a default empty SVG document inside the div element given by the application,

  • Calls the application onSVGEngineLoad when ready to use.

13.5.6. The drwapp sample application

The drwapp sample application must be understand as a quick start to explain how to develop a DRAWSVG custom application.

Its UI should be replaced by a custom one based on different choices.

Its javascript file can be duplicated to be adapted. It contents all the necessary objects and methods to implements.

Not desired implemented methods or views can be removed or leave empty.

13.5.7. Website integration

To integration the application inside a website and to interact with it use the JsChannel API in the same way for edrawsvg within a iframe (see chapter integration ).

Insert the application within an iframe with the ' jsChannel ' entry and key parameter like this:

<iframe id="drawsvg" src="drwapp.html#jsChannel:key=yourKey"></iframe>

See demo of jsChannel drwapp integration