Почему при добавлении тега appendChild'oм, контент не отображается?
Я не знаком с теми объектами, чьими методами вы пользуетесь для добавления, поэтому сразу к делу — у каждого языка разметки есть идентификатор Namespase. Более того, для ряда атрибутов (например, xlink:href) также есть своё пространство имён.
Для создания элементов и таких атрибутов существуют специальные методы createElementNS(), setAttributeNS().
В привычных createElement() и setAttribute() используется пространство имён xHTML — www.w3.org/1999/xhtml. К тому же, setAttributeNS() можно использовать и вместо привычного setAttribute() с указанием null для пространства имён. В этом случае будет использовано то пространство имён, в котором создан сам элемент.
Набросал пример для создания объектов с описанием в виде JSON.Структура и указание пространств имёнvar NS = 'http://www.w3.org/2000/svg',
	NSL = 'http://www.w3.org/1999/xlink',
	elements = [
		{
			name: 'svg',
			attr: {
				'class': 'main'
			},
			children: [
				{
					name: 'symbol',
					attr: {
						id: 'square',
						viewBox: '0 0 100 100'
					},
					children: [
						{
							name: 'rect',
							attr: {
								x: 0,
								y: 0,
								width: 100,
								height: 100,
								fill: 'rgba(51,102,204,1)'
							}
						}
					]
				},
				{
					name: 'symbol',
					attr: {
						id: 'circle',
						viewBox: '0 0 100 100'
					},
					children: [
						{
							name: 'circle',
							attr: {
								cx: 50,
								cy: 50,
								r: 50,
								fill: 'rgba(51,204,102,1)'
							}
						}
					]
				}
			]
		},
		{
			name: 'svg',
			attr: {
				'class': 'icon'
			},
			children: [
				{
					name: 'use',
					attr: {
						'xlink:href': '#square'
					}
				}
			]
		}
	],
	newElement = {
		name: 'svg',
		attr: {
			'class': 'icon'
		},
		children: [
			{
				name: 'use',
				attr: {
					'xlink:href': '#circle'
				}
			}
		]
	};Создание элементаfunction createSVG (elem) {
	var svgElement = document.createElementNS(NS, elem.name);

	if (elem.attr) {
		Object.keys(elem.attr).forEach(function (value) {
			if (value.indexOf('xlink') < 0) {
				svgElement.setAttribute(value, elem.attr[value]);
			} else {
				svgElement.setAttributeNS(NSL, value, elem.attr[value]);
			}
		});
	}

	if (elem.children) {
		elem.children.forEach(function (value) {
			svgElement.appendChild(createSVG(value));
		});
	}

	return svgElement;
}Использованиеelements.forEach(function (element) {
	document.body.appendChild(createSVG(element));
});
document.body.appendChild(createSVG(newElement));Стили.main {
	display: none;
}
.icon {
	width: 100px;
	height: 100px;
}
Спасибо за подробное пояснние)
у меня проблема была с неймспейсами, вызывая setAttributeNS первым параметром передавал null, вместо 'www.w3.org/1999/xlink'