Criar e acessar tag SVG com jQuery?

É possível criar uma tag SVG no jQuery assim:

var dragSVG = $('<svg xmlns="http://www.w3.org/2000/svg"></svg>');
dragSVG.append('<rect x="0" y="0" width="20" height="20" style="fill:red"></rect>');

E, em caso afirmativo, como se obtém acesso ao DOM? ie. Se fosse HTML, faria o seguinte:

return dragSVG.html();

Mas como não é HTML isso lança uma exceção ... Ou estou sentindo falta de algo completamente fundamental!?

EDITAR:

Vou tentar explicar o que estou tentando alcançar um pouco mais claramente; Eu tenho um botão que representa um "item" do SVG que pode ser arrastado para uma tela principal do SVG. Quando o usuário começar a arrastar, eu quero exibir o 'item' do SVG sob o mouse para fornecer feedback ao usuário. Quando o usuário coloca isso na tela, preciso mover o 'item' para a tela principal.

      $('#testBtnDrag').draggable({
          opacity: 0.7,
          revert: 'invalid',
          cursorAt: { top: 0, left: 0},
          helper: function (event) {
              var dragSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect x="0" y="0" width="20" height="20" style="fill:red"></rect></svg>';
              return dragSVG;
          }              
      });

      // I can't attach the droppable to the SVG tag directly, IE / FF don't work with this
      // so we have to attach it to a <div> tag that wraps the <svg>.
      $('#drawArea').droppable({
        accept: '.svg-item',
        drop: function (event, ui) {
          // Get the mouse offset relative to the <svg> canvas
          var posX = event.originalEvent.clientX - $(this).offset().left;
          var posY = event.originalEvent.clientY - $(this).offset().top;

          // Get the dragged element and put it onto the "main" canvas
          var rawSVG = ui.helper.children().html()  // This won't work!
          var mainCanvas = $('#drawArea > svg');
          mainCanvas.append(rawSVG);
        }
      });

  });

questionAnswers(3)

yourAnswerToTheQuestion