Farbic.js: Is there any way to save url instead of paths of svg image in the Json generated by JSON.stringify(canvas)?

Question

I'm trying to save fabric.js canvas to the server, but I got a lot of svg images. I loaded them from URL (fabric.loadSVGFromURL). When I use JSON.stringify(this.canvas), it saves the paths of the svg images into a Json. If I saved all the paths of them, the Json file will be too large, so I'm wondering if there is anyway that I can save only the url src of these SVG images (also I need to be able to load them to the canvas as well).

Thanks a lot!

Answer 1

If you don't need to change paths of svg you can just use svg as image. It will work like this:

const canvas = new fabric.Canvas("c", { width: 600, height: 600 });

fabric.Image.fromURL("https://svgsilh.com/svg/309620.svg", (img) => {
  img.scaleToWidth(200);
  canvas.add(img);
  console.log(canvas.toJSON());
});