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.
Selectability: When pointer events are turned off via CSS, users have the option of selecting text within TextBlocks.
Testing: Test code can examine the SVG DOM to determine the visual state of the diagram. However the SVG DOM might not include Parts that are outside of the viewport.

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 SVG rendering of the viewport 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 image 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")))

Content Security Policy

Rendering SVG requires dynamically creating, modifying, and deleting SVG DOM elements. If your app must run on a server with a Content Security Policy, you will need to allow rendering SVG DOM.

This is an example of a policy directive that is restrictive to only allow same-origin sources but still allows SVG to be rendered:


  Content-Security-Policy: default-src 'self'; style-src-attr 'self' 'unsafe-inline'

If the browsers that you need to operate on might not support the style-src-attr directive, you can use the less restrictive "style-src" directive:


  Content-Security-Policy: default-src 'self'; style-src 'self' 'unsafe-inline'