Lots of breaking changes. Read below! (#646, #716)

- added `SVG.HTMLNode` which is the object wrapped around html nodes to put something in them
- moved `defs()` method from `SVG.Parent` to `SVG.Element`
- `SVG()` can be called with css selector, node or svg string, now. Without an argument it creates a new `SVG.Doc()` (#646)
- `add()`, `put()`, `addTo()`, `putIn()` now excepts all arguments accepted by `SVG()`
- `SVG.Nested` is not `overflow:visible` by default
- all `SVG.*` objects now can have a node as parameter when constructing
- `SVG()` does not set a default size anymore

13 files changed, 133 insertions, 109 deletions

diff --git a/src/HtmlNode.js b/src/HtmlNode.js
new file mode 100644
index 0000000..38309e3
--- /dev/null
+++ b/src/HtmlNode.js
@@ -0,0 +1,27 @@
+SVG.HtmlNode = SVG.invent({
+  create: function(element) {
+    this.node = element
+  }
+
+, extend: {
+    add: function(element, i) {
+      element = createElement(element)
+      if(element instanceof SVG.Nested) {
+        element = new SVG.Doc(element.node)
+        element.setData(JSON.parse(element.node.getAttribute('svgjs:data')) || {})
+      }
+
+      if (i == null)
+        this.node.appendChild(element.node)
+      else if (element.node != this.node.children[i])
+        this.node.insertBefore(element.node, this.node.children[i])
+
+      return this
+    }
+
+  , put: function(element, i) {
+      this.add(element, i)
+      return element
+    }
+  }
+})
diff --git a/src/boxes.js b/src/boxes.js
index 463cdda..eb58c06 100644
--- a/src/boxes.js
+++ b/src/boxes.js
@@ -102,7 +102,7 @@ SVG.Box = SVG.invent({
         }
       } catch(e) {
         try {
-          var clone = this.clone(SVG.parser.draw.instance).show()
+          var clone = this.clone(SVG.parser().svg).show()
           box = clone.node.getBBox()
           clone.remove()
         } catch(e) {
diff --git a/src/doc.js b/src/doc.js
index 4192516..667794d 100644
--- a/src/doc.js
+++ b/src/doc.js
@@ -1,25 +1,11 @@
 SVG.Doc = SVG.invent({
   // Initialize node
-  create: function(element) {
-    if (element) {
-      // ensure the presence of a dom element
-      element = typeof element == 'string' ?
-        document.getElementById(element) :
-        element
+  create: function(element) {    
+    element = element || SVG.create('svg')
+    this.constructor.call(this, element)
 
-      // If the target is an svg element, use that element as the main wrapper.
-      // This allows svg.js to work with svg documents as well.
-      if (element.nodeName == 'svg') {
-        this.constructor.call(this, element)
-      } else {
-        this.constructor.call(this, SVG.create('svg'))
-        element.appendChild(this.node)
-        this.size('100%', '100%')
-      }
-
-      // set svg element attributes and ensure defs node
-      this.namespace().defs()
-    }
+    // set svg element attributes and ensure defs node
+    this.namespace().defs()
   }
 
   // Inherit from
@@ -36,20 +22,7 @@ SVG.Doc = SVG.invent({
     }
     // Creates and returns defs element
   , defs: function() {
-      if (!this._defs) {
-        var defs
-
-        // Find or create a defs element in this instance
-        if (defs = this.node.getElementsByTagName('defs')[0])
-          this._defs = SVG.adopt(defs)
-        else
-          this._defs = new SVG.Defs
-
-        // Make sure the defs node is at the end of the stack
-        this.node.appendChild(this._defs.node)
-      }
-
-      return this._defs
+      return this.put(this.node.getElementsByTagName('defs')[0] || new SVG.Defs)
     }
     // custom parent method
   , parent: function() {
@@ -67,16 +40,15 @@ SVG.Doc = SVG.invent({
       // remove children
       while(this.node.hasChildNodes())
         this.node.removeChild(this.node.lastChild)
-
-      // remove defs reference
-      delete this._defs
-
-      // add back parser
-      if(!SVG.parser.draw.parentNode)
-        this.node.appendChild(SVG.parser.draw)
-
       return this
     }
+  , toNested: function() {
+      var el = SVG.create('svg')
+      this.node.instance = null
+      el.appendChild(this.node)
+
+      return SVG.adopt(this.node)
+    }
   }
 
 })
diff --git a/src/element.js b/src/element.js
index a4eda1f..7c95156 100644
--- a/src/element.js
+++ b/src/element.js
@@ -86,11 +86,11 @@ SVG.Element = SVG.invent({
     }
     // Add element to given container and return self
   , addTo: function(parent) {
-      return parent.put(this)
+      return createElement(parent).put(this)
     }
     // Add element to given container and return container
   , putIn: function(parent) {
-      return parent.add(this)
+      return createElement(parent).add(this)
     }
     // Get / set id
   , id: function(id) {
@@ -187,6 +187,10 @@ SVG.Element = SVG.invent({
   , doc: function() {
       return this instanceof SVG.Doc ? this : this.parent(SVG.Doc)
     }
+  , // Get defs
+    defs: function() {
+      return this.doc().defs()
+    }
     // return array of all ancestors of given type up to the root svg
   , parents: function(type) {
       var parents = [], parent = this
@@ -227,6 +231,9 @@ SVG.Element = SVG.invent({
 
       // otherwise act as a getter
       } else {
+        // write svgjs data to the dom
+        this.writeDataToDom()
+      
         return this.node.outerHTML
       }
 
diff --git a/src/helpers.js b/src/helpers.js
index 7b58727..88a37bb 100644
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -1,3 +1,32 @@
+function createElement(element, makeNested) {
+  if(element instanceof SVG.Element) return element
+
+  if(typeof element == 'object') {
+    return SVG.adopt(element)
+  }
+
+  if(element == null) {
+    return new SVG.Doc()
+  }
+
+  if(typeof element == 'string' && element.charAt(0) != '<') {
+    return SVG.adopt(document.querySelector(element))
+  }
+
+  var node = SVG.create('svg')
+  node.innerHTML = element
+
+  element = SVG.adopt(node.firstElementChild)
+
+  //if(element instanceof SVG.Nested) {
+  //  // We cant use the adopter for this because it will create an SVG.Nested
+  //  element = new SVG.Doc(element.node)
+  //  element.setData(JSON.parse(element.node.getAttribute('svgjs:data')) || {})
+  //}
+  
+  return element
+}
+
 function isNulledBox(box) {
   return !box.w && !box.h && !box.x && !box.y
 }
diff --git a/src/matrix.js b/src/matrix.js
index 449f8b6..4f358ba 100644
--- a/src/matrix.js
+++ b/src/matrix.js
@@ -156,7 +156,7 @@ SVG.Matrix = SVG.invent({
     // Convert to native SVGMatrix
   , native: function() {
       // create new matrix
-      var matrix = SVG.parser.native.createSVGMatrix()
+      var matrix = SVG.parser.nodes.svg.node.createSVGMatrix()
 
       // update with current values
       for (var i = abcdef.length - 1; i >= 0; i--)
diff --git a/src/nested.js b/src/nested.js
index fff03d1..bb328cc 100644
--- a/src/nested.js
+++ b/src/nested.js
@@ -1,10 +1,6 @@
 SVG.Nested = SVG.invent({
   // Initialize node
-  create: function() {
-    this.constructor.call(this, SVG.create('svg'))
-    
-    this.css('overflow', 'visible')
-  }
+  create: 'svg'
 
   // Inherit from
 , inherit: SVG.Container
@@ -16,4 +12,4 @@ SVG.Nested = SVG.invent({
       return this.put(new SVG.Nested)
     }
   }
-})
\ No newline at end of file
+})
diff --git a/src/parent.js b/src/parent.js
index 67d2d73..372c2ca 100644
--- a/src/parent.js
+++ b/src/parent.js
@@ -17,6 +17,8 @@ SVG.Parent = SVG.invent({
     }
     // Add given element at a position
   , add: function(element, i) {
+      element = createElement(element)
+
       if (i == null)
         this.node.appendChild(element.node)
       else if (element.node != this.node.children[i])
@@ -27,7 +29,7 @@ SVG.Parent = SVG.invent({
     // Basically does the same as `add()` but returns the added element instead
   , put: function(element, i) {
       this.add(element, i)
-      return element
+      return element.instance || element
     }
     // Checks if the given element is a child
   , has: function(element) {
@@ -53,7 +55,7 @@ SVG.Parent = SVG.invent({
   , each: function(block, deep) {
       var i, il
         , children = this.children()
-      
+
       for (i = 0, il = children.length; i < il; i++) {
         if (children[i] instanceof SVG.Element)
           block.apply(children[i], [i, children])
@@ -61,13 +63,13 @@ SVG.Parent = SVG.invent({
         if (deep && (children[i] instanceof SVG.Parent))
           children[i].each(block, deep)
       }
-    
+
       return this
     }
     // Remove a given child
   , removeElement: function(element) {
       this.node.removeChild(element.node)
-      
+
       return this
     }
     // Remove all elements in this container
@@ -75,16 +77,12 @@ SVG.Parent = SVG.invent({
       // remove children
       while(this.node.hasChildNodes())
         this.node.removeChild(this.node.lastChild)
-      
+
       // remove defs reference
       delete this._defs
 
       return this
     }
-  , // Get defs
-    defs: function() {
-      return this.doc().defs()
-    }
   }
-  
+
 })
diff --git a/src/parser.js b/src/parser.js
new file mode 100644
index 0000000..6988807
--- /dev/null
+++ b/src/parser.js
@@ -0,0 +1,22 @@
+SVG.parser = function() {
+  var b
+
+  if(!SVG.parser.nodes.svg.node.parentNode) {
+    b = document.body || document.documentElement
+    SVG.parser.nodes.svg.addTo(b)
+  }
+
+  return SVG.parser.nodes
+}
+
+SVG.parser.nodes = {
+  svg: new SVG.Nested().size(2, 0).css({
+    opacity:0,
+    position:'absolute',
+    left:'-100%',
+    top:'-100%',
+    overflow:'hidden'
+  })
+}
+
+SVG.parser.nodes.path = SVG.parser.nodes.svg.path().node
diff --git a/src/patharray.js b/src/patharray.js
index 4fb9318..697bc68 100644
--- a/src/patharray.js
+++ b/src/patharray.js
@@ -50,10 +50,10 @@ var pathHandlers = {
   }
 }
 
-var mlhvqtcsa = 'mlhvqtcsaz'.split('')
+var mlhvqtcsaz = 'mlhvqtcsaz'.split('')
 
-for(var i = 0, il = mlhvqtcsa.length; i < il; ++i){
-  pathHandlers[mlhvqtcsa[i]] = (function(i){
+for(var i = 0, il = mlhvqtcsaz.length; i < il; ++i){
+  pathHandlers[mlhvqtcsaz[i]] = (function(i){
     return function(c, p, p0) {
       if(i == 'H') c[0] = c[0] + p.x
       else if(i == 'V') c[0] = c[0] + p.y
@@ -68,7 +68,7 @@ for(var i = 0, il = mlhvqtcsa.length; i < il; ++i){
 
       return pathHandlers[i](c, p, p0)
     }
-  })(mlhvqtcsa[i].toUpperCase())
+  })(mlhvqtcsaz[i].toUpperCase())
 }
 
 // Path points array
@@ -289,9 +289,8 @@ SVG.extend(SVG.PathArray, {
   }
   // Get bounding box of path
 , bbox: function() {
-    SVG.parser.path.setAttribute('d', this.toString())
-
-    return SVG.parser.path.getBBox()
+    SVG.parser().path.setAttribute('d', this.toString())
+    return SVG.parser.nodes.path.getBBox()
   }
 
 })
diff --git a/src/point.js b/src/point.js
index 3a54d43..2ae2271 100644
--- a/src/point.js
+++ b/src/point.js
@@ -45,7 +45,7 @@ SVG.Point = SVG.invent({
     // Convert to native SVGPoint
   , native: function() {
       // create new point
-      var point = SVG.parser.native.createSVGPoint()
+      var point = SVG.parser.nodes.svg.node.createSVGPoint()
 
       // update with current values
       point.x = this.x
diff --git a/src/pointarray.js b/src/pointarray.js
index b0a3d54..fca684f 100644
--- a/src/pointarray.js
+++ b/src/pointarray.js
@@ -95,8 +95,13 @@ SVG.extend(SVG.PointArray, {
   }
   // Get bounding box of points
 , bbox: function() {
-    SVG.parser.poly.setAttribute('points', this.toString())
-
-    return SVG.parser.poly.getBBox()
+    var maxX = -Infinity, maxY = -Infinity, minX = Infinity, minY = Infinity
+    this.value.forEach(function(el) {
+      maxX = Math.max(el[0], maxX)
+      maxY = Math.max(el[1], maxY)
+      minX = Math.min(el[0], minX)
+      minY = Math.min(el[1], minY)
+    })
+    return {x: minX, y: minY, width: maxX-minX, height: maxY-minY}
   }
 })
diff --git a/src/svg.js b/src/svg.js
index 5b4f0bd..61d557e 100644
--- a/src/svg.js
+++ b/src/svg.js
@@ -1,11 +1,8 @@
 // The main wrapping element
 var SVG = this.SVG = function(element) {
   if (SVG.supported) {
-    element = new SVG.Doc(element)
-    
-    if(!SVG.parser.draw)
-      SVG.prepare()
-      
+    element = createElement(element)
+
     return element
   }
 }
@@ -83,6 +80,9 @@ SVG.adopt = function(node) {
   // make sure a node isn't already adopted
   if (node.instance) return node.instance
 
+  if(!(node instanceof window.SVGElement))
+    return new SVG.HtmlNode(node)
+  
   // initialize variables
   var element
 
@@ -96,7 +96,7 @@ SVG.adopt = function(node) {
   else if (SVG[capitalize(node.nodeName)])
     element = new SVG[capitalize(node.nodeName)]
   else
-    element = new SVG.Element(node)
+    element = new SVG.Parent(node)
 
   // ensure references
   element.type  = node.nodeName
@@ -112,34 +112,3 @@ SVG.adopt = function(node) {
 
   return element
 }
-
-// Initialize parsing element
-SVG.prepare = function() {
-  // Select document body and create invisible svg element
-  var body = document.getElementsByTagName('body')[0]
-    , draw = (body ? new SVG.Doc(body) : SVG.adopt(document.documentElement).nested()).size(2, 0)
-
-  // Create parser object
-  SVG.parser = {
-    body: body || document.documentElement
-  , draw: draw.css({
-      opacity:0,
-      position:'absolute',
-      left:'-100%',
-      top:'-100%',
-      overflow:'hidden'
-    }).node
-  , poly: draw.polyline().node
-  , path: draw.path().node
-  , native: SVG.create('svg')
-  }
-}
-
-SVG.parser = {
-  native: SVG.create('svg')
-}
-
-document.addEventListener('DOMContentLoaded', function() {
-  if(!SVG.parser.draw)
-    SVG.prepare()
-}, false)