Fix svg using Blob URLs (#332)

components/Editor.js

@@ -73,7 +73,7 @@ class Editor extends React.Component {
     this.props.onUpdate(this.state)
   }
 
-  getCarbonImage({ format, type } = { format: 'png' }) {
+  getCarbonImage({ format } = { format: 'png' }) {
     // if safari, get image from api
     if (
       navigator.userAgent.indexOf('Safari') !== -1 &&
@@ -112,15 +112,16 @@ class Editor extends React.Component {
       height
     }
 
-    if (type === 'blob')
+    if (format === 'svg') {
       return domtoimage
-        .toBlob(node, config)
-        .then(blob => window.URL.createObjectURL(blob, { type: 'image/png' }))
-
-    if (format === 'svg')
-      return domtoimage.toSvg(node, config).then(dataUrl => dataUrl.split(' ').join(' '))
+        .toSvg(node, config)
+        .then(dataUrl => dataUrl.split(' ').join(' '))
+        .then(uri => uri.slice(uri.indexOf(',') + 1))
+        .then(data => new Blob([data], { type: 'image/svg+xml' }))
+        .then(data => window.URL.createObjectURL(data))
+    }
 
-    return domtoimage.toPng(node, config)
+    return domtoimage.toBlob(node, config).then(blob => window.URL.createObjectURL(blob))
   }
 
   updateSetting(key, value) {
@@ -130,9 +131,7 @@ class Editor extends React.Component {
   save({ id: format = 'png' }) {
     const link = document.createElement('a')
 
-    const type = format === 'png' ? 'blob' : undefined
-
-    return this.getCarbonImage({ format, type }).then(url => {
+    return this.getCarbonImage({ format }).then(url => {
       link.download = `carbon.${format}`
       link.href = url
       document.body.appendChild(link)