New Shape

App.component.html 

<ejs-diagram #diagram id="diagram" width="100%" height="700px" [nodes]="nodes">  

                </ejs-diagram> 

App.component.ts 

//define nodes collection 

   public nodes: NodeModel[] = [ 

     //create SVG node 

     { 

          id: 'SVGNode', 

          width: 100, 

          height: 100, 

          offsetX: 200, 

          offsetY: 200, 

          shape: { 

            //set type as native 

             type: 'Native', 

             // define SVG content as a tring 

            content: '<svg height="150" width="400"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /><stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /></linearGradient></defs><ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /></svg>' 

        }, 

     } 

   ] 

      <ejs-symbolpalette id="symbolpalette" [palettes]='palettes' width="100%" height="200px" [getSymbolInfo]="getSymbolInfo" [symbolHeight]=80 [symbolWidth]=120> 

            </ejs-symbolpalette> 

 

public getSymbolInfo(symbol: NodeModel): SymbolInfo {   

  // display text for palette item 

    return { description: { text: symbol.id }, fit: true }; 

}