I want to upload individually all the elements in my svg into to my canvas.
you can see in the console [screenshot of the console(https://i.sstatic.net/Yj3SGXEx.png) that the svg file path is right and the console logs the content properly.
this is my code to upload the svg to my canvas
<code>// URL of the external SVG file
const svgUrl = '../111.svg'; // Replace with your SVG URL
// Load the SVG file
fabric.loadSVGFromURL(svgUrl, (objects, options) => {
console.log('SVG loaded:', objects);
// Add objects to the canvas
if (Array.isArray(objects)) {
objects.forEach(obj => {
canvas.add(obj);
});
} else {
canvas.add(objects);
}
// Render the canvas
canvas.renderAll();
}, (error) => {
console.error('Error loading SVG:', error);
});
</code>
<code>// URL of the external SVG file
const svgUrl = '../111.svg'; // Replace with your SVG URL
// Load the SVG file
fabric.loadSVGFromURL(svgUrl, (objects, options) => {
console.log('SVG loaded:', objects);
// Add objects to the canvas
if (Array.isArray(objects)) {
objects.forEach(obj => {
canvas.add(obj);
});
} else {
canvas.add(objects);
}
// Render the canvas
canvas.renderAll();
}, (error) => {
console.error('Error loading SVG:', error);
});
</code>
// URL of the external SVG file
const svgUrl = '../111.svg'; // Replace with your SVG URL
// Load the SVG file
fabric.loadSVGFromURL(svgUrl, (objects, options) => {
console.log('SVG loaded:', objects);
// Add objects to the canvas
if (Array.isArray(objects)) {
objects.forEach(obj => {
canvas.add(obj);
});
} else {
canvas.add(objects);
}
// Render the canvas
canvas.renderAll();
}, (error) => {
console.error('Error loading SVG:', error);
});
<code> var site_url = "./sample.svg"; // in public folder
fabric.loadSVGFromURL(site_url).then((o) => {
o?.objects.forEach((element) => {
canvas.add(element);
});
});
canvas.renderAll();
</code>
<code> var site_url = "./sample.svg"; // in public folder
fabric.loadSVGFromURL(site_url).then((o) => {
o?.objects.forEach((element) => {
canvas.add(element);
});
});
canvas.renderAll();
</code>
var site_url = "./sample.svg"; // in public folder
fabric.loadSVGFromURL(site_url).then((o) => {
o?.objects.forEach((element) => {
canvas.add(element);
});
});
canvas.renderAll();
https://qx2h66.csb.app/ from public folder
https://6ntx6x.csb.app/ from same folder