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:

• Animated gifs: The SVG context can display animated gif content, unlike the default Canvas renderer.
• Accessibility: The SVG context creates DOM nodes with all currently-displayed text in the Diagram, which may be beneficial for screen readers. However diagram authors may want to export SVG for this use-case instead, especially, if they intend screen readers to know about contents that are off-screen by default.
• Selectability: When pointer events are turned off via CSS, users have the option of selecting text within GoJS TextBlocks.

Unless you have a specific use case in mind, usage of the default Canvas context is recommended instead. 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
diagram.add(
  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';
diagram.add(
  new go.Part("Vertical")
    .add(new go.Picture("./images/caffeine.gif", { width: 100, height: 100 }))
    .add(new go.TextBlock("caffeine")))

Accessibility

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>
</g>

Selectability

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:

  diagram.renderer = 'svg';
  // same as setting CSS "pointer-events: none;"
  diagram.div.style.pointerEvents = 'none';

  diagram.nodeTemplate =
    new go.Node("Auto")
    .add(new go.Shape("RoundedRectangle", { strokeWidth: 0, fill: "white" })
      .bind("fill", "color"))
    .add(new go.TextBlock(
      { margin: 8, font: "bold 14px sans-serif", stroke: '#333' })
      .bind("text", "key"));

  diagram.model = new go.GraphLinksModel(
    [
    { key: "Alpha", color: "lightblue" },
    { key: "Beta", color: "orange" },
    { key: "Gamma", color: "lightgreen" },
    { key: "Delta", color: "pink" }
    ],
    [
    { from: "Alpha", to: "Beta" },
    { from: "Alpha", to: "Gamma" },
    { from: "Beta", to: "Beta" },
    { from: "Gamma", to: "Delta" },
    { from: "Delta", to: "Alpha" }
    ]);
  document.getElementById('pointerToggle').addEventListener('click',
    () => {
      if (document.getElementById('pointerToggle').checked) {
        diagram.div.style.pointerEvents = 'none';
      } else {
        diagram.div.style.pointerEvents = 'auto';
      }
    });

pointer-events: none

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.