slurp entire SVG, uses DOMParser instead of innerHTML

Author: antoinerg

src/components/modebar/modebar.js

@@ -14,7 +14,7 @@ var isNumeric = require('fast-isnumeric');
 
 var Lib = require('../../lib');
 var Icons = require('../../../build/ploticon');
-
+var Parser = new DOMParser();
 
 /**
  * UI controller for interactive plots
@@ -192,8 +192,6 @@ proto.createIcon = function(thisIcon) {
 
     if(thisIcon.path) {
         icon = document.createElementNS(svgNS, 'svg');
-        icon.setAttribute('height', '1em');
-        icon.setAttribute('width', (thisIcon.width / iconHeight) + 'em');
         icon.setAttribute('viewBox', [0, 0, thisIcon.width, iconHeight].join(' '));
 
         var path = document.createElementNS(svgNS, 'path');
@@ -215,10 +213,13 @@ proto.createIcon = function(thisIcon) {
     }
 
     if(thisIcon.svg) {
-        icon = document.createElement('div');
-        icon.innerHTML = '<svg height="1em" width="' + (thisIcon.width / iconHeight) + 'em" viewbox="0, 0, ' + thisIcon.width + ',' + thisIcon.height + '" xmlns="">' + thisIcon.svg + '</svg>';
+        var svgDoc = Parser.parseFromString(thisIcon.svg, 'application/xml');
+        icon = svgDoc.childNodes[0];
     }
 
+    icon.setAttribute('height', '1em');
+    icon.setAttribute('width', '1em');
+
     return icon;
 };
 

src/fonts/ploticon/ploticon.svg

@@ -2,7 +2,7 @@ var fs = require('fs');
 var xml2js = require('xml2js');
 
 var parser = new xml2js.Parser();
-var builder = new xml2js.Builder({ headless: true, rootName: 'g', renderOpts: {'newline': ''}});
+var builder = new xml2js.Builder({ headless: true, rootName: 'svg', renderOpts: {'newline': ''}});
 
 module.exports = function pullFontSVG(data, pathOut) {
     parser.parseString(data, function(err, result) {
@@ -29,17 +29,13 @@ module.exports = function pullFontSVG(data, pathOut) {
         });
 
         // Load SVG
-        var svgs = result.svg.defs[0].g;
-        svgs.forEach(function(g) {
-            var name = g.$.id,
-                width = parseFloat(g.$['data-width']),
-                height = parseFloat(g.$['data-height']);
-            delete g.$;
+        var svgs = result.svg.defs[0].svg;
+        svgs.forEach(function(svg) {
+            var name = svg.$.id;
+            delete svg.$.id;
             chars[name] = {
                 name: name,
-                width: width,
-                height: height,
-                svg: builder.buildObject(g)
+                svg: builder.buildObject(svg)
             };
         });