Skip to content
  1. Examples
  2. Image exports

SVG

This example shows how to export the visualisation as an SVG file. It uses the SVG export API.

ts
import Ogma from '@linkurious/ogma';

const ogma = new Ogma({
  container: 'graph-container'
});

ogma.styles.addRule({
  edgeAttributes: {
    text: {
      content: 'Edge',
      backgroundColor: 'darkorange',
      minVisibleSize: 0
    }
  },
  nodeAttributes: {
    text: {
      content: 'Node',
      backgroundColor: 'pink'
    },
    badges: {
      topRight: {
        text: 'B'
      }
    }
  }
});

ogma.generate
  .random({ nodes: 3, edges: 4 })
  .then(g => ogma.setGraph(g))
  .then(() => ogma.view.locateGraph())
  .then(() =>
    ogma.export.svg({
      download: false,
      groupSemantically: false
    })
  )
  .then(svg => {
    const div = document.createElement('div');
    div.innerHTML = svg;
    document.body.appendChild(div);
  });
html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="graph-container"></div>
    <hr />
    <span class="arrow">&darr;</span>
    <br />
    <script type="module" src="index.ts"></script>
  </body>
</html>
css
#graph-container,
svg {
  height: 300px;
}

body {
  text-align: center;
}

.arrow {
  margin-top: -1.5em;
  display: inline-block;
  position: absolute;
  padding: 0.5em;
  background: white;
}