¿Es posible crear una etiqueta SVG en jQuery así?

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>');

Y si es así, ¿cómo se obtiene acceso al DOM? es decir. Si fuera HTML haría lo siguiente:

return dragSVG.html();

Pero como no es HTML, esto genera una excepción ... ¿O me estoy perdiendo algo completamente fundamental?

EDITAR:

Trataré de explicar con más claridad lo que intento lograr; Tengo un botón que representa un 'elemento' de SVG que se puede arrastrar a un lienzo principal de SVG. Cuando el usuario comienza a arrastrar, quiero mostrar el "elemento" de SVG debajo del mouse para proporcionar comentarios del usuario. Cuando el usuario coloca esto en el lienzo, necesito mover el "elemento" al lienzo 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);
        }
      });

  });