How to load SVG file into React Diagram?

Syncfusion® React 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.

<div className="upload_wrapper">
   <UploaderComponent
     id="defaultfileupload"
     ref={(defaultfileupload) =>
       (fileUploadInstance = defaultfileupload)
     }
     type="file"
     asyncSettings={asyncSettings}
     removing={onRemoveFile.bind(this)}
     success={onSuccess}
   ></UploaderComponent>
</div>

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) {
   let diagram = diagramInstance;
   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 = /<svg\s+[^>]*>[\s\S]*?<\/svg>/gi;
     const svgRegex = /<(rect|circle|ellipse|polygon|path)\s+.*?\/>/g;
     const svgArray = svgTags.match(svgRegex);
     let offsetx = 100;
     diagram.clear();
     if (svgArray.length > 0) {
       for (let i = 0; i < svgArray.length; i++) {
         let shapeContent = svgArray[i];

         shape = {
           id: 'newflow' + 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);
   let updaloadObj = fileUploadInstance;
   updaloadObj.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 React Diagram.

You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentations. You can also explore our React Diagram example to understand how to present 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 React Spreadsheet and other components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!