JSFiddle - React, Tailwind, and code Playground

by PhilQ

HTML

<svg id="test" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1100 825">
	<defs id="filters">
	</defs>
	<symbol id="ISO" viewBox="-50 -25 1100 825">
		<rect class="ISO_2" x="-106.741" y="-83.729" width="1227.123" height="951.096"/>
		<g class="ISO_1">
			<path d="M849.844,619.562c-57.427-47.904-43.812-89.753-34.547-106.429c1.931-3.474-0.954-7.68-4.891-7.145
				c-18.952,2.574-58.977,15.825-68.261,81.231c-0.018,0.134-0.018,0.274-0.038,0.408c-11.793-10.358-28.636-12.277-41.774-11.814
				c-5.001,0.176-6.474,7-1.98,9.201c53.227,26.067-14.699,77.591-27.139,121.482c-16.122,56.885,21.061,81.424,41.794,90.412
				c4.019,1.743,8.195-2.358,6.407-6.358c-13.522-30.242-1.952-72.288,18.798-93.258c20.983-21.205,23.835-38.292,21.792-61.457
				c-0.364-4.148,4.376-6.874,7.704-4.374c21.156,15.908,29.596,52.394,20.95,80.28c-1.094,3.534,2.035,6.965,5.648,6.164
				c7.683-1.7,18.729-6.281,24.419-18.608c1.047-2.27,3.589-3.537,5.952-2.718c28.457,9.885,43.068,57.367,31.207,97.217
				c-1.13,3.792,2.63,7.266,6.342,5.9C900.389,785.656,928.405,685.1,849.844,619.562L849.844,619.562z"/>
			<path d="M750.524,449.457l88.303-40.189c8.862-4.033,11.927-17.745,9.119-34.667l2.251-1.08
				c13.652-6.556,19.404-22.933,12.852-36.584c-6.553-13.651-22.93-19.398-36.584-12.851l-1.667,0.8
				c-10.636-12.352-22.456-18.487-31.016-14.592l-88.303,40.189c-9.086,4.135-12.083,18.444-8.898,35.962l-83.156,39.926
				c14.992,11.598,24.677,29.074,26.371,48.165l80.568-38.681C730.772,447.549,742.192,453.249,750.524,449.457L750.524,449.457z"/>
			<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 20.3284 367.7495)" cx="454.077" cy="159.336" rx="75.646" ry="75.646"/>
			<path...

SCSS

*, :before, :after { margin:0; padding:0; box-sizing:border-box; }

svg {
	width: 350px;
	height: auto;
	box-sizing: padding-box;
	border: 1px solid red;
}

.test {
	//filter: url(#blur1);
}

JavaScript

function getNode(n, v) {
	n = document.createElementNS("http://www.w3.org/2000/svg", n);
	for (var p in v) {
		n.setAttributeNS(null, p.replace(/[A-Z]/g, function(m, p, o, s) { return "-" + m.toLowerCase(); }), v[p]);
	}
	return n;
}

var ratio = 1100/825,
	w = 350,
	svg;

$( document ).ready(function() {

	var svg = document.getElementById("test");
	var filters = document.getElementById("filters");

	// Create filters
	var filter = getNode('filter', {
		'id': 'blur1',
	});
	filters.appendChild( filter );
	var effect = getNode('feGaussianBlur');
	effect.setAttributeNS(null, "in", "SourceGraphic");
	effect.setAttributeNS(null, "stdDeviation", "3");
	filter.appendChild( effect );
	

	/*
	var svgElem = getNode("svg", {
		'class': 'test',
		'width': w + 'px',
		'height': Math.round( w / ratio ) + 'px',
		//'preserveAspectRatio': 'xMidYMid meet',
		//'viewBox': '-50 -25 1100 825',
		//'viewBox': '0 0 100 100',
	});
	//svgElem.setAttribute('xml:space', 'preserve');
	*/
	
	var gElem = getNode("g", {
		'filter': 'url(#blur1)',
	});
	//gElem.setAttributeNS(null, 'filter', 'url(#blur1)');
	
	var useElem = getNode("use", {
		'href': '#Aperture',
	});
	//useElem.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#Aperture');

	gElem.appendChild(useElem);
	svg.appendChild(gElem);
	//svgElem.appendChild(useElem);
	//document.body.appendChild(svgElem);

});