Chapter 10. Customization

Table of Contents

10.1. Define a custom shape catalog
10.2. Customize Edrawsvg color theme
10.3. Customize DRAW SVG UI
10.3.1. Introduction
10.3.2. The MVP pattern
10.3.3. The SVG viewing area
10.3.4. The application
10.3.5. The DRAWSVG engine
10.3.6. The drwapp sample application
10.3.7. Website integration

10.1. Define a custom shape catalog

Shape catalogs are generated by merging svg files into one file and exported to drawsvg editor with the custom shape catalog tool.

Shape catalog are saved in the local storage of the browser then reloaded from the local storage on each session.

Drawing's inserted shapes are free from the catalog with no link or trace.

There are two methods for creating a catalog:

  • Each svg document is append in the catalog as a symbol .

    In this case drawsvg will append the symbol from the catalog to the drawing and the shape instance will be created with a use element.

    The initial contents of the svg can not be modified, only style and transform can be applyed to it (as it is with the Font Awesome catalog).

    This is the simplest method for complex shapes such as emoji and when it has no sense to change them in the drawing.

  • Each svg document contents is append in the catalog with a group (g element) ,

    For this case, drawsvg will simply append the group and apply a transform to it.

    Each element of the initial contents can be modified (as it is with the arrows catalog).

    This method can be used to basic shapes.

SVG files should contains only drawing elements, they should not contains defs or style elements to prevent from style conflicts.

  • Select SVG files to build the catalog.

  • Configure parameters of the shape catalog generator,

  • Generate the catalog by merging svg files in one file.

  • Shape catalogs are svg files that you can save.

  • Clear your browser local storage to remove existing shape catalogs.

  • Export your catalog to drawsvg editor for each browser and device you use.

  • Catalog can be defined also by program with the JsChannel API.

Custom shape catalogs are stored inside the local storage of the browser to be re-used for each drawsvg editor session with the shape chooser dialog.

Custom catalogs are shown first in the top bar. User can define from one to four catalogs.

Catalog can be defined also by program with the JsChannel API. (see function setCustomShapeCatalog)

The generated svg files can also be loaded from the dialog.