# Plugins

By default, gySVG includes a few plugins to extend the standard functionality defined with features that are useful in some cases, but not in others, so it doesn't make sense to include it as part of the base functionality.

Plugins are loaded via import and must be submitted to gySVG via the gySVG.extend(plugin) method. In this way, the plugin inserts the methods and features into the library.

The plugins included as part of the gySVG are described below. Further down in this section, you can read how to build your plugins.

# plugin: resizeObserver()

This plugin is loaded with:

import gySVG          from "https://cdn.graphery.online/0.1.5/svg/module/index.js";
import resizeObserver from "https://cdn.graphery.online/0.1.5/svg/module/resize-observer.plugin.js";
gySVG.extend (resizeObserver);

A new .resizeObserve() method is added to all gySVG objects, with this method you can observe the size change with a simple call. This call receives the reference of the svg object, the current getScreenCTM() returns value and the initial .getScreenCTM() returns value (without resizing). These values have a matrix that represents the array that transforms the coordinate system of the current element into the coordinate system of the SVG display port, in other words, they are the values of the SVG element transformation.

# plugin: keepAspect()

This plugin is loaded with

import gySVG      from 'https://cdn.graphery.online/0.1.5/svg/module/index.js';
import keepAspect from 'https://cdn.graphery.online/0.1.5/svg/module/keep-aspect.plugin.js';
gySVG.extend (keepAspect);'

A new .keepAspect() method is added to line and text object. This method allows keeping the initial size and proportion to a line (especially the stroke value) and a text (font height and width).

When the SVG is resized, the line element keeps the stroke dimension referred to the initial viewBox. The line length change with the new dimensions.

The text element keeps the initial height and width. As a result, the text keeps its aspect. The text is displayed in a new position, but with same size.

# plugin: debug

When we create a wrong element or call a wrong method in gySVG this error will be managed silently by the library. This plugin debug visualizes possible errors and can visualize the calls that are being made to the library. When this is loaded, a new gySVG.debugLevel() method is available, and we can define with it the level of debugging of messages sent to the console:

  • gySVG.DEBUG_NONE - no messages.
  • gySVG.DEBUG_ERROR - display only error messages.
  • gySVG.DEBUG_WARNING - display only error and warning messages.
  • gySVG.DEBUG_ALL - display all messages
import gySVG from 'https://cdn.graphery.online/0.1.5/svg/module/index.js';
import debug from 'https://cdn.graphery.online/0.1.5/svg/module/debug.plugin.js';
gySVG.extend (debug);
gySVG.debugLevel (gySVG.DEBUG_ALL);

# Create your custom plugins

If you need to add new features to gySVG this is possible using the gySVG.extend() method for adding new capacities for all SVG wrapper objects. It's straightforward to use this extension way and create new custom plugins.

For new plugins, you can use this simple scaffolding as a base for your code.

export default function plugin (gySVG, gySVGObject) {
  Object.assign(gySVG, {
    // add new gySVG static methods
    method() {
      return this;
  Object.assign(gySVGObject.prototype, {
    // add new gySVGWrapper methods
    method() {
      return this;

The plugin function is called when the plugin is load with gySVG.extend( plugin ). This function can add the new features to the gySVG object and the SVG Wrapper object gySVGObject.

import gySVG from 'https://cdn.graphery.online/0.1.5/svg/module/index.js';
function plugin (gySVG, gySVGObject) {
  Object.assign(gySVGObject.prototype, {
    check() {
      this.el.setAttribute('checked', '');
      return this;
    uncheck() {
      return this;

Notice: This plugin is not useful and is only included here to illustrate how these extensions work.


Please, check the return for every method. Only if you return this the chain of methods is possible. If you omit this return, it is not possible to call other methods after these calls.