feat(create): create any svg element via markup

Allow non <SVG> elements to be created from markup:

```javascript
var g = create('<g id="G" />');
```

lib/util/parse.js

@@ -8,6 +8,8 @@ var SVG_START = '<svg xmlns="' + ns.svg + '"';
 
 export default function parse(svg) {
 
+  var unwrap = false;
+
   // ensure we import a valid svg document
   if (svg.substring(0, 4) === '<svg') {
     if (svg.indexOf(ns.svg) === -1) {
@@ -16,9 +18,24 @@ export default function parse(svg) {
   } else {
     // namespace svg
     svg = SVG_START + '>' + svg + '</svg>';
+    unwrap = true;
+  }
+
+  var parsed = parseDocument(svg);
+
+  if (!unwrap) {
+    return parsed;
+  }
+
+  var fragment = document.createDocumentFragment();
+
+  var parent = parsed.firstChild;
+
+  while (parent.firstChild) {
+    fragment.appendChild(parent.firstChild);
   }
 
-  return parseDocument(svg);
+  return fragment;
 }
 
 function parseDocument(svg) {

test/spec/create.js

@@ -34,7 +34,7 @@ describe('create', function() {
   });
 
 
-  it('should create element from SVG markup', function() {
+  it('should create <svg> from markup', function() {
 
     // given
     var container = createContainer();
@@ -50,4 +50,22 @@ describe('create', function() {
     expect(svg.childNodes[0].nodeName).to.eql('g');
   });
 
+
+  it('should create <g> from markup', function() {
+
+    // given
+    var container = createContainer();
+
+    // when
+    var g = create('<g id="G"><circle cx="10" cy="10" r="2"></circle></g>');
+
+    append(container, g);
+
+    // then
+    expect(g.nodeName).to.eql('g');
+    expect(g.id).to.eql('G');
+    expect(g.childNodes.length).to.eql(1);
+    expect(g.childNodes[0].nodeName).to.eql('circle');
+  });
+
 });

test/spec/util/parse.js

@@ -4,6 +4,7 @@ import {
 
 import parse from '../../../lib/util/parse';
 
+
 describe('parse', function() {
 
   it('should parse <defs> / CDATA', function() {
@@ -16,13 +17,26 @@ describe('parse', function() {
         ']]></style>' +
       '</defs>';
 
+    // when
+    var fragment = parse(text);
+    var svg = innerSVG(fragment);
+
+    // then
+    expect(svg).to.eql(text);
+  });
+
+
+  it('should parse <svg>', function() {
+
+    // given
+    var text = '<svg><g id="1"/><circle/></svg>';
 
     // when
     var doc = parse(text);
-    var svg = innerSVG(doc.documentElement);
+    var svg = innerSVG(doc);
 
     // then
-    expect(svg).to.eql(text);
+    expect(svg).to.eql('<svg xmlns="http://www.w3.org/2000/svg"><g id="1"/><circle/></svg>');
   });
 
 });