SVG.Image = SVG.invent({ // Initialize node create: 'image' // Inherit from , inherit: SVG.Shape // Add class methods , extend: { // (re)load image load: function(url) { if (!url) return this var self = this , img = document.createElement('img') // preload image img.onload = function() { var p = self.parent(SVG.Pattern) if(p === null) return // ensure image size if (self.width() == 0 && self.height() == 0) self.size(img.width, img.height) // ensure pattern size if not set if (p && p.width() == 0 && p.height() == 0) p.size(self.width(), self.height()) // callback if (typeof self._loaded === 'function') self._loaded.call(self, { width: img.width , height: img.height , ratio: img.width / img.height , url: url }) } img.onerror = function(e){ if (typeof self._error === 'function'){ self._error.call(self, e) } } return this.attr('href', (img.src = this.src = url), SVG.xlink) } // Add loaded callback , loaded: function(loaded) { this._loaded = loaded return this } , error: function(error) { this._error = error return this } } // Add parent method , construct: { // create image element, load image and set its size image: function(source, width, height) { return this.put(new SVG.Image).load(source).size(width || 0, height || width || 0) } } })