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

Symbol palette item: image


Do we have the possibility to add custom images in the symbol palette?

If I insert an image on the diagram, and then do 'add symbol to active pallet' and afterwards export the palette, it gives me an error: The given key was not present in the dictionary

Is their another way to create palette items that are images?



4 Replies

TO Tom March 26, 2014 02:48 PM UTC

Ok I managed to create an Image on the palette with following code:

Node bla = new Node();

bla.Shape = Shapes.Image;

bla.Name = "facebook";

Image image = Image.FromFile(context.Server.MapPath("~/Images/facebook.png"));

using (MemoryStream stream = new MemoryStream())





// Save image to stream.

image.Save(stream, ImageFormat.Png);

Bitmap test = new Bitmap(stream);



bla.Image = test;





But now the problem is, when I add the image to the diagram and export it to png or jpg, the diagram is empty (even the gridlines are gone)

SG Shyam G Syncfusion Team March 28, 2014 05:17 AM UTC

Hi Tom,

Thanks for using Syncfusion product.

 Currently we don’t have support to export custom image in JPG,PNG,BMP format.we are using third party library canvg.js  to export Diagram in JPG,PNG,BMP format and it doesn't have support to export custom embedded images.

 Please let me know if any concerns,


Shyam G


MD Manuel Dávila May 25, 2020 11:38 AM UTC

Manuel Davila


I am trying to export a Diagram with a background image in ReactJS, with the following options:

const exportOptions = {
      mode: 'Data',
      fileName: 'Export',
      format: 'JPG',
      stretch: 'Stretch',
    const dataImg = diagramInstance.exportDiagram (exportOptions);

    return dataImg.replace ('data: image / png; base64,', '');

Attachment: ImagebackgroundDiagram_7799d876.zip

AR Aravind Ravi Syncfusion Team May 26, 2020 02:19 PM UTC

Hi Manuel, 

Could you please confirm for us that if you use any image nodes or apply any CSS to the node in the diagram. If you apply any CSS to the nodes means we do not have support to export the diagram with the CSS that you used in the sample. By default, in the diagram, we have rendered all the diagram elements in the new canvas and export that canvas as an image element. It does not have support to export the diagram with custom CSS. 

So please share with us a code snippet of which type of node used in diagram and details about CSS used in diagram or simple sample illustrating the issue which would help us to proceed further. 

Aravind Ravi 

Live Chat Icon For mobile
Up arrow icon