JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="300" height="150">

    <svg preserveAspectRatio="none" x="2" y="2" width="296" height="146" style="fill: none;" viewBox="0 0 296 146">
        <path class="js-line" d="M14.8,138.7L281.2,7.3" style="stroke-width: 2px; stroke: #1f77b4; stroke-opacity: 1; fill: none;">
        </path>
    </svg>

    <svg preserveAspectRatio="none" x="179.6" y="9.300000000000006" width="103.6" height="51.099999999999994" style="fill: none;" viewBox="0 0 103.6 51.099999999999994">
        <path class="js-line" d="M5.18,2.55L98.42,48.54" style="stroke-width: 2px; stroke: #ff7f0e; stroke-opacity: 1; fill: none;">
        </path>
    </svg>

</svg>

<canvas id="canvas"></canvas>

JavaScript

svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="300" height="150"><svg preserveAspectRatio="none" x="2" y="2" width="296" height="146" style="fill: none;" viewBox="0 0 296 146"><path class="js-line" d="M14.8,138.7L281.2,7.3" style="stroke-width: 2px; stroke: #1f77b4; stroke-opacity: 1; fill: none;"></path></svg><svg preserveAspectRatio="none" x="179.6" y="9.300000000000006" width="103.6" height="51.099999999999994" style="fill: none;" viewBox="0 0 103.6 51.099999999999994"><path class="js-line" d="M5.18,2.55L98.42,48.54" style="stroke-width: 2px; stroke: #ff7f0e; stroke-opacity: 1; fill: none;"></path></svg></svg>'

var canvas = new fabric.Canvas("canvas");
fabric.loadSVGFromString(svg, function(objects, options) {
    console.log(objects, options)
    var obj = fabric.util.groupSVGElements(objects, options);
    canvas.add(obj).renderAll();
});

console.log(canvas);