Load SVG file with svg.js

Question

I've seen several Questions related to this topic in SO and followed them (Loading a SVG file with svg.js) and no success trying to load a svg file.

__this.canvas = SVG('canvas').size(500, 500);
$.get('/cuentos/Rapunzel/prueba.svg', function(data) {
     __this.data = data;
     console.log(__this.data);
     __this.canvas.svg(__this.data);
});

__this.canvas is type of svgjs.Doc which is imported in the following manner:

import SVG from './node_modules/svg.js/svg.js';
declare var svgjs: (domElement: HTMLElement) => svgjs.Library;

The error:

There's something i'm doing wrong or missing.

Any help?

Answer 1

JQuery's $.get, for SVGs, gives back a DOM object representing the SVG by default. SVG.js's svg function, however, expects a string.

You can simply force JQuery to give back a string like that:

$.get('/cuentos/Rapunzel/prueba.svg', function(data) {
   __this.data = data;
   console.log(__this.data);
   __this.canvas.svg(__this.data);
}, 'text');

PS: I opened up a PR against SVG.js to display a proper error message for that case: https://github.com/svgdotjs/svg.js/pull/870

Answer 2

Using jQuery this form works in both 2.7.1 and 3.0.x i tested

    var svgp = SVG($('#<name of svg>')[0]);