JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>
<svg id="mainSvgId" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>

JavaScript

// init snap
        var svgElement=document.getElementById("mainSvgId");
        var s = Snap(svgElement).attr({height: 300, width: 300});

        // greate group with rectanle
        var parentGroup=s.g().attr({id: "parent"});
        var rect1 = s.rect(0, 0, 200, 200).attr({fill: "#bada55"});
        parentGroup.add(rect1);

        // add text with preserve attribute
        var text = s.text(0, 20, "   text1    text2");
        text.node.setAttribute("xml:space", "preserve");
        parentGroup.add(text);