Agregar elemento SVG a SVG existente usando DOM

Tengo una construcción HTML que se parece al siguiente código:

<div id='intro'>
<svg>
//draw some svg elements
<svg>
</div>

Quiero poder agregar algunos elementos al SVG definido anteriormente usando javascript y DOM. ¿Cómo lograría eso? estaba pensando en

var svg1=document.getElementById('intro').getElementsByTagName('svg');
svg1[0].appendChild(element);//element like <line>, <circle>

No estoy muy familiarizado con el uso de DOM, o cómo crear el elemento que se pasará a appendChild, así que ayúdeme con esto o quizás muéstreme qué otras alternativas tengo para resolver este problema. Muchas gracias.

Si desea crear un elemento HTML, use document.createElementfunction. SVG usa espacio de nombres, por eso tienes que usar document.createElementNSfunction.

var svg = document.getElementsByTagName('svg')[0]; //Get svg element
var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'path'); //Create a path in SVG's namespace
newElement.setAttribute("d","M 0 0 L 10 10"); //Set path's data
newElement.style.stroke = "#000"; //Set stroke colour
newElement.style.strokeWidth = "5px"; //Set stroke width
svg.appendChild(newElement);

Este código producirá algo como esto:

<svg>
 <path d="M 0 0 L 10 10" style="stroke: #000; stroke-width: 5px;" />
</svg>

createElement: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

createElementNS: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS

Si está lidiando mucho con svg usando JS, le recomiendo usar d3.js. Inclúyelo en tu página y haz algo como esto:

d3.select("#svg1").append("circle");