How do I render a svg as a mesh in three js - three.js

Question

Im trying to render a SVG file as a mesh using SVGLoader in my three js application, but its not working
I followed the documentation to the SVGLoader step by step but still nothing
here is the documentation : https://threejs.org/docs/index.html?q=svg#examples/en/loaders/SVGLoader
and here is my code that i've tried :
const loader = new SVGLoader();
const group = new Group();
loader.load(
"../public/assets/svg/logo.svg",
function (data) {
const paths = data.paths;
for (let i = 0; i < paths.length; i++) {
const path = paths[i];
const material = new MeshBasicMaterial({
color: path.color,
side: DoubleSide,
depthWrite: false,
});
const shapes = SVGLoader.createShapes(path);
for (let j = 0; j < shapes.length; j++) {
const shape = shapes[j];
const geometry = new ShapeGeometry(shape);
const mesh = new Mesh(geometry, material);
group.add(mesh);
}
}
},
function (xhr) {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
function (error) {
console.log("An error happened", error);
}
);
scene.add(group);
Im not getting any error messages when I run my code.