Step 1/12 — 01 Create A Rectangle
01 Create A Rectangle 02 Create A Custom Shape 03 Render Performance 04 Making the Style Configurable 05 Data from Tag 06 Rendering Text 07 Hit-Testing 08 Edge Cropping 09 Item Visibility 10 Render Boundaries 11 Group Node Style 12 Group Node Style Behavior
02 Create A Custom Shape

# Custom node visualizations

yFiles for HTML comes with a lot of predefined item visualizations and lots of different shapes for nodes. However, in some cases, it is required to create fully custom visualizations based on SVG. This might be the case if you need shapes that are not available out-of-the-box or domain-specific node visualizations. Also, the rendering of custom visualizations can be optimized for performance-critical applications.

This tutorial will guide you through creating your own node visualizations for yFiles for HTML with SVG.

Note | Implementing a custom node style from scratch is an advanced concept. In a lot of cases, other approaches like template styles, or decorating built-in styles with custom elements are sufficient. For more information on the topic of styling graph items, please have a look at Node Styles.

## Subclassing NodeStyleBase

yFiles for HTML provides an abstract base class which provides the basic functionality to create a custom node style. We start with a custom subclass of NodeStyleBase.

    class CustomNodeStyle extends NodeStyleBase {
      protected createVisual(context: IRenderContext, node: INode): Visual | null {
        return null // TODO - create the SVG element
      }
    }

This code will not produce anything visible, yet. We first have to implement the `createVisual` method. This method returns an SVG element, wrapped into an SvgVisual. Let’s start with a simple rectangle for now to keep things simple. We will switch to a more complex visualization later on.

    protected createVisual(context: IRenderContext, node: INode): Visual | null {
      const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
      const { x, y, width, height } = node.layout
      rect.setAttribute('x', String(x))
      rect.setAttribute('y', String(y))
      rect.setAttribute('width', String(width))
      rect.setAttribute('height', String(height))
      rect.setAttribute('fill', 'red')
      rect.setAttribute('stroke', '#042d37')
      return new SvgVisual(rect)
    }

Note | The SVG element returned in `createVisual` does not necessarily have to be created using the JavaScript DOM API. You could also create it using any JavaScript UI framework or API like React, Vue, etc.

Creating a visualization in SVG often includes a lot of SVG DOM manipulation. The code above uses setAttribute to move and resize the visualization according to the position and the size of the node. There are alternatives, such as modifying those values directly via the JavaScript API for certain SVG elements. Not all attributes can be set that way and, e.g., colors will still require `setAttribute` calls:

    rect.x.baseVal.value = x
    rect.y.baseVal.value = y
    rect.width.baseVal.value = width
    rect.height.baseVal.value = height

Note | It’s important that SvgVisual contains an SVG element in the 'http://www.w3.org/2000/svg' namespace. HTML elements are not supported.

02 Create A Custom Shape