@svgedit/svgcanvas 7.1.4

package/svg-exec.js

@@ -0,0 +1,1289 @@
+/**
+ * Tools for svg.
+ * @module svg
+ * @license MIT
+ * @copyright 2011 Jeff Schiller
+ */
+
+import { jsPDF as JsPDF } from 'jspdf/dist/jspdf.es.min.js'
+import 'svg2pdf.js/dist/svg2pdf.es.js'
+import html2canvas from 'html2canvas'
+import * as hstry from './history.js'
+import {
+  text2xml,
+  cleanupElement,
+  findDefs,
+  getHref,
+  preventClickDefault,
+  toXml,
+  getStrokedBBoxDefaultVisible,
+  createObjectURL,
+  dataURLToObjectURL,
+  walkTree,
+  getBBox as utilsGetBBox,
+  hashCode
+} from './utilities.js'
+import { transformPoint, transformListToTransform } from './math.js'
+import { convertUnit, shortFloat, convertToNum } from '../../src/common/units.js'
+import { isGecko, isChrome, isWebkit } from '../../src/common/browser.js'
+import * as pathModule from './path.js'
+import { NS } from './namespaces.js'
+import * as draw from './draw.js'
+import { recalculateDimensions } from './recalculate.js'
+import { getParents, getClosest } from '../../src/common/util.js'
+
+const {
+  InsertElementCommand,
+  RemoveElementCommand,
+  ChangeElementCommand,
+  BatchCommand
+} = hstry
+
+let svgCanvas = null
+
+/**
+ * @function module:svg-exec.init
+ * @param {module:svg-exec.SvgCanvas#init} svgContext
+ * @returns {void}
+ */
+export const init = canvas => {
+  svgCanvas = canvas
+  svgCanvas.setSvgString = setSvgString
+  svgCanvas.importSvgString = importSvgString
+  svgCanvas.uniquifyElems = uniquifyElemsMethod
+  svgCanvas.setUseData = setUseDataMethod
+  svgCanvas.convertGradients = convertGradientsMethod
+  svgCanvas.removeUnusedDefElems = removeUnusedDefElemsMethod // remove DOM elements inside the `<defs>` if they are notreferred to,
+  svgCanvas.svgCanvasToString = svgCanvasToString // Main function to set up the SVG content for output.
+  svgCanvas.svgToString = svgToString // Sub function ran on each SVG element to convert it to a string as desired.
+  svgCanvas.embedImage = embedImage // Converts a given image file to a data URL when possibl
+  svgCanvas.rasterExport = rasterExport // Generates a PNG (or JPG, BMP, WEBP) Data URL based on the current image
+  svgCanvas.exportPDF = exportPDF // Generates a PDF based on the current image, then calls "exportedPDF"
+}
+
+/**
+ * Main function to set up the SVG content for output.
+ * @function module:svgcanvas.SvgCanvas#svgCanvasToString
+ * @returns {string} The SVG image for output
+ */
+const svgCanvasToString = () => {
+  // keep calling it until there are none to remove
+  while (svgCanvas.removeUnusedDefElems() > 0) {} // eslint-disable-line no-empty
+
+  svgCanvas.pathActions.clear(true)
+
+  // Keep SVG-Edit comment on top
+  const childNodesElems = svgCanvas.getSvgContent().childNodes
+  childNodesElems.forEach((node, i) => {
+    if (i && node.nodeType === 8 && node.data.includes('Created with')) {
+      svgCanvas.getSvgContent().firstChild.before(node)
+    }
+  })
+
+  // Move out of in-group editing mode
+  if (svgCanvas.getCurrentGroup()) {
+    draw.leaveContext()
+    svgCanvas.selectOnly([svgCanvas.getCurrentGroup()])
+  }
+
+  const nakedSvgs = []
+
+  // Unwrap gsvg if it has no special attributes (only id and style)
+  const gsvgElems = svgCanvas.getSvgContent().querySelectorAll('g[data-gsvg]')
+  Array.prototype.forEach.call(gsvgElems, (element) => {
+    const attrs = element.attributes
+    let len = attrs.length
+    for (let i = 0; i < len; i++) {
+      if (attrs[i].nodeName === 'id' || attrs[i].nodeName === 'style') {
+        len--
+      }
+    }
+    // No significant attributes, so ungroup
+    if (len <= 0) {
+      const svg = element.firstChild
+      nakedSvgs.push(svg)
+      element.replaceWith(svg)
+    }
+  })
+  const output = svgCanvas.svgToString(svgCanvas.getSvgContent(), 0)
+
+  // Rewrap gsvg
+  if (nakedSvgs.length) {
+    Array.prototype.forEach.call(nakedSvgs, (el) => {
+      svgCanvas.groupSvgElem(el)
+    })
+  }
+
+  return output
+}
+
+/**
+ * Sub function ran on each SVG element to convert it to a string as desired.
+ * @function module:svgcanvas.SvgCanvas#svgToString
+ * @param {Element} elem - The SVG element to convert
+ * @param {Integer} indent - Number of spaces to indent this tag
+ * @returns {string} The given element as an SVG tag
+ */
+const svgToString = (elem, indent) => {
+  const curConfig = svgCanvas.getCurConfig()
+  const nsMap = svgCanvas.getNsMap()
+  const out = []
+  const unit = curConfig.baseUnit
+  const unitRe = new RegExp('^-?[\\d\\.]+' + unit + '$')
+
+  if (elem) {
+    cleanupElement(elem)
+    const attrs = [...elem.attributes]
+    const childs = elem.childNodes
+    attrs.sort((a, b) => {
+      return a.name > b.name ? -1 : 1
+    })
+
+    for (let i = 0; i < indent; i++) {
+      out.push(' ')
+    }
+    out.push('<')
+    out.push(elem.nodeName)
+    if (elem.id === 'svgcontent') {
+      // Process root element separately
+      const res = svgCanvas.getResolution()
+
+      let vb = ''
+      // TODO: Allow this by dividing all values by current baseVal
+      // Note that this also means we should properly deal with this on import
+      // if (curConfig.baseUnit !== 'px') {
+      //   const unit = curConfig.baseUnit;
+      //   const unitM = getTypeMap()[unit];
+      //   res.w = shortFloat(res.w / unitM);
+      //   res.h = shortFloat(res.h / unitM);
+      //   vb = ' viewBox="' + [0, 0, res.w, res.h].join(' ') + '"';
+      //   res.w += unit;
+      //   res.h += unit;
+      // }
+      if (curConfig.dynamicOutput) {
+        vb = elem.getAttribute('viewBox')
+        out.push(
+          ' viewBox="' +
+            vb +
+            '" xmlns="' +
+            NS.SVG +
+            '"'
+        )
+      } else {
+        if (unit !== 'px') {
+          res.w = convertUnit(res.w, unit) + unit
+          res.h = convertUnit(res.h, unit) + unit
+        }
+        out.push(
+          ' width="' +
+            res.w +
+            '" height="' +
+            res.h +
+            '" xmlns="' +
+            NS.SVG +
+            '"'
+        )
+      }
+
+      const nsuris = {}
+
+      // Check elements for namespaces, add if found
+      const csElements = elem.querySelectorAll('*')
+      const cElements = Array.prototype.slice.call(csElements)
+      cElements.push(elem)
+      Array.prototype.forEach.call(cElements, (el) => {
+        // const el = this;
+        // for some elements have no attribute
+        const uri = el.namespaceURI
+        if (
+          uri &&
+          !nsuris[uri] &&
+          nsMap[uri] &&
+          nsMap[uri] !== 'xmlns' &&
+          nsMap[uri] !== 'xml'
+        ) {
+          nsuris[uri] = true
+          out.push(' xmlns:' + nsMap[uri] + '="' + uri + '"')
+        }
+        if (el.attributes.length > 0) {
+          for (const [, attr] of Object.entries(el.attributes)) {
+            const u = attr.namespaceURI
+            if (u && !nsuris[u] && nsMap[u] !== 'xmlns' && nsMap[u] !== 'xml') {
+              nsuris[u] = true
+              out.push(' xmlns:' + nsMap[u] + '="' + u + '"')
+            }
+          }
+        }
+      })
+
+      let i = attrs.length
+      const attrNames = [
+        'width',
+        'height',
+        'xmlns',
+        'x',
+        'y',
+        'viewBox',
+        'id',
+        'overflow'
+      ]
+      while (i--) {
+        const attr = attrs[i]
+        const attrVal = toXml(attr.value)
+
+        // Namespaces have already been dealt with, so skip
+        if (attr.nodeName.startsWith('xmlns:')) {
+          continue
+        }
+
+        // only serialize attributes we don't use internally
+        if (
+          attrVal !== '' &&
+          !attrNames.includes(attr.localName) &&
+          (!attr.namespaceURI || nsMap[attr.namespaceURI])
+        ) {
+          out.push(' ')
+          out.push(attr.nodeName)
+          out.push('="')
+          out.push(attrVal)
+          out.push('"')
+        }
+      }
+    } else {
+      // Skip empty defs
+      if (elem.nodeName === 'defs' && !elem.firstChild) {
+        return ''
+      }
+
+      const mozAttrs = ['-moz-math-font-style', '_moz-math-font-style']
+      for (let i = attrs.length - 1; i >= 0; i--) {
+        const attr = attrs[i]
+        let attrVal = toXml(attr.value)
+        // remove bogus attributes added by Gecko
+        if (mozAttrs.includes(attr.localName)) {
+          continue
+        }
+        if (attrVal === 'null') {
+          const styleName = attr.localName.replace(/-[a-z]/g, s =>
+            s[1].toUpperCase()
+          )
+          if (Object.prototype.hasOwnProperty.call(elem.style, styleName)) {
+            continue
+          }
+        }
+        if (attrVal !== '') {
+          if (attrVal.startsWith('pointer-events')) {
+            continue
+          }
+          if (attr.localName === 'class' && attrVal.startsWith('se_')) {
+            continue
+          }
+          out.push(' ')
+          if (attr.localName === 'd') {
+            attrVal = svgCanvas.pathActions.convertPath(elem, true)
+          }
+          if (!isNaN(attrVal)) {
+            attrVal = shortFloat(attrVal)
+          } else if (unitRe.test(attrVal)) {
+            attrVal = shortFloat(attrVal) + unit
+          }
+
+          // Embed images when saving
+          if (
+            svgCanvas.getSvgOptionApply() &&
+            elem.nodeName === 'image' &&
+            attr.localName === 'href' &&
+            svgCanvas.getSvgOptionImages() &&
+            svgCanvas.getSvgOptionImages() === 'embed'
+          ) {
+            const img = svgCanvas.getEncodableImages(attrVal)
+            if (img) {
+              attrVal = img
+            }
+          }
+
+          // map various namespaces to our fixed namespace prefixes
+          // (the default xmlns attribute itself does not get a prefix)
+          if (
+            !attr.namespaceURI ||
+            attr.namespaceURI === NS.SVG ||
+            nsMap[attr.namespaceURI]
+          ) {
+            out.push(attr.nodeName)
+            out.push('="')
+            out.push(attrVal)
+            out.push('"')
+          }
+        }
+      }
+    }
+
+    if (elem.hasChildNodes()) {
+      out.push('>')
+      indent++
+      let bOneLine = false
+
+      for (let i = 0; i < childs.length; i++) {
+        const child = childs.item(i)
+        switch (child.nodeType) {
+          case 1: // element node
+            out.push('\n')
+            out.push(svgCanvas.svgToString(child, indent))
+            break
+          case 3: {
+            // text node
+            const str = child.nodeValue.replace(/^\s+|\s+$/g, '')
+            if (str !== '') {
+              bOneLine = true
+              out.push(String(toXml(str)))
+            }
+            break
+          }
+          case 4: // cdata node
+            out.push('\n')
+            out.push(new Array(indent + 1).join(' '))
+            out.push('<![CDATA[')
+            out.push(child.nodeValue)
+            out.push(']]>')
+            break
+          case 8: // comment
+            out.push('\n')
+            out.push(new Array(indent + 1).join(' '))
+            out.push('<!--')
+            out.push(child.data)
+            out.push('-->')
+            break
+        } // switch on node type
+      }
+      indent--
+      if (!bOneLine) {
+        out.push('\n')
+        for (let i = 0; i < indent; i++) {
+          out.push(' ')
+        }
+      }
+      out.push('</')
+      out.push(elem.nodeName)
+      out.push('>')
+    } else {
+      out.push('/>')
+    }
+  }
+  return out.join('')
+} // end svgToString()
+
+/**
+ * This function sets the current drawing as the input SVG XML.
+ * @function module:svgcanvas.SvgCanvas#setSvgString
+ * @param {string} xmlString - The SVG as XML text.
+ * @param {boolean} [preventUndo=false] - Indicates if we want to do the
+ * changes without adding them to the undo stack - e.g. for initializing a
+ * drawing on page load.
+ * @fires module:svgcanvas.SvgCanvas#event:setnonce
+ * @fires module:svgcanvas.SvgCanvas#event:unsetnonce
+ * @fires module:svgcanvas.SvgCanvas#event:changed
+ * @returns {boolean} This function returns `false` if the set was
+ *     unsuccessful, `true` otherwise.
+ */
+const setSvgString = (xmlString, preventUndo) => {
+  const curConfig = svgCanvas.getCurConfig()
+  const dataStorage = svgCanvas.getDataStorage()
+  try {
+    // convert string into XML document
+    const newDoc = text2xml(xmlString)
+    if (
+      newDoc.firstElementChild &&
+      newDoc.firstElementChild.namespaceURI !== NS.SVG
+    ) {
+      return false
+    }
+
+    svgCanvas.prepareSvg(newDoc)
+
+    const batchCmd = new BatchCommand('Change Source')
+
+    // remove old svg document
+    const { nextSibling } = svgCanvas.getSvgContent()
+
+    svgCanvas.getSvgContent().remove()
+    const oldzoom = svgCanvas.getSvgContent()
+    batchCmd.addSubCommand(
+      new RemoveElementCommand(oldzoom, nextSibling, svgCanvas.getSvgRoot())
+    )
+
+    // set new svg document
+    // If DOM3 adoptNode() available, use it. Otherwise fall back to DOM2 importNode()
+    if (svgCanvas.getDOMDocument().adoptNode) {
+      svgCanvas.setSvgContent(
+        svgCanvas.getDOMDocument().adoptNode(newDoc.documentElement)
+      )
+    } else {
+      svgCanvas.setSvgContent(
+        svgCanvas.getDOMDocument().importNode(newDoc.documentElement, true)
+      )
+    }
+
+    svgCanvas.getSvgRoot().append(svgCanvas.getSvgContent())
+    const content = svgCanvas.getSvgContent()
+
+    svgCanvas.current_drawing_ = new draw.Drawing(
+      svgCanvas.getSvgContent(),
+      svgCanvas.getIdPrefix()
+    )
+
+    // retrieve or set the nonce
+    const nonce = svgCanvas.getCurrentDrawing().getNonce()
+    if (nonce) {
+      svgCanvas.call('setnonce', nonce)
+    } else {
+      svgCanvas.call('unsetnonce')
+    }
+
+    // change image href vals if possible
+    const elements = content.querySelectorAll('image')
+    Array.prototype.forEach.call(elements, (image) => {
+      preventClickDefault(image)
+      const val = svgCanvas.getHref(image)
+      if (val) {
+        if (val.startsWith('data:')) {
+          // Check if an SVG-edit data URI
+          const m = val.match(/svgedit_url=(.*?);/)
+          // const m = val.match(/svgedit_url=(?<url>.*?);/);
+          if (m) {
+            const url = decodeURIComponent(m[1])
+            // const url = decodeURIComponent(m.groups.url);
+            const iimg = new Image()
+            iimg.addEventListener('load', () => {
+              image.setAttributeNS(NS.XLINK, 'xlink:href', url)
+            })
+            iimg.src = url
+          }
+        }
+        // Add to encodableImages if it loads
+        svgCanvas.embedImage(val)
+      }
+    })
+    // Duplicate id replace changes
+    const nodes = content.querySelectorAll('[id]')
+    const ids = {}
+    const totalNodes = nodes.length
+
+    for (let i = 0; i < totalNodes; i++) {
+      const currentId = nodes[i].id ? nodes[i].id : 'undefined'
+      if (isNaN(ids[currentId])) {
+        ids[currentId] = 0
+      }
+      ids[currentId]++
+    }
+
+    Object.entries(ids).forEach(([key, value]) => {
+      if (value > 1) {
+        const nodes = content.querySelectorAll('[id="' + key + '"]')
+        for (let i = 1; i < nodes.length; i++) {
+          nodes[i].setAttribute('id', svgCanvas.getNextId())
+        }
+      }
+    })
+
+    // Wrap child SVGs in group elements
+    const svgElements = content.querySelectorAll('svg')
+    Array.prototype.forEach.call(svgElements, (element) => {
+      // Skip if it's in a <defs>
+      if (getClosest(element.parentNode, 'defs')) {
+        return
+      }
+
+      svgCanvas.uniquifyElems(element)
+
+      // Check if it already has a gsvg group
+      const pa = element.parentNode
+      if (pa.childNodes.length === 1 && pa.nodeName === 'g') {
+        dataStorage.put(pa, 'gsvg', element)
+        pa.id = pa.id || svgCanvas.getNextId()
+      } else {
+        svgCanvas.groupSvgElem(element)
+      }
+    })
+
+    // For Firefox: Put all paint elems in defs
+    if (isGecko()) {
+      const svgDefs = findDefs()
+      const findElems = content.querySelectorAll(
+        'linearGradient, radialGradient, pattern'
+      )
+      Array.prototype.forEach.call(findElems, (ele) => {
+        svgDefs.appendChild(ele)
+      })
+    }
+
+    // Set ref element for <use> elements
+
+    // TODO: This should also be done if the object is re-added through "redo"
+    svgCanvas.setUseData(content)
+
+    svgCanvas.convertGradients(content)
+
+    const attrs = {
+      id: 'svgcontent',
+      overflow: curConfig.show_outside_canvas ? 'visible' : 'hidden'
+    }
+
+    let percs = false
+
+    // determine proper size
+    if (content.getAttribute('viewBox')) {
+      const viBox = content.getAttribute('viewBox')
+      const vb = viBox.split(' ')
+      attrs.width = vb[2]
+      attrs.height = vb[3]
+      // handle content that doesn't have a viewBox
+    } else {
+      ;['width', 'height'].forEach((dim) => {
+        // Set to 100 if not given
+        const val = content.getAttribute(dim) || '100%'
+        if (String(val).substr(-1) === '%') {
+          // Use user units if percentage given
+          percs = true
+        } else {
+          attrs[dim] = convertToNum(dim, val)
+        }
+      })
+    }
+
+    // identify layers
+    draw.identifyLayers()
+
+    // Give ID for any visible layer children missing one
+    const chiElems = content.children
+    Array.prototype.forEach.call(chiElems, (chiElem) => {
+      const visElems = chiElem.querySelectorAll(svgCanvas.getVisElems())
+      Array.prototype.forEach.call(visElems, (elem) => {
+        if (!elem.id) {
+          elem.id = svgCanvas.getNextId()
+        }
+      })
+    })
+
+    // Percentage width/height, so let's base it on visible elements
+    if (percs) {
+      const bb = getStrokedBBoxDefaultVisible()
+      attrs.width = bb.width + bb.x
+      attrs.height = bb.height + bb.y
+    }
+
+    // Just in case negative numbers are given or
+    // result from the percs calculation
+    if (attrs.width <= 0) {
+      attrs.width = 100
+    }
+    if (attrs.height <= 0) {
+      attrs.height = 100
+    }
+
+    for (const [key, value] of Object.entries(attrs)) {
+      content.setAttribute(key, value)
+    }
+    svgCanvas.contentW = attrs.width
+    svgCanvas.contentH = attrs.height
+
+    batchCmd.addSubCommand(new InsertElementCommand(svgCanvas.getSvgContent()))
+    // update root to the correct size
+    const width = content.getAttribute('width')
+    const height = content.getAttribute('height')
+    const changes = { width, height }
+    batchCmd.addSubCommand(
+      new ChangeElementCommand(svgCanvas.getSvgRoot(), changes)
+    )
+
+    // reset zoom
+    svgCanvas.setZoom(1)
+
+    svgCanvas.clearSelection()
+    pathModule.clearData()
+    svgCanvas.getSvgRoot().append(svgCanvas.selectorManager.selectorParentGroup)
+
+    if (!preventUndo) svgCanvas.addCommandToHistory(batchCmd)
+    svgCanvas.call('sourcechanged', [svgCanvas.getSvgContent()])
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+
+  return true
+}
+
+/**
+ * This function imports the input SVG XML as a `<symbol>` in the `<defs>`, then adds a
+ * `<use>` to the current layer.
+ * @function module:svgcanvas.SvgCanvas#importSvgString
+ * @param {string} xmlString - The SVG as XML text.
+ * @fires module:svgcanvas.SvgCanvas#event:changed
+ * @returns {null|Element} This function returns null if the import was unsuccessful, or the element otherwise.
+ * @todo
+ * - properly handle if namespace is introduced by imported content (must add to svgcontent
+ * and update all prefixes in the imported node)
+ * - properly handle recalculating dimensions, `recalculateDimensions()` doesn't handle
+ * arbitrary transform lists, but makes some assumptions about how the transform list
+ * was obtained
+ */
+const importSvgString = (xmlString) => {
+  const dataStorage = svgCanvas.getDataStorage()
+  let j
+  let ts
+  let useEl
+  try {
+    // Get unique ID
+    const uid = hashCode(xmlString)
+
+    let useExisting = false
+    // Look for symbol and make sure symbol exists in image
+    if (svgCanvas.getImportIds(uid) && svgCanvas.getImportIds(uid).symbol) {
+      const parents = getParents(svgCanvas.getImportIds(uid).symbol, '#svgroot')
+      if (parents?.length) {
+        useExisting = true
+      }
+    }
+
+    const batchCmd = new BatchCommand('Import Image')
+    let symbol
+    if (useExisting) {
+      symbol = svgCanvas.getImportIds(uid).symbol
+      ts = svgCanvas.getImportIds(uid).xform
+    } else {
+      // convert string into XML document
+      const newDoc = text2xml(xmlString)
+
+      svgCanvas.prepareSvg(newDoc)
+
+      // import new svg document into our document
+      // If DOM3 adoptNode() available, use it. Otherwise fall back to DOM2 importNode()
+      const svg = svgCanvas.getDOMDocument().adoptNode
+        ? svgCanvas.getDOMDocument().adoptNode(newDoc.documentElement)
+        : svgCanvas.getDOMDocument().importNode(newDoc.documentElement, true)
+
+      svgCanvas.uniquifyElems(svg)
+
+      const innerw = convertToNum('width', svg.getAttribute('width'))
+      const innerh = convertToNum('height', svg.getAttribute('height'))
+      const innervb = svg.getAttribute('viewBox')
+      // if no explicit viewbox, create one out of the width and height
+      const vb = innervb ? innervb.split(' ') : [0, 0, innerw, innerh]
+      for (j = 0; j < 4; ++j) {
+        vb[j] = Number(vb[j])
+      }
+
+      // TODO: properly handle preserveAspectRatio
+      const // canvasw = +svgContent.getAttribute('width'),
+        canvash = Number(svgCanvas.getSvgContent().getAttribute('height'))
+      // imported content should be 1/3 of the canvas on its largest dimension
+
+      ts =
+        innerh > innerw
+          ? 'scale(' + canvash / 3 / vb[3] + ')'
+          : 'scale(' + canvash / 3 / vb[2] + ')'
+
+      // Hack to make recalculateDimensions understand how to scale
+      ts = 'translate(0) ' + ts + ' translate(0)'
+
+      symbol = svgCanvas.getDOMDocument().createElementNS(NS.SVG, 'symbol')
+      const defs = findDefs()
+
+      if (isGecko()) {
+        // Move all gradients into root for Firefox, workaround for this bug:
+        // https://bugzilla.mozilla.org/show_bug.cgi?id=353575
+        // TODO: Make this properly undo-able.
+        const elements = svg.querySelectorAll(
+          'linearGradient, radialGradient, pattern'
+        )
+        Array.prototype.forEach.call(elements, (el) => {
+          defs.appendChild(el)
+        })
+      }
+
+      while (svg.firstChild) {
+        const first = svg.firstChild
+        symbol.append(first)
+      }
+      const attrs = svg.attributes
+      for (const attr of attrs) {
+        // Ok for `NamedNodeMap`
+        symbol.setAttribute(attr.nodeName, attr.value)
+      }
+      symbol.id = svgCanvas.getNextId()
+
+      // Store data
+      svgCanvas.setImportIds(uid, {
+        symbol,
+        xform: ts
+      })
+
+      findDefs().append(symbol)
+      batchCmd.addSubCommand(new InsertElementCommand(symbol))
+    }
+
+    useEl = svgCanvas.getDOMDocument().createElementNS(NS.SVG, 'use')
+    useEl.id = svgCanvas.getNextId()
+    svgCanvas.setHref(useEl, '#' + symbol.id)
+    ;(
+      svgCanvas.getCurrentGroup() ||
+      svgCanvas.getCurrentDrawing().getCurrentLayer()
+    ).append(useEl)
+    batchCmd.addSubCommand(new InsertElementCommand(useEl))
+    svgCanvas.clearSelection()
+
+    useEl.setAttribute('transform', ts)
+    recalculateDimensions(useEl)
+    dataStorage.put(useEl, 'symbol', symbol)
+    dataStorage.put(useEl, 'ref', symbol)
+    svgCanvas.addToSelection([useEl])
+
+    // TODO: Find way to add this in a recalculateDimensions-parsable way
+    // if (vb[0] !== 0 || vb[1] !== 0) {
+    //   ts = 'translate(' + (-vb[0]) + ',' + (-vb[1]) + ') ' + ts;
+    // }
+    svgCanvas.addCommandToHistory(batchCmd)
+    svgCanvas.call('changed', [svgCanvas.getSvgContent()])
+  } catch (e) {
+    console.error(e)
+    return null
+  }
+
+  // we want to return the element so we can automatically select it
+  return useEl
+}
+/**
+ * Function to run when image data is found.
+ * @callback module:svgcanvas.ImageEmbeddedCallback
+ * @param {string|false} result Data URL
+ * @returns {void}
+ */
+/**
+ * Converts a given image file to a data URL when possible, then runs a given callback.
+ * @function module:svgcanvas.SvgCanvas#embedImage
+ * @param {string} src - The path/URL of the image
+ * @returns {Promise<string|false>} Resolves to a Data URL (string|false)
+ */
+const embedImage = (src) => {
+  // Todo: Remove this Promise in favor of making an async/await `Image.load` utility
+  return new Promise((resolve, reject) => {
+    // load in the image and once it's loaded, get the dimensions
+    const imgI = new Image()
+    imgI.addEventListener('load', e => {
+      // create a canvas the same size as the raster image
+      const cvs = document.createElement('canvas')
+      cvs.width = e.currentTarget.width
+      cvs.height = e.currentTarget.height
+      // load the raster image into the canvas
+      cvs.getContext('2d').drawImage(e.currentTarget, 0, 0)
+      // retrieve the data: URL
+      try {
+        let urldata = ';svgedit_url=' + encodeURIComponent(src)
+        urldata = cvs.toDataURL().replace(';base64', urldata + ';base64')
+        svgCanvas.setEncodableImages(src, urldata)
+      } catch (e) {
+        svgCanvas.setEncodableImages(src, false)
+      }
+      svgCanvas.setGoodImage(src)
+      resolve(svgCanvas.getEncodableImages(src))
+    })
+    imgI.addEventListener('error', e => {
+      reject(
+        new Error(
+          `error loading image: ${e.currentTarget.attributes.src.value}`
+        )
+      )
+    })
+    imgI.setAttribute('src', src)
+  })
+}
+
+/**
+ * @typedef {PlainObject} module:svgcanvas.IssuesAndCodes
+ * @property {string[]} issueCodes The locale-independent code names
+ * @property {string[]} issues The localized descriptions
+ */
+
+/**
+ * Codes only is useful for locale-independent detection.
+ * @returns {module:svgcanvas.IssuesAndCodes}
+ */
+const getIssues = () => {
+  const uiStrings = svgCanvas.getUIStrings()
+  // remove the selected outline before serializing
+  svgCanvas.clearSelection()
+
+  // Check for known CanVG issues
+  const issues = []
+  const issueCodes = []
+
+  // Selector and notice
+  const issueList = {
+    feGaussianBlur: uiStrings.NoBlur,
+    foreignObject: uiStrings.NoforeignObject,
+    '[stroke-dasharray]': uiStrings.NoDashArray
+  }
+  const content = svgCanvas.getSvgContent()
+
+  // Add font/text check if Canvas Text API is not implemented
+  if (!('font' in document.querySelector('CANVAS').getContext('2d'))) {
+    issueList.text = uiStrings.NoText
+  }
+
+  for (const [sel, descr] of Object.entries(issueList)) {
+    if (content.querySelectorAll(sel).length) {
+      issueCodes.push(sel)
+      issues.push(descr)
+    }
+  }
+  return { issues, issueCodes }
+}
+/**
+ * @typedef {PlainObject} module:svgcanvas.ImageedResults
+ * @property {string} datauri Contents as a Data URL
+ * @property {string} bloburl May be the empty string
+ * @property {string} svg The SVG contents as a string
+ * @property {string[]} issues The localization messages of `issueCodes`
+ * @property {module:svgcanvas.IssueCode[]} issueCodes CanVG issues found with the SVG
+ * @property {"PNG"|"JPEG"|"BMP"|"WEBP"|"ICO"} type The chosen image type
+ * @property {"image/png"|"image/jpeg"|"image/bmp"|"image/webp"} mimeType The image MIME type
+ * @property {Float} quality A decimal between 0 and 1 (for use with JPEG or WEBP)
+ * @property {string} WindowName A convenience for passing along a `window.name` to target a window on which the  could be added
+ */
+
+/**
+ * Generates a PNG (or JPG, BMP, WEBP) Data URL based on the current image,
+ * then calls "ed" with an object including the string, image
+ * information, and any issues found.
+ * @function module:svgcanvas.SvgCanvas#raster
+ * @param {"PNG"|"JPEG"|"BMP"|"WEBP"|"ICO"} [imgType="PNG"]
+ * @param {Float} [quality] Between 0 and 1
+ * @param {string} [WindowName]
+ * @param {PlainObject} [opts]
+ * @param {boolean} [opts.avoidEvent]
+ * @fires module:svgcanvas.SvgCanvas#event:ed
+ * @todo Confirm/fix ICO type
+ * @returns {Promise<module:svgcanvas.ImageedResults>} Resolves to {@link module:svgcanvas.ImageedResults}
+ */
+const rasterExport = async (imgType, quality, WindowName, opts = {}) => {
+  const type = imgType === 'ICO' ? 'BMP' : imgType || 'PNG'
+  const mimeType = 'image/' + type.toLowerCase()
+  const { issues, issueCodes } = getIssues()
+  const svg = svgCanvas.svgCanvasToString()
+
+  const iframe = document.createElement('iframe')
+  iframe.onload = () => {
+    const iframedoc = iframe.contentDocument || iframe.contentWindow.document
+    const ele = svgCanvas.getSvgContent()
+    const cln = ele.cloneNode(true)
+    iframedoc.body.appendChild(cln)
+    setTimeout(() => {
+      // eslint-disable-next-line promise/catch-or-return
+      html2canvas(iframedoc.body, { useCORS: true, allowTaint: true }).then(
+        canvas => {
+          return new Promise(resolve => {
+            const dataURLType = type.toLowerCase()
+            const datauri = quality
+              ? canvas.toDataURL('image/' + dataURLType, quality)
+              : canvas.toDataURL('image/' + dataURLType)
+            iframe.parentNode.removeChild(iframe)
+            let bloburl
+
+            const done = () => {
+              const obj = {
+                datauri,
+                bloburl,
+                svg,
+                issues,
+                issueCodes,
+                type: imgType,
+                mimeType,
+                quality,
+                WindowName
+              }
+              if (!opts.avoidEvent) {
+                svgCanvas.call('ed', obj)
+              }
+              resolve(obj)
+            }
+            if (canvas.toBlob) {
+              canvas.toBlob(
+                blob => {
+                  bloburl = createObjectURL(blob)
+                  done()
+                },
+                mimeType,
+                quality
+              )
+              return
+            }
+            bloburl = dataURLToObjectURL(datauri)
+            done()
+          })
+        }
+      )
+    }, 1000)
+  }
+  document.body.appendChild(iframe)
+}
+
+/**
+ * @typedef {void|"save"|"arraybuffer"|"blob"|"datauristring"|"dataurlstring"|"dataurlnewwindow"|"datauri"|"dataurl"} external:jsPDF.OutputType
+ * @todo Newer version to add also allows these `outputType` values "bloburi"|"bloburl" which return strings, so document here and for `outputType` of `module:svgcanvas.PDFedResults` below if added
+ */
+/**
+ * @typedef {PlainObject} module:svgcanvas.PDFedResults
+ * @property {string} svg The SVG PDF output
+ * @property {string|ArrayBuffer|Blob|window} output The output based on the `outputType`;
+ * if `undefined`, "datauristring", "dataurlstring", "datauri",
+ * or "dataurl", will be a string (`undefined` gives a document, while the others
+ * build as Data URLs; "datauri" and "dataurl" change the location of the current page); if
+ * "arraybuffer", will return `ArrayBuffer`; if "blob", returns a `Blob`;
+ * if "dataurlnewwindow", will change the current page's location and return a string
+ * if in Safari and no window object is found; otherwise opens in, and returns, a new `window`
+ * object; if "save", will have the same return as "dataurlnewwindow" if
+ * `navigator.getUserMedia` support is found without `URL.createObjectURL` support; otherwise
+ * returns `undefined` but attempts to save
+ * @property {external:jsPDF.OutputType} outputType
+ * @property {string[]} issues The human-readable localization messages of corresponding `issueCodes`
+ * @property {module:svgcanvas.IssueCode[]} issueCodes
+ * @property {string} WindowName
+ */
+
+/**
+ * Generates a PDF based on the current image, then calls "edPDF" with
+ * an object including the string, the data URL, and any issues found.
+ * @function module:svgcanvas.SvgCanvas#PDF
+ * @param {string} [WindowName] Will also be used for the download file name here
+ * @param {external:jsPDF.OutputType} [outputType="dataurlstring"]
+ * @fires module:svgcanvas.SvgCanvas#event:edPDF
+ * @returns {Promise<module:svgcanvas.PDFedResults>} Resolves to {@link module:svgcanvas.PDFedResults}
+ */
+const exportPDF = async (
+  WindowName,
+  outputType = isChrome() ? 'save' : undefined
+) => {
+  const res = svgCanvas.getResolution()
+  const orientation = res.w > res.h ? 'landscape' : 'portrait'
+  const unit = 'pt' // curConfig.baseUnit; // We could use baseUnit, but that is presumably not intended for  purposes
+  const iframe = document.createElement('iframe')
+  iframe.onload = () => {
+    const iframedoc = iframe.contentDocument || iframe.contentWindow.document
+    const ele = svgCanvas.getSvgContent()
+    const cln = ele.cloneNode(true)
+    iframedoc.body.appendChild(cln)
+    setTimeout(() => {
+      // eslint-disable-next-line promise/catch-or-return
+      html2canvas(iframedoc.body, { useCORS: true, allowTaint: true }).then(
+        canvas => {
+          const imgData = canvas.toDataURL('image/png')
+          const doc = new JsPDF({
+            orientation,
+            unit,
+            format: [res.w, res.h]
+          })
+          const docTitle = svgCanvas.getDocumentTitle()
+          doc.setProperties({
+            title: docTitle
+          })
+          doc.addImage(imgData, 'PNG', 0, 0, res.w, res.h)
+          iframe.parentNode.removeChild(iframe)
+          const { issues, issueCodes } = getIssues()
+          outputType = outputType || 'dataurlstring'
+          const obj = { issues, issueCodes, WindowName, outputType }
+          obj.output = doc.output(
+            outputType,
+            outputType === 'save' ? WindowName || 'svg.pdf' : undefined
+          )
+          svgCanvas.call('edPDF', obj)
+          return obj
+        }
+      )
+    }, 1000)
+  }
+  document.body.appendChild(iframe)
+}
+/**
+ * Ensure each element has a unique ID.
+ * @function module:svgcanvas.SvgCanvas#uniquifyElems
+ * @param {Element} g - The parent element of the tree to give unique IDs
+ * @returns {void}
+ */
+const uniquifyElemsMethod = (g) => {
+  const ids = {}
+  // TODO: Handle markers and connectors. These are not yet re-identified properly
+  // as their referring elements do not get remapped.
+  //
+  // <marker id='se_marker_end_svg_7'/>
+  // <polyline id='svg_7' se:connector='svg_1 svg_6' marker-end='url(#se_marker_end_svg_7)'/>
+  //
+  // Problem #1: if svg_1 gets renamed, we do not update the polyline's se:connector attribute
+  // Problem #2: if the polyline svg_7 gets renamed, we do not update the marker id nor the polyline's marker-end attribute
+  const refElems = [
+    'filter',
+    'linearGradient',
+    'pattern',
+    'radialGradient',
+    'symbol',
+    'textPath',
+    'use'
+  ]
+
+  walkTree(g, (n) => {
+    // if it's an element node
+    if (n.nodeType === 1) {
+      // and the element has an ID
+      if (n.id) {
+        // and we haven't tracked this ID yet
+        if (!(n.id in ids)) {
+          // add this id to our map
+          ids[n.id] = { elem: null, attrs: [], hrefs: [] }
+        }
+        ids[n.id].elem = n
+      }
+
+      // now search for all attributes on this element that might refer
+      // to other elements
+      svgCanvas.getrefAttrs().forEach((attr) => {
+        const attrnode = n.getAttributeNode(attr)
+        if (attrnode) {
+          // the incoming file has been sanitized, so we should be able to safely just strip off the leading #
+          const url = svgCanvas.getUrlFromAttr(attrnode.value)
+          const refid = url ? url.substr(1) : null
+          if (refid) {
+            if (!(refid in ids)) {
+              // add this id to our map
+              ids[refid] = { elem: null, attrs: [], hrefs: [] }
+            }
+            ids[refid].attrs.push(attrnode)
+          }
+        }
+      })
+
+      // check xlink:href now
+      const href = svgCanvas.getHref(n)
+      // TODO: what if an <image> or <a> element refers to an element internally?
+      if (href && refElems.includes(n.nodeName)) {
+        const refid = href.substr(1)
+        if (refid) {
+          if (!(refid in ids)) {
+            // add this id to our map
+            ids[refid] = { elem: null, attrs: [], hrefs: [] }
+          }
+          ids[refid].hrefs.push(n)
+        }
+      }
+    }
+  })
+
+  // in ids, we now have a map of ids, elements and attributes, let's re-identify
+  for (const oldid in ids) {
+    if (!oldid) {
+      continue
+    }
+    const { elem } = ids[oldid]
+    if (elem) {
+      const newid = svgCanvas.getNextId()
+
+      // assign element its new id
+      elem.id = newid
+
+      // remap all url() attributes
+      const { attrs } = ids[oldid]
+      let j = attrs.length
+      while (j--) {
+        const attr = attrs[j]
+        attr.ownerElement.setAttribute(attr.name, 'url(#' + newid + ')')
+      }
+
+      // remap all href attributes
+      const hreffers = ids[oldid].hrefs
+      let k = hreffers.length
+      while (k--) {
+        const hreffer = hreffers[k]
+        svgCanvas.setHref(hreffer, '#' + newid)
+      }
+    }
+  }
+}
+
+/**
+ * Assigns reference data for each use element.
+ * @function module:svgcanvas.SvgCanvas#setUseData
+ * @param {Element} parent
+ * @returns {void}
+ */
+const setUseDataMethod = (parent) => {
+  let elems = parent
+
+  if (parent.tagName !== 'use') {
+    // elems = elems.find('use');
+    elems = elems.querySelectorAll('use')
+  }
+
+  Array.prototype.forEach.call(elems, (el, _) => {
+    const dataStorage = svgCanvas.getDataStorage()
+    const id = svgCanvas.getHref(el).substr(1)
+    const refElem = svgCanvas.getElement(id)
+    if (!refElem) {
+      return
+    }
+    dataStorage.put(el, 'ref', refElem)
+    if (refElem.tagName === 'symbol' || refElem.tagName === 'svg') {
+      dataStorage.put(el, 'symbol', refElem)
+      dataStorage.put(el, 'ref', refElem)
+    }
+  })
+}
+
+/**
+ * Looks at DOM elements inside the `<defs>` to see if they are referred to,
+ * removes them from the DOM if they are not.
+ * @function module:svgcanvas.SvgCanvas#removeUnusedDefElems
+ * @returns {Integer} The number of elements that were removed
+ */
+const removeUnusedDefElemsMethod = () => {
+  const defs = svgCanvas.getSvgContent().getElementsByTagNameNS(NS.SVG, 'defs')
+  if (!defs || !defs.length) {
+    return 0
+  }
+
+  // if (!defs.firstChild) { return; }
+
+  const defelemUses = []
+  let numRemoved = 0
+  const attrs = [
+    'fill',
+    'stroke',
+    'filter',
+    'marker-start',
+    'marker-mid',
+    'marker-end'
+  ]
+  const alen = attrs.length
+
+  const allEls = svgCanvas.getSvgContent().getElementsByTagNameNS(NS.SVG, '*')
+  const allLen = allEls.length
+
+  let i
+  let j
+  for (i = 0; i < allLen; i++) {
+    const el = allEls[i]
+    for (j = 0; j < alen; j++) {
+      const ref = svgCanvas.getUrlFromAttr(el.getAttribute(attrs[j]))
+      if (ref) {
+        defelemUses.push(ref.substr(1))
+      }
+    }
+
+    // gradients can refer to other gradients
+    const href = getHref(el)
+    if (href && href.startsWith('#')) {
+      defelemUses.push(href.substr(1))
+    }
+  }
+
+  Array.prototype.forEach.call(defs, (def, i) => {
+    const defelems = def.querySelectorAll(
+      'linearGradient, radialGradient, filter, marker, svg, symbol'
+    )
+    i = defelems.length
+    while (i--) {
+      const defelem = defelems[i]
+      const { id } = defelem
+      if (!defelemUses.includes(id)) {
+        // Not found, so remove (but remember)
+        svgCanvas.setRemovedElements(id, defelem)
+        defelem.remove()
+        numRemoved++
+      }
+    }
+  })
+
+  return numRemoved
+}
+/**
+ * Converts gradients from userSpaceOnUse to objectBoundingBox.
+ * @function module:svgcanvas.SvgCanvas#convertGradients
+ * @param {Element} elem
+ * @returns {void}
+ */
+const convertGradientsMethod = (elem) => {
+  let elems = elem.querySelectorAll('linearGradient, radialGradient')
+  if (!elems.length && isWebkit()) {
+    // Bug in webkit prevents regular *Gradient selector search
+    elems = Array.prototype.filter.call(elem.querySelectorAll('*'), (
+      curThis
+    ) => {
+      return curThis.tagName.includes('Gradient')
+    })
+  }
+  Array.prototype.forEach.call(elems, (grad) => {
+    if (grad.getAttribute('gradientUnits') === 'userSpaceOnUse') {
+      const svgContent = svgCanvas.getSvgContent()
+      // TODO: Support more than one element with this ref by duplicating parent grad
+      let fillStrokeElems = svgContent.querySelectorAll(
+        '[fill="url(#' + grad.id + ')"],[stroke="url(#' + grad.id + ')"]'
+      )
+      if (!fillStrokeElems.length) {
+        const tmpFillStrokeElems = svgContent.querySelectorAll(
+          '[*|href="#' + grad.id + '"]'
+        )
+        if (!tmpFillStrokeElems.length) {
+          return
+        } else {
+          if (
+            (tmpFillStrokeElems[0].tagName === 'linearGradient' ||
+              tmpFillStrokeElems[0].tagName === 'radialGradient') &&
+            tmpFillStrokeElems[0].getAttribute('gradientUnits') ===
+              'userSpaceOnUse'
+          ) {
+            fillStrokeElems = svgContent.querySelectorAll(
+              '[fill="url(#' +
+                tmpFillStrokeElems[0].id +
+                ')"],[stroke="url(#' +
+                tmpFillStrokeElems[0].id +
+                ')"]'
+            )
+          } else {
+            return
+          }
+        }
+      }
+      // get object's bounding box
+      const bb = utilsGetBBox(fillStrokeElems[0])
+
+      // This will occur if the element is inside a <defs> or a <symbol>,
+      // in which we shouldn't need to convert anyway.
+      if (!bb) {
+        return
+      }
+      if (grad.tagName === 'linearGradient') {
+        const gCoords = {
+          x1: grad.getAttribute('x1'),
+          y1: grad.getAttribute('y1'),
+          x2: grad.getAttribute('x2'),
+          y2: grad.getAttribute('y2')
+        }
+
+        // If has transform, convert
+        const tlist = grad.gradientTransform.baseVal
+        if (tlist?.numberOfItems > 0) {
+          const m = transformListToTransform(tlist).matrix
+          const pt1 = transformPoint(gCoords.x1, gCoords.y1, m)
+          const pt2 = transformPoint(gCoords.x2, gCoords.y2, m)
+
+          gCoords.x1 = pt1.x
+          gCoords.y1 = pt1.y
+          gCoords.x2 = pt2.x
+          gCoords.y2 = pt2.y
+          grad.removeAttribute('gradientTransform')
+        }
+        grad.setAttribute('x1', (gCoords.x1 - bb.x) / bb.width)
+        grad.setAttribute('y1', (gCoords.y1 - bb.y) / bb.height)
+        grad.setAttribute('x2', (gCoords.x2 - bb.x) / bb.width)
+        grad.setAttribute('y2', (gCoords.y2 - bb.y) / bb.height)
+        grad.removeAttribute('gradientUnits')
+      }
+    }
+  })
+}