We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

New Shape


I'm considering to buy this library for create a new application web with diagrams. But we need to know if it's possible create new shapes from png or svg files, and how we do this, if the support of Syncfusion will do that and incorporate our new shape or if there is an example for do this requirement.


7 Replies

SG Shyam G Syncfusion Team September 9, 2019 04:47 AM UTC

Hi Victor, 

Yes, we can create a native node in diagram to achieve your requirement.  You can set SVG content as a string to node shape content property and set type as Native. Please refer to a code example and sample below. 

Code example: 

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


//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>' 

Please let us know if any concerns. 

Shyam G 

VM Víctor Manuel Calle Sánchez September 10, 2019 07:24 AM UTC


We had probed that example, but we have a problem yet. The connectors don't reach the edge of the shape from a SVG, like the example image that I attach. 

We want that the connector to "stick" to the edge of the ellipse, and not to the square of dashed lines.


Attachment: image_68a34656.zip

SG Shyam G Syncfusion Team September 11, 2019 09:11 AM UTC

Hi Victor, 
The SVG content may vary for a native node so we couldn't locate a precise docking in it. So only rectangle boundaries are considered for native (SVG content) nodes and docking happens based on it. It's our diagram control's default behavior. You can use our Basic Shape ellipse node if we need a connector to dock to an ellipse edge. Please refer to the following sample. 
Shyam G 

VM Víctor Manuel Calle Sánchez September 11, 2019 09:19 AM UTC


Specifically, we need to incorporate this shapes to the palette and use them in the creation of diagrams, and we want that the connector edges to the shape.


Attachment: images_64295b0f.zip

SG Shyam G Syncfusion Team September 12, 2019 06:08 AM UTC

Hi Victor, 
We have rendered the shapes displayed in your image as a path node in the diagram. Please refer to a sample and help documentation below. 
Shyam G 

VM Víctor Manuel Calle Sánchez September 12, 2019 06:52 AM UTC


Thank you so much!

We need a last requirement. Is it possible to set a custom text to the shapes in the palette? For example, the text "Event" we want that appears  in its symbol on the palette too.


SG Shyam G Syncfusion Team September 12, 2019 08:53 AM UTC

Hi Victor, 
To display text to shapes in symbol palette, please use the description property in the getSymbolInfo function as shown in the below code example. 
Code example: 
      <ejs-symbolpalette id="symbolpalette" [palettes]='palettes' width="100%" height="200px" [getSymbolInfo]="getSymbolInfo" [symbolHeight]=80 [symbolWidth]=120> 
public getSymbolInfo(symbol: NodeModel): SymbolInfo {   
  // display text for palette item 
    return { description: { text: symbol.id }, fit: true }; 
Shyam G 

Live Chat Icon For mobile
Up arrow icon