@svgedit/svgcanvas 7.2.7 → 7.4.2

package/core/recalculate.js

@@ -5,7 +5,14 @@
  */
 
 import { convertToNum } from './units.js'
-import { getRotationAngle, getBBox, getRefElem } from './utilities.js'
+import { NS } from './namespaces.js'
+import {
+  getRotationAngle,
+  getBBox,
+  getHref,
+  getRefElem,
+  findDefs
+} from './utilities.js'
 import { BatchCommand, ChangeElementCommand } from './history.js'
 import { remapElement } from './coords.js'
 import {
@@ -36,20 +43,93 @@ export const init = canvas => {
  * @param {string} attr - The clip-path attribute value containing the clipPath's ID
  * @param {number} tx - The translation's x value
  * @param {number} ty - The translation's y value
- * @returns {void}
+ * @param {Element} elem - The element referencing the clipPath
+ * @returns {string|undefined} The clip-path attribute used after updates.
  */
-export const updateClipPath = (attr, tx, ty) => {
+export const updateClipPath = (attr, tx, ty, elem) => {
   const clipPath = getRefElem(attr)
-  if (!clipPath) return
-  const path = clipPath.firstChild
+  if (!clipPath) return undefined
+  if (elem && clipPath.id) {
+    const svgContent = svgCanvas.getSvgContent?.()
+    if (svgContent) {
+      const refSelector = `[clip-path="url(#${clipPath.id})"]`
+      const users = svgContent.querySelectorAll(refSelector)
+      if (users.length > 1) {
+        const newClipPath = clipPath.cloneNode(true)
+        newClipPath.id = svgCanvas.getNextId()
+        findDefs().append(newClipPath)
+        elem.setAttribute('clip-path', `url(#${newClipPath.id})`)
+        return updateClipPath(`url(#${newClipPath.id})`, tx, ty)
+      }
+    }
+  }
+  const path = clipPath.firstElementChild
+  if (!path) return attr
   const cpXform = getTransformList(path)
+  if (!cpXform) {
+    const tag = (path.tagName || '').toLowerCase()
+    if (tag === 'rect') {
+      const x = convertToNum('x', path.getAttribute('x') || 0) + tx
+      const y = convertToNum('y', path.getAttribute('y') || 0) + ty
+      path.setAttribute('x', x)
+      path.setAttribute('y', y)
+    } else if (tag === 'circle' || tag === 'ellipse') {
+      const cx = convertToNum('cx', path.getAttribute('cx') || 0) + tx
+      const cy = convertToNum('cy', path.getAttribute('cy') || 0) + ty
+      path.setAttribute('cx', cx)
+      path.setAttribute('cy', cy)
+    } else if (tag === 'line') {
+      path.setAttribute('x1', convertToNum('x1', path.getAttribute('x1') || 0) + tx)
+      path.setAttribute('y1', convertToNum('y1', path.getAttribute('y1') || 0) + ty)
+      path.setAttribute('x2', convertToNum('x2', path.getAttribute('x2') || 0) + tx)
+      path.setAttribute('y2', convertToNum('y2', path.getAttribute('y2') || 0) + ty)
+    } else if (tag === 'polyline' || tag === 'polygon') {
+      const points = (path.getAttribute('points') || '').trim()
+      if (points) {
+        const updated = points.split(/\s+/).map((pair) => {
+          const [x, y] = pair.split(',')
+          const nx = Number(x) + tx
+          const ny = Number(y) + ty
+          return `${nx},${ny}`
+        })
+        path.setAttribute('points', updated.join(' '))
+      }
+    } else {
+      path.setAttribute('transform', `translate(${tx},${ty})`)
+    }
+    return attr
+  }
+  if (cpXform.numberOfItems) {
+    const translate = svgCanvas.getSvgRoot().createSVGMatrix()
+    translate.e = tx
+    translate.f = ty
+    const combined = matrixMultiply(transformListToTransform(cpXform).matrix, translate)
+    const merged = svgCanvas.getSvgRoot().createSVGTransform()
+    merged.setMatrix(combined)
+    cpXform.clear()
+    cpXform.appendItem(merged)
+    return attr
+  }
+  const tag = (path.tagName || '').toLowerCase()
+  if ((tag === 'polyline' || tag === 'polygon') && !path.points?.numberOfItems) {
+    const points = (path.getAttribute('points') || '').trim()
+    if (points) {
+      const updated = points.split(/\s+/).map((pair) => {
+        const [x, y] = pair.split(',')
+        const nx = Number(x) + tx
+        const ny = Number(y) + ty
+        return `${nx},${ny}`
+      })
+      path.setAttribute('points', updated.join(' '))
+    }
+    return
+  }
   const newTranslate = svgCanvas.getSvgRoot().createSVGTransform()
   newTranslate.setTranslate(tx, ty)
 
   cpXform.appendItem(newTranslate)
-
-  // Update clipPath's dimensions
   recalculateDimensions(path)
+  return attr
 }
 
 /**
@@ -60,6 +140,20 @@ export const updateClipPath = (attr, tx, ty) => {
  */
 export const recalculateDimensions = selected => {
   if (!selected) return null
+
+  // Don't recalculate dimensions for groups - this would push their transforms down to children
+  // Groups should maintain their transform attribute on the group element itself
+  if (selected.tagName === 'g' || selected.tagName === 'a') {
+    return null
+  }
+
+  if (
+    (selected.getAttribute?.('clip-path')) &&
+    selected.querySelector?.('[clip-path]')
+  ) {
+    // Keep transforms when clip-paths are present to avoid mutating defs.
+    return null
+  }
   const svgroot = svgCanvas.getSvgRoot()
   const dataStorage = svgCanvas.getDataStorage()
   const tlist = getTransformList(selected)
@@ -105,6 +199,11 @@ export const recalculateDimensions = selected => {
     return null
   }
 
+  // Avoid remapping transforms on <use> to preserve referenced positioning/rotation
+  if (selected.tagName === 'use') {
+    return null
+  }
+
   // Set up undo command
   const batchCmd = new BatchCommand('Transform')
 
@@ -206,14 +305,310 @@ export const recalculateDimensions = selected => {
 
   // Handle group elements ('g' or 'a')
   if ((selected.tagName === 'g' && !gsvg) || selected.tagName === 'a') {
-    // Group handling code
-    // [Group handling code remains unchanged]
-    // For brevity, group handling code is not included here
-    // Ensure to handle group elements correctly as per original logic
-    // This includes processing child elements and applying transformations appropriately
-    // ... [Start of group handling code]
-    // The group handling code is complex and extensive; it remains the same as in the original code.
-    // ... [End of group handling code]
+    const box = getBBox(selected)
+
+    oldcenter = { x: box.x + box.width / 2, y: box.y + box.height / 2 }
+    newcenter = transformPoint(
+      box.x + box.width / 2,
+      box.y + box.height / 2,
+      transformListToTransform(tlist).matrix
+    )
+
+    const gangle = getRotationAngle(selected)
+    if (gangle) {
+      const a = gangle * Math.PI / 180
+      const s = Math.abs(a) > (1.0e-10) ? Math.sin(a) / (1 - Math.cos(a)) : 2 / a
+      for (let i = 0; i < tlist.numberOfItems; ++i) {
+        const xform = tlist.getItem(i)
+        if (xform.type === SVGTransform.SVG_TRANSFORM_ROTATE) {
+          const rm = xform.matrix
+          oldcenter.y = (s * rm.e + rm.f) / 2
+          oldcenter.x = (rm.e - s * rm.f) / 2
+          tlist.removeItem(i)
+          break
+        }
+      }
+    }
+
+    const N = tlist.numberOfItems
+    let tx = 0
+    let ty = 0
+    let operation = 0
+
+    let firstM
+    if (N) {
+      firstM = tlist.getItem(0).matrix
+    }
+
+    let oldStartTransform
+    if (
+      N >= 3 &&
+      tlist.getItem(N - 2).type === SVGTransform.SVG_TRANSFORM_SCALE &&
+      tlist.getItem(N - 3).type === SVGTransform.SVG_TRANSFORM_TRANSLATE &&
+      tlist.getItem(N - 1).type === SVGTransform.SVG_TRANSFORM_TRANSLATE
+    ) {
+      operation = 3 // scale
+
+      const tm = tlist.getItem(N - 3).matrix
+      const sm = tlist.getItem(N - 2).matrix
+      const tmn = tlist.getItem(N - 1).matrix
+
+      const children = selected.childNodes
+      let c = children.length
+      while (c--) {
+        const child = children.item(c)
+        if (child.nodeType !== 1) continue
+
+        const childTlist = getTransformList(child)
+        if (!childTlist) continue
+
+        const m = transformListToTransform(childTlist).matrix
+
+        const angle = getRotationAngle(child)
+        oldStartTransform = svgCanvas.getStartTransform()
+        svgCanvas.setStartTransform(child.getAttribute('transform'))
+
+        if (angle || hasMatrixTransform(childTlist)) {
+          const e2t = svgroot.createSVGTransform()
+          e2t.setMatrix(matrixMultiply(tm, sm, tmn, m))
+          childTlist.clear()
+          childTlist.appendItem(e2t)
+        } else {
+          const t2n = matrixMultiply(m.inverse(), tmn, m)
+          const t2 = svgroot.createSVGMatrix()
+          t2.e = -t2n.e
+          t2.f = -t2n.f
+
+          const s2 = matrixMultiply(
+            t2.inverse(),
+            m.inverse(),
+            tm,
+            sm,
+            tmn,
+            m,
+            t2n.inverse()
+          )
+
+          const translateOrigin = svgroot.createSVGTransform()
+          const scale = svgroot.createSVGTransform()
+          const translateBack = svgroot.createSVGTransform()
+          translateOrigin.setTranslate(t2n.e, t2n.f)
+          scale.setScale(s2.a, s2.d)
+          translateBack.setTranslate(t2.e, t2.f)
+          childTlist.appendItem(translateBack)
+          childTlist.appendItem(scale)
+          childTlist.appendItem(translateOrigin)
+        }
+
+        const recalculatedDimensions = recalculateDimensions(child)
+        if (recalculatedDimensions) {
+          batchCmd.addSubCommand(recalculatedDimensions)
+        }
+        svgCanvas.setStartTransform(oldStartTransform)
+      }
+
+      tlist.removeItem(N - 1)
+      tlist.removeItem(N - 2)
+      tlist.removeItem(N - 3)
+    } else if (N >= 3 && tlist.getItem(N - 1).type === SVGTransform.SVG_TRANSFORM_MATRIX) {
+      operation = 3 // scale (matrix imposition)
+      const m = transformListToTransform(tlist).matrix
+      const e2t = svgroot.createSVGTransform()
+      e2t.setMatrix(m)
+      tlist.clear()
+      tlist.appendItem(e2t)
+    } else if (
+      (N === 1 ||
+        (N > 1 && tlist.getItem(1).type !== SVGTransform.SVG_TRANSFORM_SCALE)) &&
+      tlist.getItem(0).type === SVGTransform.SVG_TRANSFORM_TRANSLATE
+    ) {
+      operation = 2 // translate
+      const tM = transformListToTransform(tlist).matrix
+      tlist.removeItem(0)
+      const mInv = transformListToTransform(tlist).matrix.inverse()
+      const m2 = matrixMultiply(mInv, tM)
+
+      tx = m2.e
+      ty = m2.f
+
+      if (tx !== 0 || ty !== 0) {
+        const selectedClipPath = selected.getAttribute?.('clip-path')
+        if (selectedClipPath) {
+          updateClipPath(selectedClipPath, tx, ty, selected)
+        }
+
+        const children = selected.childNodes
+        let c = children.length
+
+        const clipPathsDone = []
+        while (c--) {
+          const child = children.item(c)
+          if (child.nodeType !== 1) continue
+
+          const clipPathAttr = child.getAttribute('clip-path')
+          if (clipPathAttr && !clipPathsDone.includes(clipPathAttr)) {
+            const updatedAttr = updateClipPath(clipPathAttr, tx, ty, child)
+            clipPathsDone.push(updatedAttr || clipPathAttr)
+          }
+
+          const childTlist = getTransformList(child)
+          if (!childTlist) continue
+
+          oldStartTransform = svgCanvas.getStartTransform()
+          svgCanvas.setStartTransform(child.getAttribute('transform'))
+
+          const newxlate = svgroot.createSVGTransform()
+          newxlate.setTranslate(tx, ty)
+          if (childTlist.numberOfItems) {
+            childTlist.insertItemBefore(newxlate, 0)
+          } else {
+            childTlist.appendItem(newxlate)
+          }
+          const recalculatedDimensions = recalculateDimensions(child)
+          if (recalculatedDimensions) {
+            batchCmd.addSubCommand(recalculatedDimensions)
+          }
+
+          const uses = selected.getElementsByTagNameNS(NS.SVG, 'use')
+          const href = `#${child.id}`
+          let u = uses.length
+          while (u--) {
+            const useElem = uses.item(u)
+            if (href === getHref(useElem)) {
+              const usexlate = svgroot.createSVGTransform()
+              usexlate.setTranslate(-tx, -ty)
+              const useTlist = getTransformList(useElem)
+              useTlist?.insertItemBefore(usexlate, 0)
+              const useRecalc = recalculateDimensions(useElem)
+              if (useRecalc) {
+                batchCmd.addSubCommand(useRecalc)
+              }
+            }
+          }
+
+          svgCanvas.setStartTransform(oldStartTransform)
+        }
+      }
+    } else if (
+      N === 1 &&
+      tlist.getItem(0).type === SVGTransform.SVG_TRANSFORM_MATRIX &&
+      !gangle
+    ) {
+      operation = 1
+      const m = tlist.getItem(0).matrix
+      const children = selected.childNodes
+      let c = children.length
+      while (c--) {
+        const child = children.item(c)
+        if (child.nodeType !== 1) continue
+
+        const childTlist = getTransformList(child)
+        if (!childTlist) continue
+
+        oldStartTransform = svgCanvas.getStartTransform()
+        svgCanvas.setStartTransform(child.getAttribute('transform'))
+
+        const em = matrixMultiply(m, transformListToTransform(childTlist).matrix)
+        const e2m = svgroot.createSVGTransform()
+        e2m.setMatrix(em)
+        childTlist.clear()
+        childTlist.appendItem(e2m)
+
+        const recalculatedDimensions = recalculateDimensions(child)
+        if (recalculatedDimensions) {
+          batchCmd.addSubCommand(recalculatedDimensions)
+        }
+        svgCanvas.setStartTransform(oldStartTransform)
+
+        const sw = child.getAttribute('stroke-width')
+        if (child.getAttribute('stroke') !== 'none' && !Number.isNaN(Number(sw))) {
+          const avg = (Math.abs(em.a) + Math.abs(em.d)) / 2
+          child.setAttribute('stroke-width', Number(sw) * avg)
+        }
+      }
+      tlist.clear()
+    } else {
+      if (gangle) {
+        const newRot = svgroot.createSVGTransform()
+        newRot.setRotate(gangle, newcenter.x, newcenter.y)
+        if (tlist.numberOfItems) {
+          tlist.insertItemBefore(newRot, 0)
+        } else {
+          tlist.appendItem(newRot)
+        }
+      }
+      if (tlist.numberOfItems === 0) {
+        selected.removeAttribute('transform')
+      }
+      return null
+    }
+
+    if (operation === 2) {
+      if (gangle) {
+        newcenter = {
+          x: oldcenter.x + firstM.e,
+          y: oldcenter.y + firstM.f
+        }
+
+        const newRot = svgroot.createSVGTransform()
+        newRot.setRotate(gangle, newcenter.x, newcenter.y)
+        if (tlist.numberOfItems) {
+          tlist.insertItemBefore(newRot, 0)
+        } else {
+          tlist.appendItem(newRot)
+        }
+      }
+    } else if (operation === 3) {
+      const m = transformListToTransform(tlist).matrix
+      const roldt = svgroot.createSVGTransform()
+      roldt.setRotate(gangle, oldcenter.x, oldcenter.y)
+      const rold = roldt.matrix
+      const rnew = svgroot.createSVGTransform()
+      rnew.setRotate(gangle, newcenter.x, newcenter.y)
+      const rnewInv = rnew.matrix.inverse()
+      const mInv = m.inverse()
+      const extrat = matrixMultiply(mInv, rnewInv, rold, m)
+
+      tx = extrat.e
+      ty = extrat.f
+
+      if (tx !== 0 || ty !== 0) {
+        const children = selected.childNodes
+        let c = children.length
+        while (c--) {
+          const child = children.item(c)
+          if (child.nodeType !== 1) continue
+
+          const childTlist = getTransformList(child)
+          if (!childTlist) continue
+
+          oldStartTransform = svgCanvas.getStartTransform()
+          svgCanvas.setStartTransform(child.getAttribute('transform'))
+
+          const newxlate = svgroot.createSVGTransform()
+          newxlate.setTranslate(tx, ty)
+          if (childTlist.numberOfItems) {
+            childTlist.insertItemBefore(newxlate, 0)
+          } else {
+            childTlist.appendItem(newxlate)
+          }
+
+          const recalculatedDimensions = recalculateDimensions(child)
+          if (recalculatedDimensions) {
+            batchCmd.addSubCommand(recalculatedDimensions)
+          }
+          svgCanvas.setStartTransform(oldStartTransform)
+        }
+      }
+
+      if (gangle) {
+        if (tlist.numberOfItems) {
+          tlist.insertItemBefore(rnew, 0)
+        } else {
+          tlist.appendItem(rnew)
+        }
+      }
+    }
   } else {
     // Non-group elements
 

package/core/sanitize.js

@@ -7,9 +7,11 @@
  */
 
 import { getReverseNS, NS } from './namespaces.js'
-import { getHref, setHref, getUrlFromAttr } from './utilities.js'
+import { getHref, getRefElem, setHref, getUrlFromAttr } from './utilities.js'
+import { warn } from '../common/logger.js'
 
 const REVERSE_NS = getReverseNS()
+const FONT_ATTRIBUTES = ['font-family', 'font-size', 'font-stretch', 'font-style', 'font-weight']
 
 // Todo: Split out into core attributes, presentation attributes, etc. so consistent
 /**
@@ -38,8 +40,12 @@ const svgWhiteList_ = {
   feOffset: ['dx', 'in', 'dy', 'result'],
   filter: ['color-interpolation-filters', 'filterRes', 'filterUnits', 'height', 'href', 'primitiveUnits', 'requiredFeatures', 'width', 'x', 'xlink:href', 'y'],
   foreignObject: ['font-size', 'height', 'opacity', 'requiredFeatures', 'width', 'x', 'y'],
-  g: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'font-family', 'font-size', 'font-style', 'font-weight', 'text-anchor'],
-  image: ['clip-path', 'clip-rule', 'filter', 'height', 'mask', 'opacity', 'requiredFeatures', 'systemLanguage', 'width', 'x', 'href', 'xlink:href', 'xlink:title', 'y'],
+  g: [...FONT_ATTRIBUTES, 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'text-anchor'],
+  image: [
+    'clip-path', 'clip-rule', 'filter', 'height', 'mask', 'opacity',
+    'preserveAspectRatio', 'requiredFeatures', 'systemLanguage', 'viewBox',
+    'width', 'x', 'href', 'xlink:href', 'xlink:title', 'y'
+  ],
   line: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'x1', 'x2', 'y1', 'y2'],
   linearGradient: ['gradientTransform', 'gradientUnits', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'x1', 'x2', 'href', 'xlink:href', 'y1', 'y2'],
   marker: ['markerHeight', 'markerUnits', 'markerWidth', 'orient', 'preserveAspectRatio', 'refX', 'refY', 'se_type', 'systemLanguage', 'viewBox'],
@@ -55,11 +61,11 @@ const svgWhiteList_ = {
   style: ['type'],
   svg: ['clip-path', 'clip-rule', 'enable-background', 'filter', 'height', 'mask', 'preserveAspectRatio', 'requiredFeatures', 'systemLanguage', 'version', 'viewBox', 'width', 'x', 'xmlns', 'xmlns:se', 'xmlns:xlink', 'xmlns:oi', 'oi:animations', 'y', 'stroke-linejoin', 'fill-rule', 'aria-label', 'stroke-width', 'fill-rule', 'xml:space'],
   switch: ['requiredFeatures', 'systemLanguage'],
-  symbol: ['fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'opacity', 'overflow', 'preserveAspectRatio', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'viewBox', 'width', 'height'],
-  text: ['clip-path', 'clip-rule', 'dominant-baseline', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'text-anchor', 'letter-spacing', 'word-spacing', 'text-decoration', 'textLength', 'lengthAdjust', 'x', 'xml:space', 'y'],
+  symbol: [...FONT_ATTRIBUTES, 'fill', 'fill-opacity', 'fill-rule', 'filter', 'opacity', 'overflow', 'preserveAspectRatio', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'viewBox', 'width', 'height'],
+  text: [...FONT_ATTRIBUTES, 'clip-path', 'clip-rule', 'dominant-baseline', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'text-anchor', 'letter-spacing', 'word-spacing', 'text-decoration', 'textLength', 'lengthAdjust', 'x', 'xml:space', 'y'],
   textPath: ['dominant-baseline', 'href', 'method', 'requiredFeatures', 'spacing', 'startOffset', 'systemLanguage', 'xlink:href'],
   title: [],
-  tspan: ['clip-path', 'clip-rule', 'dx', 'dy', 'dominant-baseline', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'mask', 'opacity', 'requiredFeatures', 'rotate', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'text-anchor', 'textLength', 'x', 'xml:space', 'y'],
+  tspan: [...FONT_ATTRIBUTES, 'clip-path', 'clip-rule', 'dx', 'dy', 'dominant-baseline', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'mask', 'opacity', 'requiredFeatures', 'rotate', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'text-anchor', 'textLength', 'x', 'xml:space', 'y'],
   use: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'height', 'href', 'mask', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'width', 'x', 'xlink:href', 'y', 'overflow'],
   // Filter Primitives
   feComponentTransfer: ['in', 'result'],
@@ -126,22 +132,24 @@ const svgWhiteList_ = {
 }
 
 // add generic attributes to all elements of the whitelist
-Object.keys(svgWhiteList_).forEach((element) => { svgWhiteList_[element] = [...svgWhiteList_[element], ...svgGenericWhiteList] })
+for (const [element, attrs] of Object.entries(svgWhiteList_)) {
+  svgWhiteList_[element] = [...attrs, ...svgGenericWhiteList]
+}
 
 // Produce a Namespace-aware version of svgWhitelist
 const svgWhiteListNS_ = {}
-Object.entries(svgWhiteList_).forEach(([elt, atts]) => {
+for (const [elt, atts] of Object.entries(svgWhiteList_)) {
   const attNS = {}
-  Object.entries(atts).forEach(([_i, att]) => {
+  for (const att of atts) {
     if (att.includes(':')) {
-      const v = att.split(':')
-      attNS[v[1]] = NS[(v[0]).toUpperCase()]
+      const [prefix, localName] = att.split(':')
+      attNS[localName] = NS[prefix.toUpperCase()]
     } else {
       attNS[att] = att === 'xmlns' ? NS.XMLNS : null
     }
-  })
+  }
   svgWhiteListNS_[elt] = attNS
-})
+}
 
 /**
 * Sanitizes the input node and its children.
@@ -201,7 +209,7 @@ export const sanitizeSvg = (node) => {
             const seAttrNS = (attrName.startsWith('se:')) ? NS.SE : ((attrName.startsWith('oi:')) ? NS.OI : null)
             seAttrs.push([attrName, attr.value, seAttrNS])
           } else {
-            console.warn(`sanitizeSvg: attribute ${attrName} in element ${node.nodeName} not in whitelist is removed: ${node.outerHTML}`)
+            warn(`attribute ${attrName} in element ${node.nodeName} not in whitelist is removed: ${node.outerHTML}`, null, 'sanitize')
             node.removeAttributeNS(attrNsURI, attrLocalName)
           }
         }
@@ -224,6 +232,13 @@ export const sanitizeSvg = (node) => {
       }
     }
 
+    // If legacy xlink:href is present but href is missing, mirror it to href for modern browsers
+    const xlinkHref = node.getAttributeNS(NS.XLINK, 'href')
+    if (xlinkHref) {
+      node.setAttribute('href', xlinkHref)
+      node.removeAttributeNS(NS.XLINK, 'href')
+    }
+
     Object.values(seAttrs).forEach(([att, val, ns]) => {
       node.setAttributeNS(ns, att, val)
     })
@@ -236,17 +251,35 @@ export const sanitizeSvg = (node) => {
         'radialGradient', 'textPath', 'use'].includes(node.nodeName) && href[0] !== '#') {
       // remove the attribute (but keep the element)
       setHref(node, '')
-      console.warn(`sanitizeSvg: attribute href in element ${node.nodeName} pointing to a non-local reference (${href}) is removed: ${node.outerHTML}`)
+      warn(`attribute href in element ${node.nodeName} pointing to a non-local reference (${href}) is removed: ${node.outerHTML}`, null, 'sanitize')
       node.removeAttributeNS(NS.XLINK, 'href')
       node.removeAttribute('href')
     }
 
     // Safari crashes on a <use> without a xlink:href, so we just remove the node here
     if (node.nodeName === 'use' && !getHref(node)) {
-      console.warn(`sanitizeSvg: element ${node.nodeName} without a xlink:href or href is removed: ${node.outerHTML}`)
+      warn(`element ${node.nodeName} without a xlink:href or href is removed: ${node.outerHTML}`, null, 'sanitize')
       node.remove()
       return
     }
+    // For <use> elements with missing width/height, derive defaults from referenced viewBox/size for proper sizing/selection
+    if (node.nodeName === 'use') {
+      const ref = getRefElem(getHref(node))
+      if (ref) {
+        const refViewBox = ref.getAttribute('viewBox')
+        const viewBoxParts = refViewBox ? refViewBox.split(/[\s,]+/).map(Number) : null
+        const refWidth = Number(ref.getAttribute('width'))
+        const refHeight = Number(ref.getAttribute('height'))
+        if (!node.hasAttribute('width')) {
+          const width = viewBoxParts?.[2] || refWidth
+          if (width) node.setAttribute('width', width)
+        }
+        if (!node.hasAttribute('height')) {
+          const height = viewBoxParts?.[3] || refHeight
+          if (height) node.setAttribute('height', height)
+        }
+      }
+    }
     // if the element has attributes pointing to a non-local reference,
     // need to remove the attribute
     ['clip-path', 'fill', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'stroke'].forEach((attr) => {
@@ -256,7 +289,7 @@ export const sanitizeSvg = (node) => {
         // simply check for first character being a '#'
         if (val && val[0] !== '#') {
           node.setAttribute(attr, '')
-          console.warn(`sanitizeSvg: attribute ${attr} in element ${node.nodeName} pointing to a non-local reference (${val}) is removed: ${node.outerHTML}`)
+          warn(`attribute ${attr} in element ${node.nodeName} pointing to a non-local reference (${val}) is removed: ${node.outerHTML}`, null, 'sanitize')
           node.removeAttribute(attr)
         }
       }
@@ -269,7 +302,7 @@ export const sanitizeSvg = (node) => {
   } else {
     // remove all children from this node and insert them before this node
     // TODO: in the case of animation elements this will hardly ever be correct
-    console.warn(`sanitizeSvg: element ${node.nodeName} not supported is removed: ${node.outerHTML}`)
+    warn(`element ${node.nodeName} not supported is removed: ${node.outerHTML}`, null, 'sanitize')
     const children = []
     while (node.hasChildNodes()) {
       children.push(parent.insertBefore(node.firstChild, node))