Use SVG to draw 2D graphics. A <svg> element is created in the container.

SVG has the unique advantage of relying directly on the browser's ability to render text. It is also possible to embed HTML fragments via <foreignObject>.

Usage

As with @antv/g, there are two ways to use it.

NPM Module

After installing @antv/g-svg you can get the renderer from.

import { Canvas } from '@antv/g';
import { Renderer } from '@antv/g-svg';

const svgRenderer = new Renderer();

const canvas = new Canvas({
    container: 'container',
    width: 600,
    height: 500,
    renderer: svgRenderer,
});

CDN

<script
  src="https://unpkg.com/@antv/g-svg/dist/index.umd.min.js"
  type="application/javascript">

The renderer is available from the G.SVG namespace under.

const svgRenderer = new window.G.SVG.Renderer();

Initial Configuration

When creating a renderer, you can pass in some initialization configuration items, such as.

import { Renderer } from '@antv/g-svg';
const renderer = new Renderer({
    outputSVGElementId: false,
});

outputSVGElementId

The renderer adds the id attribute when generating the SVGElement, which is used to pick up the decision to counter-check the element when interacting. However, in scenarios like server-side rendering, where there is no interaction and no need for generation, this can be turned off with this configuration item.

<!-- Enable by default -->
<g id="g_svg_g_450" fill="none"></g>

<!-- Disable -->
<g fill="none"></g>

Built-in plug-ins

The renderer has the following plug-ins built in.

• g-plugin-svg-renderer Draw shapes using SVG elements, such as <circle>, <rect>, etc.
• g-plugin-svg-picker Pick up graphics based on elementFromPoint DOM API
• g-plugin-dom-interaction DOM API-based event binding

Optional plug-ins

In addition to the built-in plug-ins, the following optional plug-ins are available.

Hand-drawn style rendering

Use the SVG version of rough.js for hand-drawn style rendering.

We provide g-plugin-rough-svg-renderer plugin, which will replace [g-plugin-svg-renderer](/en/plugins/svg- renderer) for some 2D graphics.

The effect of example is as follows.

Server-side rendering

The renderer relies on the rendering capabilities of the SVG DOM API and is not limited to the browser side, so server-side rendering is also possible using JSDOM.

In our integration test, we will work with JSDOM on the Node side jsdom) with node-canvas to render the result image and compare it with the benchmark image. Other server-side rendering scenes can also follow the following steps.

1. Use unregisterPlugin to unregister the DOM API-related plugins built into g-svg, such as the event binding g-plugin-dom-interaction.
2. Create a canvas container using JSDOM.
3. Use the container from the previous step to create the canvas, and pass in the document created by JSDOM instead of window.document in the browser environment, and the same for raf.
4. Normal use of g-svg renderer to create scenes via G's API.
5. Use xmlserializer to serialize JSDOM to a string and save it as an SVG image.

https://github.com/antvis/g/blob/next/integration/__node__tests__/svg/circle.spec.js

const fs = require('fs');
const { JSDOM } = require('jsdom');
const xmlserializer = require('xmlserializer');
const { Circle, Canvas } = require('@antv/g');
const { Renderer } = require('@antv/g-svg');

// create a renderer, unregister plugin relative to DOM
const renderer = new Renderer();
const domInteractionPlugin = renderer.getPlugin('dom-interaction');
renderer.unregisterPlugin(domInteractionPlugin);

// create JSDOM
const dom = new JSDOM(`
<div id="container">
</div>
`);

const SIZE = 200;
const canvas = new Canvas({
    container: 'container',
    width: SIZE,
    height: SIZE,
    renderer,
    document: dom.window.document, // use document created by JSDOM
    requestAnimationFrame: dom.window.requestAnimationFrame,
    cancelAnimationFrame: dom.window.cancelAnimationFrame,
});

// use G API constructing scene graph
const circle1 = new Circle({
    style: {
        cx: 10,
        cy: 10,
        r: 10,
        fill: 'red',
    },
});
canvas.appendChild(circle1);

// serialize JSDOM to SVG string
xmlserializer.serializeToString(
    dom.window.document.getElementById('container').children[0],
);