首先需要有一段 svg 程式碼：直接百度找了一個

<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="40" fill="red" stroke="%23ededed" stroke-width="3"/></svg>

使用  window.btoa(svg) ：

增加字首：

完成：

效果：

 程式碼：

    /**
     * 第一種方法，url
     * 非同步載入效能最好
     * url 可以是下載 url， 也可以是 dataUrl (data:image/jpg;base64,...)
     
 
*/
    methodOne(canvas) {
        let url = this.test(); // 測試
        new fabric.Image.fromURL(url, (img) => {
            img.set(Image.defaultImage(canvas, img));
            canvas.add(img);
            img.center();
            img.sendBackwards();
        });
    }

    test() {
        let svg 
 
= "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"-10 -18 100 135\"><circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" stroke=\"%23ededed\" stroke-width=\"3\"/></svg>";
        return 'data:image/svg+xml;base64,' + window.btoa(svg);
    }

https://www.jianshu.com/p/68b909620380