Этот ответ с 2009 года. Теперь вики сообщества, если кто-то захочет обновить его.
IE нужен плагин для отображения SVG. Наиболее распространенным является тот, который доступен для загрузки Adobe; однако Adobe больше не поддерживает и не разрабатывает его. Firefox, Opera, Chrome, Safari, все будут отображать базовый SVG отлично, но будут сталкиваться с причудами, если используются расширенные функции, так как поддержка неполная. Firefox не поддерживает декларативную анимацию.
Элементы SVG могут быть созданы с помощью JavaScript следующим образом:
// "circle" may be any tag name
var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
// Set any attributes as desired
shape.setAttribute("cx", 25);
shape.setAttribute("cy", 25);
shape.setAttribute("r", 20);
shape.setAttribute("fill", "green");
// Add to a parent node; document.documentElement should be the root svg element.
// Acquiring a parent element with document.getElementById() would be safest.
document.documentElement.appendChild(shape);
Спецификация SVG описывает интерфейсы DOM для всех элементов SVG. Например, SVGCircleElement, который создан выше, имеет атрибуты cx, cy и r для центральной точки и радиуса, к которым можно получить прямой доступ. Это атрибуты SVGAnimatedLength, которые имеют свойство baseVal для нормального значения и свойство animVal для анимированного значения. Браузеры в настоящее время не поддерживают надежно свойство animVal. baseVal - это SVGLength, значение которого задается свойством value.
Следовательно, для анимации сценария можно также установить эти свойства DOM для управления SVG. Следующий код должен быть эквивалентен приведенному выше коду:
var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
shape.cx.baseVal.value = 25;
shape.cy.baseVal.value = 25;
shape.r.baseVal.value = 20;
shape.setAttribute("fill", "green");
document.documentElement.appendChild(shape);