How to merge multiple SVG's into one combined SVG using ReactJS

React
1

Hi, I am working on combining SVG images into one combined SVG image using ReactJS. I have done lot of research in fact spent so many days in figuring out solution for this problem.

I have checked NodeJS sharp library as well to solve this issue. I know you must be wondering why I am checking NodeJS because I am looking for solution related to ReactJS. I was checking that because my frontend is in ReactJS but my backend is in NodeJS so I thought If I couldn’t achieve this in ReactJS then I should try to do same in NodeJS. But I found that sharp library can take input as SVG but not providing output in SVG.

Actually I am using npm package merge-images to create combined image. In this I am passing multiple SVG’s and getting output in PNG format as combined image. I am giving my code for reference.

import mergeImages from ‘merge-images’;
const Avatar = (props) => {
const [src, setSrc] = useState(‘’);
useEffect(() => {
let filteredArray = [
{ “name”: “skintone”,“src”: “…/images/skintone.svg”},
{ “name”: “face”,“src”: “…/images/face.svg”},
{ “name”: “hair”,“src”: “…/images/hair.svg”}
];
mergeImages(filteredArray)
.then(src => {
//this src is the base64 encoded data of image in PNG format
console.log(‘base64 string’, src);
setSrc(src);
})
.catch(err => {
console.log(‘Error’, err)
});
});

return (
	{src ? <div><image src={src} /></div> : <div><p>Image Loading....</p></div>}
)

}

Above code giving image in PNG format.But I wanted output image in SVG format. So I tried passing MIME format as a parameter like as follows

mergeImages(filteredArray, {format: ‘image/svg+xml’})
.then(src => {
//this src is the base64 encoded data of image in PNG format
console.log(‘base64 string’, src);
setSrc(src);
})
.catch(err => {
console.log(‘Error’, err)
});

But above code also giving output image in PNG format.

Please help me in getting output image in SVG format. If possible suggest me any other library through which I can convert combined image in SVG format.

Thanks in advance.

2

Isn’t the content of an SVG file just XML text describing the mathematical description of the lines and points? If I understand correctly, you should either be able to concatenate the two files together or just parse them both and combine the parts that actually draw stuff (assuming there might be some header information in the files that cannot be repeated).

If you can show an example of the inputs you are taking and the expected output manually I think we can figure something out here.