How to load SVG file into JavaScript Diagram?

Syncfusion® JavaScript Diagram provides support to embed SVG element into a node. The shape property of node allows you to set the type of node. To create a native node, it should be set as Native. The following code illustrates how a native node is created.

let node= [{
  offsetX: 250,
  offsetY: 250,
  // Size of the node
  width: 100,
  height: 100,
  //sets the type of the shape as Native
  shape: {
      type: 'Native',
      content: '<svg><polygon points=\"100,10 40,198 190,78 10,78 160,198\" fill=\"#f9c601\" /></svg>'
  },
}]; 

SVG is advantageous for its scalability, vector-based nature, and support for interactivity, making it an ideal choice for creating Native type nodes.

SVG data can be imported and converted into nodes using regex, simplifying integration into diagrams. Regex parses the SVG, extracting details for node creation, enhancing content incorporation. To import an SVG file into a diagram, we can utilize an uploader component for rendering and uploading SVG files.

// Initialize the uploader component
var uploadObj = new ej.inputs.Uploader({
 asyncSettings: {
   saveUrl:
     'https://services.syncfusion.com/js/production/api/FileUploader/Save',
   removeUrl:
     'https://services.syncfusion.com/js/production/api/FileUploader/Remove',
 },
 removing: onFileRemove,
 dropArea: dropElement,
 success: onSuccess,
});
uploadObj.appendTo('#fileupload');

To Import SVG File:

By utilizing the uploader component, we can select and upload the required SVG file. Upon successful upload, the SVG content is parsed using regex to identify specific elements like rect, circle, polygon, etc. These elements are then converted into native nodes and added to the diagram using the add method of the diagram.

//To handle file upload success.
function onSuccess(args) {
 var file1 = args.file;
 var file = file1.rawFile;
 var reader = new FileReader();

 reader.addEventListener('load', function (event) {
   var shape;
   var svgTags = event.target.result;
   const svgRegex = /<(rect|circle|ellipse|polygon|path)\s+.*?\/>/g;
   const svgArray = svgTags.match(svgRegex);
   console.log(svgArray);
   let offsetx = 100;
   diagram.clear();
   if (svgArray.length > 0) {
     for (let i = 0; i < svgArray.length; i++) {
       let shapeContent = svgArray[i];

       shape = {
         id: 'native' + i.toString(),
         shape: {
           type: 'Native',
           content: '<svg>' + shapeContent + '</svg>',
         },
         offsetX: offsetx,
         offsetY: 150,
         height: 75,
         width: 75,
       };
       diagram.add(shape);
       offsetx += 80;
     }
   }
 });
 reader.readAsText(file);
 uploadObj.clearAll();
}

An example SVG file is attached for reference. It can be imported into the diagram using the provided sample.

Sample:

Click here for sample

Conclusion
I hope you enjoyed learning about how to load SVG file into JavaScript Diagram.

You can refer to our JavaScript Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Diagram example to understand how to create and manipulate data.
​
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
​
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!