How to create svg shape from string markup (template)

i'm very new to SVG so this maybe a stupid question, but i would like to create an SVG shape based on some markup for example, lets say i want to create a lot of cards that have this markup:

var svg_test_label = [
    '<g class="rotatable">',
      '<g class="scalable">',
        '<rect class="card"/><image/>',
       '</g>',
       '<text class="rank"/><text class="name"/>',
    '<g class="btn add"><circle class="add"/><text class="add">+</text></g>',
    '<g class="btn del"><circle class="del"/><text class="del">-</text></g>',
    '<g class="btn edit"><rect class="edit"/><text class="edit">EDIT</text></g>',
    '</g>'].join('');

Thanks for any advice.

On behalf of Robert:

var svg_test_label = [
    '<g class="rotatable">',
      '<g class="scalable">',
        '<rect class="card"/><image/>',
       '</g>',
       '<text class="rank"/><text class="name"/>',
    '<g class="btn add"><circle class="add"/><text class="add">+</text></g>',
    '<g class="btn del"><circle class="del"/><text class="del">-</text></g>',
    '<g class="btn edit"><rect class="edit"/><text class="edit">EDIT</text></g>',
    '</g>'].join('');


document.getElementById("foo").innerHTML = "<svg>" + svg_test_label + "</svg>";

<div id="foo"></div>