be@ver,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
var fig = {
'1': {
'x': 10,
'y': 20,
'fill': 'red'
},
'2': {
'x': 60,
'y': 70,
'fill': 'green'
}
};
function createSVG() {
var container = document.querySelector('svg');
Object.keys(fig).forEach(function(key) {
var attr = fig[key];
var newuse = document.createElementNS("http://www.w3.org/2000/svg", "use");
Object.keys(attr).forEach(function(k) {
newuse.setAttributeNS(null, k, attr[k]);
});
newuse.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#figure');
container.appendChild(newuse)
});
}
</script>
</head>
<body>
<svg onload="createSVG();">
<defs>
<g id="figure">
<polygon points="0,0 0,5 5,5 5,0" />
<circle cx="3" cy="3" r="2" />
</g>
</defs>
<rect x="0" y="0" width="100" height="100" />
</svg>
</body>
</html>