SVG Drawing Context

By default, GoJS renders to an HTML Canvas. This is more performant, especially with larger graphs, and is the right choice for most users. However, a few use-cases may require an SVG rendering context instead. Some examples:

Unless you have a specific use case in mind, usage of the default Canvas context is recommended instead. SVG renderer functionality is new and not yet fully supported, and SVG content is more susceptible to interference from other content on the site (such as CSS rules).

Note that GoJS also has SVG export, which a can be useful for generating static SVG diagrams or content for a PDF, and its usage is more common.

Enabling the SVG context is done by setting Diagram.renderer to 'svg':

  const diagram = new go.Diagram('myDiagramDiv', {
    renderer: 'svg'

Animated Gifs

Due to limitations in the HTML Canvas, gif frames beyond the first cannot be displayed. The SVG context avoids this problem, and will show gif animations:

// Using HTML Canvas, the gif cannot animate
  new go.Part("Vertical")
    .add(new go.Picture("./images/caffeine.gif", { width: 100, height: 100 }))
    .add(new go.TextBlock("caffeine")))

// Set the renderer to use SVG:
diagram.renderer = 'svg';
  new go.Part("Vertical")
    .add(new go.Picture("./images/caffeine.gif", { width: 100, height: 100 }))
    .add(new go.TextBlock("caffeine")))


The SVG context might improve accessibility for some screen readers, but there is no guarantee, and some applications may still need to provide more information, especially since any text not visible to the user will be removed from the DOM (eg, as a user pans or zooms).

The SVG Context functions by updating-as-needed the DOM inside of an <SVG> element. This can greatly impact page performance, which is why the SVG context is not recommended unless needed, but has the benefit of inserting all TextBlock text into the DOM under <text> tags.

The above caffeine GoJS Part is render on the screen using this SVG, inside of an <SVG> element:

<g transform="matrix(1, 0, 0, 1, 0, 0)">
  <image x="0" y="0" width="100" height="100" xlink:href="./images/caffeine.gif" preserveAspectRatio="none" transform="matrix(1, 0, 0, 1, 0, 0)"></image>
  <text x="0" y="10.55" style="font: 13px sans-serif" text-anchor="start" fill="black" transform="matrix(1, 0, 0, 1, 27.35, 100)">caffeine</text>


Since the SVG context renders SVG DOM nodes, text is selectable. However, GoJS by default captures all input, disabling events from reaching the SVG, in order to implement its own events. You can disable this event layer if you need to, allowing browser text selection of the underlying SVG:

  #myDiagramDiv {
    pointer-events: none;

Try selecting text and using the checkbox to toggle CSS pointer-events:

With pointer events disabled, you can select the text, but you can no longer interact with the diagram via touch or mouse. This may be useful in some applications where users are expected to select or copy text.