@weasel-js/svg 1.9.3 → 1.9.4

package/dist/index.js

@@ -1,8 +1,8 @@
-import { pathFromD, PATH_M, PATH_L, PATH_Z, boundsOfPath, resolveScreenLength, scriptMetricsFor, warmFonts, warmPaintKinds, isPaintKindKnown, solid, fillToBoundsFrame, getMarker, registerMarker, dwarn, unionAABB, createInsertOp, fillInPoseFrame, DEFAULT_SHAPE_FILL, pathInPoseFrame, DEFAULT_TEXT_STYLE, PathBuilder, resolveTextStyle, layoutRuns, resolveRuns, resolveAlign, PATH_C, PATH_Q, resolveRunFace, parseColor, rgbaToHex, resolveMarkerSize, getPaintKind } from '@weasel-js/core';
 import { identity, multiply, invert } from '@weasel-js/geom';
+import { boundsOfPath, transformPath, resolveScreenLength, scriptMetricsFor, warmFonts, warmPaintKinds, isPaintKindKnown, solid, fillToBoundsFrame, getMarker, registerMarker, dwarn, unionAABB, createInsertOp, fillInPoseFrame, DEFAULT_SHAPE_FILL, pathInPoseFrame, DEFAULT_TEXT_STYLE, pathFromD, poseFrameOf, poseLinearOf, PATH_M, PATH_L, PATH_C, PATH_Q, PATH_Z, resolveAlign, paragraphDirection, resolveRunFace, resolveTextStyle, parseColor, rgbaToHex, layoutRuns, resolveRuns, PathBuilder, getPaintKind, resolveMarkerSize } from '@weasel-js/core';
 import { tileGeometry } from '@weasel-js/core/patterns-builtin';
 
-// src/parse.ts
+// src/types.ts
 var IDENTITY_MATRIX = identity();
 function applyMatrix(m, x, y) {
   return { x: m[0] * x + m[2] * y + m[4], y: m[1] * x + m[3] * y + m[5] };
@@ -96,130 +96,134 @@ function trimNumber(n) {
   return String(r);
 }
 
-// src/shapes.ts
-var KAPPA = 4 * (Math.sqrt(2) - 1) / 3;
-function isAxisAlignedScale(m, eps = 1e-9) {
-  return Math.abs(m[1]) < eps && Math.abs(m[2]) < eps;
-}
-function transformPath(path, m) {
-  if (isIdentity(m)) return path;
-  if (path.kind === "rect") {
-    if (isAxisAlignedScale(m)) {
-      const a = m[0], d = m[3], e = m[4], f = m[5];
-      let x = path.x * a + e;
-      let y = path.y * d + f;
-      let w = path.width * a;
-      let h = path.height * d;
-      if (w < 0) {
-        x += w;
-        w = -w;
-      }
-      if (h < 0) {
-        y += h;
-        h = -h;
-      }
-      return { kind: "rect", x, y, width: w, height: h };
-    }
-    return transformPath(rectToPolygon(path), m);
-  }
-  const xs = path.coords;
-  const out = new Float32Array(xs.length);
-  for (let i = 0; i < xs.length; i += 2) {
-    const p = applyMatrix(m, xs[i], xs[i + 1]);
-    out[i] = p.x;
-    out[i + 1] = p.y;
-  }
-  return {
-    kind: "polygon",
-    commands: new Uint8Array(path.commands),
-    coords: out,
-    fillRule: path.fillRule
-  };
-}
-function rectToPolygon(r) {
-  const b = new PathBuilder();
-  b.moveTo(r.x, r.y);
-  b.lineTo(r.x + r.width, r.y);
-  b.lineTo(r.x + r.width, r.y + r.height);
-  b.lineTo(r.x, r.y + r.height);
-  b.close();
-  return b.build();
-}
-function rectElementToPath(x, y, width2, height2, rx, ry, m = IDENTITY_MATRIX) {
-  if (rx <= 0 && ry <= 0) {
-    return transformPath({ kind: "rect", x, y, width: width2, height: height2 }, m);
-  }
-  const r = Math.min(Math.max(rx, ry), Math.min(width2, height2) / 2);
-  const r2 = Math.min(rx > 0 ? rx : r, ry > 0 ? ry : r, Math.min(width2, height2) / 2);
-  const rad = r2;
-  const k = KAPPA * rad;
-  const x2 = x + width2;
-  const y2 = y + height2;
-  const b = new PathBuilder();
-  b.moveTo(x + rad, y);
-  b.lineTo(x2 - rad, y);
-  b.curveTo(x2 - rad + k, y, x2, y + rad - k, x2, y + rad);
-  b.lineTo(x2, y2 - rad);
-  b.curveTo(x2, y2 - rad + k, x2 - rad + k, y2, x2 - rad, y2);
-  b.lineTo(x + rad, y2);
-  b.curveTo(x + rad - k, y2, x, y2 - rad + k, x, y2 - rad);
-  b.lineTo(x, y + rad);
-  b.curveTo(x, y + rad - k, x + rad - k, y, x + rad, y);
-  b.close();
-  return transformPath(b.build(), m);
+// src/absoluteUnits.ts
+var ABSOLUTE_PX = Object.assign(/* @__PURE__ */ Object.create(null), {
+  px: 1,
+  in: 96,
+  cm: 96 / 2.54,
+  mm: 96 / 25.4,
+  q: 96 / 101.6,
+  pt: 96 / 72,
+  pc: 16
+});
+
+// src/fontSize.ts
+var DEFAULT_FONT_SIZE = 16;
+var EMS = Object.assign(/* @__PURE__ */ Object.create(null), { em: 1, ex: 0.5 });
+function emsPer(unit) {
+  return EMS[unit.toLowerCase()];
+}
+var KEYWORD_PX = Object.assign(/* @__PURE__ */ Object.create(null), {
+  "xx-small": 9,
+  "x-small": 10,
+  small: 13,
+  medium: DEFAULT_FONT_SIZE,
+  large: 18,
+  "x-large": 24,
+  "xx-large": 32,
+  "xxx-large": 48
+});
+var KEYWORD_SCALE = Object.assign(/* @__PURE__ */ Object.create(null), {
+  larger: 1.2,
+  smaller: 1 / 1.2
+});
+function fontSizeKeyword(raw) {
+  const word = raw.trim().toLowerCase();
+  const size = KEYWORD_PX[word];
+  if (size != null) return { size };
+  const scale = KEYWORD_SCALE[word];
+  return scale == null ? void 0 : { scale };
+}
+var NUMBER = "[-+]?(?:\\d+\\.?\\d*|\\.\\d+)(?:e[-+]?\\d+)?";
+var DIMENSION = new RegExp(`^\\s*(${NUMBER})\\s*([a-z%]*)\\s*$`, "i");
+var FONT_RELATIVE = new RegExp(`(?<![\\w.])(${NUMBER})(em|ex)(?![\\w%])`, "gi");
+var LENGTH_PROPERTIES = ["stroke-width", "stroke-dasharray", "letter-spacing"];
+function computedFontSize(raw, parentSize) {
+  const word = fontSizeKeyword(raw);
+  if (word) return "size" in word ? word.size : word.scale * parentSize;
+  const m = DIMENSION.exec(raw);
+  if (!m) return void 0;
+  const n = Number(m[1]);
+  const unit = m[2].toLowerCase();
+  if (unit === "") return n;
+  if (unit === "%") return n / 100 * parentSize;
+  const ems = emsPer(unit);
+  if (ems != null) return n * ems * parentSize;
+  const scale = ABSOLUTE_PX[unit];
+  return scale == null ? void 0 : n * scale;
+}
+function fontSizeOf(style) {
+  const raw = style["font-size"];
+  if (raw == null) return DEFAULT_FONT_SIZE;
+  const size = computedFontSize(raw, DEFAULT_FONT_SIZE);
+  if (size != null) return size;
+  const n = parseFloat(raw);
+  return Number.isFinite(n) ? n : DEFAULT_FONT_SIZE;
+}
+function computeFontRelative(style, parentSize) {
+  const raw = style["font-size"];
+  if (raw != null && (/(?:%|em|ex)\s*$/i.test(raw) || fontSizeKeyword(raw))) {
+    const size2 = computedFontSize(raw, parentSize);
+    if (size2 != null) style["font-size"] = String(size2);
+  }
+  const size = fontSizeOf(style);
+  for (const prop of LENGTH_PROPERTIES) {
+    const value = style[prop];
+    if (value == null) continue;
+    style[prop] = value.replace(FONT_RELATIVE, (_, n, unit) => String(Number(n) * EMS[unit.toLowerCase()] * size));
+  }
+}
+function scaleLength(v, scale) {
+  return typeof v === "number" ? v * scale : v;
+}
+function scaleStroke(stroke, scale) {
+  const { width: width2 } = stroke;
+  if (scale === 1 || typeof width2 === "object") return stroke;
+  const out = { ...stroke };
+  if (width2 !== void 0) out.width = width2 * scale;
+  if (out.dash) out.dash = out.dash.map((n) => n * scale);
+  return out;
 }
-function ellipseToPath(cx, cy, rx, ry, m = IDENTITY_MATRIX) {
-  const kx = KAPPA * rx;
-  const ky = KAPPA * ry;
-  const b = new PathBuilder();
-  b.moveTo(cx + rx, cy);
-  b.curveTo(cx + rx, cy + ky, cx + kx, cy + ry, cx, cy + ry);
-  b.curveTo(cx - kx, cy + ry, cx - rx, cy + ky, cx - rx, cy);
-  b.curveTo(cx - rx, cy - ky, cx - kx, cy - ry, cx, cy - ry);
-  b.curveTo(cx + kx, cy - ry, cx + rx, cy - ky, cx + rx, cy);
-  b.close();
-  return transformPath(b.build(), m);
+function scaleRuns(runs, scale) {
+  return runs.map((r) => {
+    const out = { ...r };
+    if (out.fontSize !== void 0) out.fontSize = scaleLength(out.fontSize, scale);
+    if (out.letterSpacing !== void 0) out.letterSpacing = scaleLength(out.letterSpacing, scale);
+    if (out.stroke) out.stroke = scaleStroke(out.stroke, scale);
+    return out;
+  });
 }
-function circleToPath(cx, cy, r, m = IDENTITY_MATRIX) {
-  return ellipseToPath(cx, cy, r, r, m);
+function scaleTextStyle(style, scale) {
+  const out = { ...style };
+  out.fontSize = scaleLength(out.fontSize ?? resolveTextStyle(out).fontSize, scale);
+  if (out.letterSpacing !== void 0) out.letterSpacing = scaleLength(out.letterSpacing, scale);
+  return out;
 }
-function lineToPath(x1, y1, x2, y2, m = IDENTITY_MATRIX) {
-  const b = new PathBuilder();
-  b.moveTo(x1, y1);
-  b.lineTo(x2, y2);
-  return transformPath(b.build(), m);
+
+// src/paintThroughMatrix.ts
+function uniformScaleOf(m) {
+  return Math.sqrt(Math.abs(m[0] * m[3] - m[1] * m[2]));
 }
-function parsePoints(raw) {
-  const out = [];
-  const nums = raw.match(/[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?/g);
-  if (!nums) return out;
-  for (let i = 0; i + 1 < nums.length; i += 2) {
-    out.push({ x: parseFloat(nums[i]), y: parseFloat(nums[i + 1]) });
-  }
-  return out;
+function isNonUniform(m) {
+  const [a, b, c, d] = m;
+  const n = Math.hypot(a, b, c, d);
+  return Math.abs(a * c + b * d) > 1e-4 * n * n || Math.abs(Math.hypot(a, b) - Math.hypot(c, d)) > 1e-4 * n;
 }
-function polylineToPath(points, m = IDENTITY_MATRIX) {
-  if (points.length === 0) {
-    return { kind: "polygon", commands: new Uint8Array(), coords: new Float32Array(), fillRule: "nonzero" };
+function fillThroughMatrix(fill, m) {
+  if (!("units" in fill) || fill.units !== "world") return fill;
+  const at = (p) => applyMatrix(m, p.x, p.y);
+  if (fill.fill === "linear-gradient") return { ...fill, from: at(fill.from), to: at(fill.to) };
+  if (fill.fill === "radial-gradient") {
+    return { ...fill, center: at(fill.center), radius: fill.radius * uniformScaleOf(m) };
   }
-  const b = new PathBuilder();
-  b.moveTo(points[0].x, points[0].y);
-  for (let i = 1; i < points.length; i++) b.lineTo(points[i].x, points[i].y);
-  return transformPath(b.build(), m);
+  if (fill.fill === "conic-gradient") return { ...fill, center: at(fill.center) };
+  return fill;
 }
-function polygonToPath(points, m = IDENTITY_MATRIX) {
-  if (points.length === 0) {
-    return { kind: "polygon", commands: new Uint8Array(), coords: new Float32Array(), fillRule: "nonzero" };
-  }
-  const b = new PathBuilder();
-  b.moveTo(points[0].x, points[0].y);
-  for (let i = 1; i < points.length; i++) b.lineTo(points[i].x, points[i].y);
-  b.close();
-  return transformPath(b.build(), m);
+function paintThroughMatrix(paint, m) {
+  return paint.kind === "gradient" ? { ...paint, paint: fillThroughMatrix(paint.paint, m) } : paint;
 }
-function anchorOffset(style, width2) {
-  const edge = resolveAlign(style?.align ?? "left", style?.direction ?? "ltr");
-  return edge === "center" ? width2 / 2 : edge === "right" ? width2 : 0;
+function strokeThroughMatrix(stroke, m) {
+  return { ...scaleStroke(stroke, uniformScaleOf(m)), paint: paintThroughMatrix(stroke.paint, m) };
 }
 
 // src/cssScan.ts
@@ -417,15 +421,6 @@ var DEFAULT_MEDIA_ENVIRONMENT = {
   color: 8,
   monochrome: 0
 };
-var ABSOLUTE_PX = {
-  px: 1,
-  in: 96,
-  cm: 96 / 2.54,
-  mm: 96 / 25.4,
-  q: 96 / 101.6,
-  pt: 96 / 72,
-  pc: 16
-};
 function absoluteLength(raw) {
   const m = raw == null ? null : /^\s*([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)\s*([a-z]*)\s*$/i.exec(raw);
   if (!m) return void 0;
@@ -670,21 +665,28 @@ function parsePaintAttr(raw) {
 
 // src/properties.ts
 var TEXT_TRANSFORMS = /* @__PURE__ */ new Set(["none", "uppercase", "lowercase", "capitalize"]);
-var DIMENSION = /^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)([a-z%]*)$/i;
+var DIMENSION2 = /^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)([a-z%]*)$/i;
 function dimension(v) {
-  const m = DIMENSION.exec(v);
+  const m = DIMENSION2.exec(v);
   return m ? { n: Number(m[1]), unit: m[2].toLowerCase() } : void 0;
 }
 var clamp01 = (n) => n < 0 ? 0 : n > 1 ? 1 : n;
-var length = (native, coercedAs) => (v, warn, prop) => {
+function pxPer(unit, fontSize) {
+  if (unit === "") return 1;
+  const ems = emsPer(unit);
+  return ems != null ? ems * fontSize : ABSOLUTE_PX[unit];
+}
+var length = (native, coercedAs) => (v, warn, prop, fontSize) => {
   const d = dimension(v);
   if (!d) return void 0;
-  if (d.unit && !native.includes(d.unit)) {
+  const scale = native === "px" ? pxPer(d.unit, fontSize) : emsPer(d.unit);
+  if (scale != null) return d.n * scale;
+  if (d.unit) {
     warn(`${prop} "${v}" uses unit "${d.unit}", which is not converted; treated as ${d.n} ${coercedAs}`);
   }
   return d.n;
 };
-var worldLength = length(["px"], "world units");
+var worldLength = length("px", "world units");
 var keyword2 = (...words) => (v) => words.includes(v) ? v : void 0;
 var isCurrentColor = (v) => v.toLowerCase() === "currentcolor";
 function readPaint(v) {
@@ -722,16 +724,17 @@ function readLinejoin(v, warn) {
   warn(`unsupported stroke-linejoin: ${v}`);
   return void 0;
 }
-function readDashArray(v, warn) {
+function readDashArray(v, warn, _prop, fontSize) {
   if (v === "none" || v === "") return null;
   const nums = [];
   for (const t of v.split(/[\s,]+/).filter(Boolean)) {
     const d = dimension(t);
-    if (!d || d.unit !== "" && d.unit !== "px" || d.n < 0) {
+    const scale = d && pxPer(d.unit, fontSize);
+    if (!d || scale == null || d.n < 0) {
       warn(`unrecognized stroke-dasharray: ${v}`);
       return void 0;
     }
-    nums.push(d.n);
+    nums.push(d.n * scale);
   }
   return nums.length % 2 === 1 ? [...nums, ...nums] : nums;
 }
@@ -744,10 +747,14 @@ function readMiterLimit(v, warn) {
 function readColor(v) {
   return isCurrentColor(v) || parsePaintAttr(v)?.kind === "solid" ? v : void 0;
 }
-function readFontSize(v, warn, prop) {
+function readFontSize(v, warn, prop, fontSize) {
+  const word = fontSizeKeyword(v);
+  if (word) return "size" in word ? { fontSize: word.size } : { fontScale: word.scale };
   const d = dimension(v);
   if (d?.unit === "%") return { fontScale: d.n / 100 };
-  const n = worldLength(v, warn, prop);
+  const ems = d && emsPer(d.unit);
+  if (d && ems != null) return { fontScale: d.n * ems };
+  const n = worldLength(v, warn, prop, fontSize);
   return n == null ? void 0 : { fontSize: n };
 }
 function readFontWeight(v) {
@@ -763,8 +770,8 @@ function readFontStyle(v, warn) {
   }
   return void 0;
 }
-function readLetterSpacing(v, warn, prop) {
-  return v === "normal" ? null : worldLength(v, warn, prop);
+function readLetterSpacing(v, warn, prop, fontSize) {
+  return v === "normal" ? null : worldLength(v, warn, prop, fontSize);
 }
 function readDecoration(v, warn) {
   const out = {};
@@ -788,17 +795,22 @@ function readTextTransform(v) {
   const t = v.toLowerCase();
   return TEXT_TRANSFORMS.has(t) ? t : void 0;
 }
-var emLength = length(["em"], "em");
+var emLength = length("em", "em");
 function readBaselineShift(v, warn, prop) {
   const k = v.toLowerCase();
   if (k === "super" || k === "sub") return { script: k };
   if (k === "baseline") return {};
   const d = dimension(v);
   if (d?.unit === "%") return d.n === 0 ? {} : { baselineShift: d.n / 100 };
-  const n = emLength(v, warn, prop);
+  const n = emLength(v, warn, prop, DEFAULT_FONT_SIZE);
   if (n == null) return void 0;
   return n === 0 ? {} : { baselineShift: n };
 }
+function readClipRef(v) {
+  if (v === "none") return "none";
+  const ref = /^url\(\s*["']?#([^)\s"']+)["']?\s*\)$/.exec(v);
+  return ref ? { id: ref[1] } : void 0;
+}
 var inherited = (read) => ({ inherits: true, read });
 var own = (read) => ({ inherits: false, read });
 var PROPERTIES = {
@@ -830,16 +842,19 @@ var PROPERTIES = {
   "stop-color": own(readSolidColor),
   "stop-opacity": own(readRatio),
   "baseline-shift": own(readBaselineShift),
-  "vector-effect": own(keyword2("none", "non-scaling-stroke"))
+  "vector-effect": own(keyword2("none", "non-scaling-stroke")),
+  "clip-path": own(readClipRef),
+  "display": own(keyword2("none", "inline")),
+  "visibility": inherited(keyword2("visible", "hidden", "collapse"))
 };
 var INHERITED_PROPERTIES = Object.keys(PROPERTIES).filter((p) => PROPERTIES[p].inherits);
 var silent = () => {
 };
-function readProperty(prop, raw, warn = silent) {
+function readProperty(prop, raw, warn = silent, fontSize = DEFAULT_FONT_SIZE) {
   if (raw == null) return void 0;
   const v = raw.trim();
   if (v === "inherit") return void 0;
-  return PROPERTIES[prop].read(v, warn, prop);
+  return PROPERTIES[prop].read(v, warn, prop, fontSize);
 }
 function isPropertyName(prop) {
   return Object.prototype.hasOwnProperty.call(PROPERTIES, prop);
@@ -1128,6 +1143,7 @@ function deriveStyle(parent, el) {
     if (!next) next = { ...parent };
     next[prop] = own2;
   }
+  if (next) computeFontRelative(next, fontSizeOf(parent));
   return next ?? parent;
 }
 function resolveCurrentColor(raw, style) {
@@ -1136,13 +1152,81 @@ function resolveCurrentColor(raw, style) {
   const color = readProperty("color", style["color"]);
   return color == null || color.toLowerCase() === "currentcolor" ? "#000000" : color;
 }
-function ownValue(el, prop, warn) {
-  return readProperty(prop, ownProp(el, prop), warn);
+function ownValue(el, prop, warn, fontSize) {
+  return readProperty(prop, ownProp(el, prop), warn, fontSize);
 }
 function styleValue(style, prop, warn) {
   return readProperty(prop, style[prop], warn);
 }
 
+// src/xmlEscape.ts
+var LINE_BREAK_CONTROLS = /[\u000B\u000C]/g;
+var NOT_XML_CHAR = /[\u0000-\u0008\u000E-\u001F￾￿]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?<![\uD800-\uDBFF])[\uDC00-\uDFFF]/g;
+function xmlChars(s) {
+  return s.replace(LINE_BREAK_CONTROLS, "\n").replace(NOT_XML_CHAR, "");
+}
+function escapeAttr(s) {
+  return xmlChars(s).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/\t/g, "&#9;").replace(/\n/g, "&#10;").replace(/\r/g, "&#13;");
+}
+function escapeText(s) {
+  return xmlChars(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\r/g, "&#13;");
+}
+
+// src/styleAt.ts
+function styleAt(el) {
+  const chain = [];
+  for (let e = el; e; e = e.parentElement) chain.unshift(e);
+  return chain.reduce((style, e) => deriveStyle(style, e), EMPTY_STYLE);
+}
+
+// src/lengths.ts
+var LENGTH = /^\s*([-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?)\s*([a-z%]*)\s*$/i;
+function viewportOf(el) {
+  for (let e = el.parentElement; e; e = e.parentElement) {
+    if (e.tagName.toLowerCase() !== "svg") continue;
+    const box = (e.getAttribute("viewBox") ?? "").trim().split(/[\s,]+/).map(Number);
+    if (box.length === 4 && box.every(Number.isFinite)) return { width: box[2], height: box[3] };
+    const w = LENGTH.exec(e.getAttribute("width") ?? "");
+    const h = LENGTH.exec(e.getAttribute("height") ?? "");
+    if (w && h && w[2] !== "%" && h[2] !== "%") return { width: userUnits(w), height: userUnits(h) };
+    return void 0;
+  }
+  return void 0;
+}
+function userUnits(m) {
+  return Number(m[1]) * (ABSOLUTE_PX[m[2].toLowerCase()] ?? 1);
+}
+function readLength(el, name, axis, fallback, onWarn) {
+  return resolveLength(el.getAttribute(name), el, name, axis, fallback, onWarn);
+}
+function resolveLength(raw, el, name, axis, fallback, onWarn) {
+  if (raw == null) return fallback;
+  const m = LENGTH.exec(raw);
+  if (!m) {
+    const n2 = parseFloat(raw);
+    return Number.isFinite(n2) ? n2 : fallback;
+  }
+  const n = Number(m[1]);
+  const unit = m[2].toLowerCase();
+  if (unit === "") return n;
+  const scale = ABSOLUTE_PX[unit];
+  if (scale != null) return n * scale;
+  const ems = emsPer(unit);
+  if (ems != null) return n * ems * fontSizeOf(styleAt(el));
+  const tag = el.tagName.toLowerCase();
+  if (unit !== "%") {
+    onWarn(`<${tag} ${name}="${raw}"> unit "${unit}" is not converted; read as ${n}`);
+    return n;
+  }
+  const view = viewportOf(el);
+  if (!view) {
+    onWarn(`<${tag} ${name}="${raw}"> has no viewport to be a percentage of; read as ${n}`);
+    return n;
+  }
+  const of = axis === "x" ? view.width : axis === "y" ? view.height : Math.sqrt((view.width * view.width + view.height * view.height) / 2);
+  return n / 100 * of;
+}
+
 // src/elements.ts
 function collectElementsByTag(root, tags) {
   const out = /* @__PURE__ */ new Map();
@@ -1189,7 +1273,7 @@ function patternXml(id, paint, onWarn) {
 function tilePreviewSvg(spec, background) {
   const geometry = tileGeometry(spec);
   const s = trimNumber(geometry.size);
-  const bg = background ? `<rect width="${s}" height="${s}" fill="${background}"/>` : "";
+  const bg = background ? `<rect width="${s}" height="${s}" fill="${escapeAttr(background)}"/>` : "";
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}" viewBox="0 0 ${s} ${s}">${bg}${geometry.shapes.map(shapeXml).join("")}</svg>`;
 }
 function tilePreviewCssUrl(spec, background) {
@@ -1200,14 +1284,14 @@ function shapeXml(shape) {
     case "line":
       return `<line x1="${trimNumber(shape.x1)}" y1="${trimNumber(shape.y1)}" x2="${trimNumber(shape.x2)}" y2="${trimNumber(shape.y2)}" stroke="${shape.color}" stroke-width="${trimNumber(shape.width)}"/>`;
     case "circle":
-      return `<circle cx="${trimNumber(shape.cx)}" cy="${trimNumber(shape.cy)}" r="${trimNumber(shape.r)}" fill="${shape.color}"/>`;
+      return `<circle cx="${trimNumber(shape.cx)}" cy="${trimNumber(shape.cy)}" r="${trimNumber(shape.r)}" fill="${escapeAttr(shape.color)}"/>`;
     case "ellipse": {
       const deg = shape.rotation * 180 / Math.PI;
       const transform = deg === 0 ? "" : ` transform="rotate(${trimNumber(deg)} ${trimNumber(shape.cx)} ${trimNumber(shape.cy)})"`;
-      return `<ellipse cx="${trimNumber(shape.cx)}" cy="${trimNumber(shape.cy)}" rx="${trimNumber(shape.rx)}" ry="${trimNumber(shape.ry)}" fill="${shape.color}"${transform}/>`;
+      return `<ellipse cx="${trimNumber(shape.cx)}" cy="${trimNumber(shape.cy)}" rx="${trimNumber(shape.rx)}" ry="${trimNumber(shape.ry)}" fill="${escapeAttr(shape.color)}"${transform}/>`;
     }
     case "rect":
-      return `<rect x="${trimNumber(shape.x)}" y="${trimNumber(shape.y)}" width="${trimNumber(shape.width)}" height="${trimNumber(shape.height)}" fill="${shape.color}"/>`;
+      return `<rect x="${trimNumber(shape.x)}" y="${trimNumber(shape.y)}" width="${trimNumber(shape.width)}" height="${trimNumber(shape.height)}" fill="${escapeAttr(shape.color)}"/>`;
     default:
       return "";
   }
@@ -1247,9 +1331,6 @@ function readPattern(el, onWarn) {
   if (!isIdentity([m[0], m[1], m[2], m[3], 0, 0])) paint.transform = [m[0], m[1], m[2], m[3]];
   return paint;
 }
-function escapeAttr(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
 function serializePathD(path) {
   if (path.kind === "rect") {
     const { x, y, width: width2, height: height2 } = path;
@@ -1383,7 +1464,7 @@ function readStops(el, onWarn) {
     const colorAttr = ownProp(c, "stop-color") ?? "#000000";
     const parsed = readProperty("stop-color", colorAttr, onWarn);
     if (parsed) {
-      const alpha = ownValue(c, "stop-opacity") ?? parsed.alpha;
+      const alpha = (ownValue(c, "stop-opacity") ?? 1) * parsed.alpha;
       stops.push({ offset, color: alpha < 1 ? applyAlpha(parsed.color, alpha) : parsed.color });
     } else {
       onWarn?.(`gradient stop has unrecognized stop-color: ${colorAttr}`);
@@ -1410,34 +1491,54 @@ function num(raw, fallback) {
   const n = parseRatio(raw);
   return Number.isFinite(n) ? n : fallback;
 }
+function warnUnmodeled(el, elements, onWarn) {
+  for (const name of ["fx", "fy", "fr"]) {
+    if (inheritedAttr(el, elements, name) != null) {
+      onWarn?.(`gradient ${name} is not modeled; the gradient is centered on its cx, cy`);
+      break;
+    }
+  }
+  const spread = inheritedAttr(el, elements, "spreadMethod");
+  if (spread === "reflect" || spread === "repeat") {
+    onWarn?.(`spreadMethod="${spread}" is not modeled; the gradient pads`);
+  }
+}
+function coord(el, elements, name, axis, fraction, units, onWarn) {
+  const raw = inheritedAttr(el, elements, name);
+  if (units === "bounds") return num(raw, fraction);
+  if (raw != null) return resolveLength(raw, el, name, axis, fraction, onWarn ?? (() => {
+  }));
+  let unresolved = false;
+  const v = resolveLength(`${fraction * 100}%`, el, name, axis, fraction, () => {
+    unresolved = true;
+  });
+  return unresolved ? fraction : v;
+}
 function readLinearGradient(el, elements, onWarn) {
   warnGradientTransform(el, elements, onWarn);
+  warnUnmodeled(el, elements, onWarn);
+  const units = readGradientUnits(el, elements);
+  const at = (name, axis, fraction) => coord(el, elements, name, axis, fraction, units, onWarn);
   return {
     fill: "linear-gradient",
-    from: {
-      x: num(inheritedAttr(el, elements, "x1"), 0),
-      y: num(inheritedAttr(el, elements, "y1"), 0)
-    },
-    to: {
-      x: num(inheritedAttr(el, elements, "x2"), 1),
-      y: num(inheritedAttr(el, elements, "y2"), 0)
-    },
+    from: { x: at("x1", "x", 0), y: at("y1", "y", 0) },
+    to: { x: at("x2", "x", 1), y: at("y2", "y", 0) },
     stops: inheritedStops(el, elements, onWarn),
-    units: readGradientUnits(el, elements),
+    units,
     interpolate: readInterpolate(el, elements)
   };
 }
 function readRadialGradient(el, elements, onWarn) {
   warnGradientTransform(el, elements, onWarn);
+  warnUnmodeled(el, elements, onWarn);
+  const units = readGradientUnits(el, elements);
+  const at = (name, axis, fraction) => coord(el, elements, name, axis, fraction, units, onWarn);
   return {
     fill: "radial-gradient",
-    center: {
-      x: num(inheritedAttr(el, elements, "cx"), 0.5),
-      y: num(inheritedAttr(el, elements, "cy"), 0.5)
-    },
-    radius: num(inheritedAttr(el, elements, "r"), 0.5),
+    center: { x: at("cx", "x", 0.5), y: at("cy", "y", 0.5) },
+    radius: at("r", "other", 0.5),
     stops: inheritedStops(el, elements, onWarn),
-    units: readGradientUnits(el, elements),
+    units,
     interpolate: readInterpolate(el, elements)
   };
 }
@@ -1579,13 +1680,14 @@ function writesInset(entry) {
   return entry !== void 0 && !entry.toSvg && (entry.inset ?? 0) !== 0;
 }
 function defaultMarkerXml(id, entry, onWarn, key, size) {
-  const unit = size === void 0 ? 1 : resolveMarkerSize({ key: key ?? id, size }, 1);
+  const name = key ?? id;
+  const unit = size === void 0 ? 1 : resolveMarkerSize({ key: name, size }, 1);
   const path = entry.path({ size: unit, stroke: { paint: { fill: "solid", color: "#000" } } });
   const d = serializePathD(path);
   const fill = markerPaintAttrs("fill", entry.fill, id, onWarn);
   const outline = entry.outline ? ` ${markerPaintAttrs("stroke", entry.outline.paint, id, onWarn)} stroke-width="${trimNumber(entry.outline.width * unit)}" stroke-linecap="round" stroke-linejoin="round"` : "";
   const orient = typeof entry.orient === "number" ? trimNumber(entry.orient * 180 / Math.PI) : "auto-start-reverse";
-  const units = size === void 0 ? 'markerUnits="strokeWidth" markerWidth="8" markerHeight="8"' : `markerUnits="userSpaceOnUse" markerWidth="${trimNumber(8 * unit)}" markerHeight="${trimNumber(8 * unit)}" ${WEASEL_NS_PREFIX}:key="${key}" ${WEASEL_NS_PREFIX}:size="${typeof size === "number" ? trimNumber(size) : `${trimNumber(size.px)}px`}"`;
+  const units = size === void 0 ? 'markerUnits="strokeWidth" markerWidth="8" markerHeight="8"' : `markerUnits="userSpaceOnUse" markerWidth="${trimNumber(8 * unit)}" markerHeight="${trimNumber(8 * unit)}" ${WEASEL_NS_PREFIX}:key="${escapeAttr(name)}" ${WEASEL_NS_PREFIX}:size="${typeof size === "number" ? trimNumber(size) : `${trimNumber(size.px)}px`}"`;
   const inset = writesInset(entry) ? ` ${WEASEL_NS_PREFIX}:inset="${trimNumber(entry.inset)}"` : "";
   return `<marker id="${id}" ${units}${inset} refX="0" refY="0" orient="${orient}" overflow="visible"><path d="${d}" ${fill}${outline}/></marker>`;
 }
@@ -1639,10 +1741,83 @@ function stopXml(s) {
     const alpha = parseInt(m[2], 16) / 255;
     return `<stop offset="${trimNumber(s.offset)}" stop-color="#${m[1].toLowerCase()}" stop-opacity="${trimNumber(alpha)}"/>`;
   }
-  return `<stop offset="${trimNumber(s.offset)}" stop-color="${s.color}"/>`;
+  return `<stop offset="${trimNumber(s.offset)}" stop-color="${escapeAttr(s.color)}"/>`;
+}
+var KAPPA = 4 * (Math.sqrt(2) - 1) / 3;
+function rectElementToPath(x, y, width2, height2, rx, ry, m = IDENTITY_MATRIX) {
+  if (rx <= 0 && ry <= 0) {
+    return transformPath({ kind: "rect", x, y, width: width2, height: height2 }, m);
+  }
+  const r = Math.min(Math.max(rx, ry), Math.min(width2, height2) / 2);
+  const r2 = Math.min(rx > 0 ? rx : r, ry > 0 ? ry : r, Math.min(width2, height2) / 2);
+  const rad = r2;
+  const k = KAPPA * rad;
+  const x2 = x + width2;
+  const y2 = y + height2;
+  const b = new PathBuilder();
+  b.moveTo(x + rad, y);
+  b.lineTo(x2 - rad, y);
+  b.curveTo(x2 - rad + k, y, x2, y + rad - k, x2, y + rad);
+  b.lineTo(x2, y2 - rad);
+  b.curveTo(x2, y2 - rad + k, x2 - rad + k, y2, x2 - rad, y2);
+  b.lineTo(x + rad, y2);
+  b.curveTo(x + rad - k, y2, x, y2 - rad + k, x, y2 - rad);
+  b.lineTo(x, y + rad);
+  b.curveTo(x, y + rad - k, x + rad - k, y, x + rad, y);
+  b.close();
+  return transformPath(b.build(), m);
+}
+function ellipseToPath(cx, cy, rx, ry, m = IDENTITY_MATRIX) {
+  const kx = KAPPA * rx;
+  const ky = KAPPA * ry;
+  const b = new PathBuilder();
+  b.moveTo(cx + rx, cy);
+  b.curveTo(cx + rx, cy + ky, cx + kx, cy + ry, cx, cy + ry);
+  b.curveTo(cx - kx, cy + ry, cx - rx, cy + ky, cx - rx, cy);
+  b.curveTo(cx - rx, cy - ky, cx - kx, cy - ry, cx, cy - ry);
+  b.curveTo(cx + kx, cy - ry, cx + rx, cy - ky, cx + rx, cy);
+  b.close();
+  return transformPath(b.build(), m);
+}
+function circleToPath(cx, cy, r, m = IDENTITY_MATRIX) {
+  return ellipseToPath(cx, cy, r, r, m);
+}
+function lineToPath(x1, y1, x2, y2, m = IDENTITY_MATRIX) {
+  const b = new PathBuilder();
+  b.moveTo(x1, y1);
+  b.lineTo(x2, y2);
+  return transformPath(b.build(), m);
+}
+function parsePoints(raw) {
+  const out = [];
+  const nums = raw.match(/[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?/g);
+  if (!nums) return out;
+  for (let i = 0; i + 1 < nums.length; i += 2) {
+    out.push({ x: parseFloat(nums[i]), y: parseFloat(nums[i + 1]) });
+  }
+  return out;
+}
+function polylineToPath(points, m = IDENTITY_MATRIX) {
+  if (points.length === 0) {
+    return { kind: "polygon", commands: new Uint8Array(), coords: new Float32Array(), fillRule: "nonzero" };
+  }
+  const b = new PathBuilder();
+  b.moveTo(points[0].x, points[0].y);
+  for (let i = 1; i < points.length; i++) b.lineTo(points[i].x, points[i].y);
+  return transformPath(b.build(), m);
+}
+function polygonToPath(points, m = IDENTITY_MATRIX) {
+  if (points.length === 0) {
+    return { kind: "polygon", commands: new Uint8Array(), coords: new Float32Array(), fillRule: "nonzero" };
+  }
+  const b = new PathBuilder();
+  b.moveTo(points[0].x, points[0].y);
+  for (let i = 1; i < points.length; i++) b.lineTo(points[i].x, points[i].y);
+  b.close();
+  return transformPath(b.build(), m);
 }
 
-// src/parse.ts
+// src/lowerLeaf.ts
 var SUPPORTED_LEAF_TAGS = /* @__PURE__ */ new Set([
   "rect",
   "circle",
@@ -1652,7 +1827,6 @@ var SUPPORTED_LEAF_TAGS = /* @__PURE__ */ new Set([
   "polygon",
   "path"
 ]);
-var SUPPORTED_GROUP_TAGS = /* @__PURE__ */ new Set(["g", "svg"]);
 var IGNORED_TAGS = /* @__PURE__ */ new Set([
   "defs",
   "lineargradient",
@@ -1665,56 +1839,56 @@ var IGNORED_TAGS = /* @__PURE__ */ new Set([
   "metadata",
   "style"
 ]);
-function parseSvg(svg, opts = {}) {
-  const warnings = [];
-  const onWarn = (m) => {
-    warnings.push(m);
-  };
-  let doc;
-  try {
-    doc = new DOMParser().parseFromString(svg, "image/svg+xml");
-  } catch (e) {
-    return { nodes: [], warnings: [`failed to parse SVG: ${e.message}`] };
+function lowerLeaf(el, tag, m, onWarn) {
+  const x = (name) => readLength(el, name, "x", 0, onWarn);
+  const y = (name) => readLength(el, name, "y", 0, onWarn);
+  const r = (name) => readLength(el, name, "other", 0, onWarn);
+  if (tag === "rect") {
+    return rectElementToPath(x("x"), y("y"), x("width"), y("height"), x("rx"), y("ry"), m);
   }
-  const errEl = doc.getElementsByTagName("parsererror")[0];
-  if (errEl) {
-    return { nodes: [], warnings: [`SVG parse error: ${errEl.textContent ?? "unknown"}`] };
+  if (tag === "circle") return circleToPath(x("cx"), y("cy"), r("r"), m);
+  if (tag === "ellipse") return ellipseToPath(x("cx"), y("cy"), x("rx"), y("ry"), m);
+  if (tag === "line") return lineToPath(x("x1"), y("y1"), x("x2"), y("y2"), m);
+  if (tag === "polyline") return polylineToPath(parsePoints(el.getAttribute("points") ?? ""), m);
+  if (tag === "polygon") return polygonToPath(parsePoints(el.getAttribute("points") ?? ""), m);
+  if (tag === "path") {
+    const d = el.getAttribute("d") ?? "";
+    if (!d.trim()) {
+      onWarn("<path> with empty d=");
+      return null;
+    }
+    const raw = pathFromD(d, onWarn);
+    const transformed = transformPath(raw, m);
+    if (transformed.kind === "polygon") {
+      const rect = polygonToRectIfAxisAligned(transformed);
+      if (rect) return rect;
+    }
+    return transformed;
   }
-  const root = doc.documentElement;
-  if (!root || root.tagName.toLowerCase() !== "svg") {
-    return { nodes: [], warnings: ["root element is not <svg>"] };
-  }
-  bindStylesheets(doc, mediaEnvironmentFor(root, opts.media), onWarn);
-  const namespaces = opts.namespaces ?? {};
-  const uriToPrefix = /* @__PURE__ */ new Map();
-  for (const [prefix, uri] of Object.entries(namespaces)) {
-    uriToPrefix.set(uri, prefix);
-  }
-  const documentMeta = collectDocumentMeta(root, uriToPrefix);
-  const gradients = collectGradients(root, onWarn);
-  for (const [id, paint] of collectPatterns(root, onWarn)) gradients.set(id, paint);
-  const rootStyle = deriveStyle(EMPTY_STYLE, root);
-  const clips = collectClipPaths(root, onWarn);
-  const nodes = parseChildren(root, IDENTITY_MATRIX, rootStyle, gradients, clips, onWarn, uriToPrefix);
-  const markers = ingestMarkers(root, nodes, gradients, onWarn);
-  const result = { nodes, warnings };
-  if (markers.length > 0) result.markers = markers;
-  if (documentMeta) result.documentMeta = documentMeta;
-  const viewBox = parseViewBoxAttr(root.getAttribute("viewBox"));
-  if (viewBox) result.viewBox = viewBox;
-  const width2 = parseRootLength(root.getAttribute("width"), "width", onWarn);
-  if (width2 != null) result.width = width2;
-  const height2 = parseRootLength(root.getAttribute("height"), "height", onWarn);
-  if (height2 != null) result.height = height2;
-  for (let i = 0; i < root.children.length; i++) {
-    const c = root.children[i];
-    if (c.tagName.toLowerCase() === "title") {
-      result.title = c.textContent ?? "";
-      break;
-    }
-  }
-  return result;
+  return null;
 }
+function polygonToRectIfAxisAligned(p) {
+  const cmds = p.commands;
+  if (cmds.length !== 5) return null;
+  if (cmds[0] !== PATH_M) return null;
+  if (cmds[1] !== PATH_L || cmds[2] !== PATH_L || cmds[3] !== PATH_L) return null;
+  if (cmds[4] !== PATH_Z) return null;
+  const c = p.coords;
+  if (c.length !== 8) return null;
+  const x0 = c[0], y0 = c[1];
+  const x1 = c[2], y1 = c[3];
+  const x2 = c[4], y2 = c[5];
+  const x3 = c[6], y3 = c[7];
+  if (y0 !== y1 || x1 !== x2 || y2 !== y3 || x3 !== x0) return null;
+  const x = Math.min(x0, x1);
+  const y = Math.min(y0, y2);
+  const width2 = Math.abs(x1 - x0);
+  const height2 = Math.abs(y2 - y1);
+  if (width2 === 0 || height2 === 0) return null;
+  return { kind: "rect", x, y, width: width2, height: height2 };
+}
+
+// src/viewBox.ts
 function parseViewBoxAttr(raw) {
   if (raw == null) return void 0;
   const parts = raw.trim().split(/[\s,]+/).filter(Boolean);
@@ -1723,83 +1897,6 @@ function parseViewBoxAttr(raw) {
   if (nums.some((n) => !Number.isFinite(n))) return void 0;
   return { x: nums[0], y: nums[1], width: nums[2], height: nums[3] };
 }
-function parseRootLength(raw, name, onWarn) {
-  if (raw == null) return void 0;
-  const n = parseFloat(raw);
-  if (!Number.isFinite(n)) return void 0;
-  const unit = /^\s*[-+]?[\d.eE+-]+\s*([a-z%]+)\s*$/i.exec(raw)?.[1];
-  if (unit) onWarn(`<svg ${name}="${raw}"> unit "${unit}" is not converted; read as ${n}`);
-  return n;
-}
-function collectDocumentMeta(root, uriToPrefix) {
-  if (uriToPrefix.size === 0) return void 0;
-  const meta = {};
-  for (let i = 0; i < root.attributes.length; i++) {
-    const a = root.attributes[i];
-    if (!a.namespaceURI) continue;
-    const prefix = uriToPrefix.get(a.namespaceURI);
-    if (!prefix) continue;
-    const bucket = meta[prefix] ??= {};
-    (bucket.attrs ??= {})[a.localName] = a.value;
-  }
-  for (let i = 0; i < root.children.length; i++) {
-    const c = root.children[i];
-    if (!c.namespaceURI) continue;
-    const prefix = uriToPrefix.get(c.namespaceURI);
-    if (!prefix) continue;
-    const bucket = meta[prefix] ??= {};
-    const elements = bucket.elements ??= {};
-    const list = elements[c.localName] ??= [];
-    list.push(collectNamespacedElement(c, uriToPrefix));
-  }
-  return Object.keys(meta).length > 0 ? meta : void 0;
-}
-function collectNamespacedElement(el, uriToPrefix) {
-  const result = { attrs: {} };
-  for (let i = 0; i < el.attributes.length; i++) {
-    const a = el.attributes[i];
-    if (a.name.startsWith("xmlns")) continue;
-    result.attrs[a.localName] = a.value;
-  }
-  let hasChildElements = false;
-  for (let i = 0; i < el.children.length; i++) {
-    const c = el.children[i];
-    if (!c.namespaceURI) continue;
-    const prefix = uriToPrefix.get(c.namespaceURI);
-    if (!prefix) continue;
-    hasChildElements = true;
-    const children = result.children ??= {};
-    const list = children[c.localName] ??= [];
-    list.push(collectNamespacedElement(c, uriToPrefix));
-  }
-  if (!hasChildElements && el.textContent != null && el.textContent.trim() !== "") {
-    result.text = el.textContent;
-  }
-  return result;
-}
-function collectElementMeta(el, uriToPrefix) {
-  if (uriToPrefix.size === 0) return void 0;
-  const meta = {};
-  for (let i = 0; i < el.attributes.length; i++) {
-    const a = el.attributes[i];
-    if (!a.namespaceURI) continue;
-    const prefix = uriToPrefix.get(a.namespaceURI);
-    if (!prefix) continue;
-    const bucket = meta[prefix] ??= {};
-    (bucket.attrs ??= {})[a.localName] = a.value;
-  }
-  for (let i = 0; i < el.children.length; i++) {
-    const c = el.children[i];
-    if (!c.namespaceURI) continue;
-    const prefix = uriToPrefix.get(c.namespaceURI);
-    if (!prefix) continue;
-    const bucket = meta[prefix] ??= {};
-    const elements = bucket.elements ??= {};
-    const list = elements[c.localName] ??= [];
-    list.push(collectNamespacedElement(c, uriToPrefix));
-  }
-  return Object.keys(meta).length > 0 ? meta : void 0;
-}
 function collectClipPaths(root, onWarn) {
   const out = /* @__PURE__ */ new Map();
   for (const [id, el] of collectElementsByTag(root, /* @__PURE__ */ new Set(["clippath"]))) {
@@ -1826,192 +1923,23 @@ function collectClipPaths(root, onWarn) {
   return out;
 }
 function clipFor(el, ctm, clips, onWarn) {
-  const attr = el.getAttribute("clip-path");
-  if (!attr || attr === "none") return void 0;
-  const ref = /^url\(\s*#([^)\s]+)\s*\)$/.exec(attr.trim());
+  const raw = ownProp(el, "clip-path");
+  if (raw == null) return void 0;
+  const ref = readProperty("clip-path", raw);
+  if (ref === "none") return void 0;
   if (!ref) {
-    onWarn(`clip-path="${attr}" is not a url(#id) reference; the clip is dropped`);
+    onWarn(`clip-path="${raw}" is not a url(#id) reference; the clip is dropped`);
     return void 0;
   }
-  const path = clips.get(ref[1]);
+  const path = clips.get(ref.id);
   if (!path) {
-    onWarn(`clip-path references #${ref[1]}, which no <clipPath> in the document defines`);
+    onWarn(`clip-path references #${ref.id}, which no <clipPath> in the document defines`);
     return void 0;
   }
   return transformPath(path, ctm);
 }
-function parseChildren(parent, ctm, style, gradients, clips, onWarn, uriToPrefix) {
-  const out = [];
-  for (let i = 0; i < parent.children.length; i++) {
-    const el = parent.children[i];
-    const ns = el.namespaceURI;
-    if (ns && ns !== "http://www.w3.org/2000/svg") continue;
-    const node = parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix);
-    if (node) {
-      if (Array.isArray(node)) out.push(...node);
-      else out.push(node);
-    }
-  }
-  return out;
-}
-function parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix) {
-  const tag = el.tagName.toLowerCase();
-  if (IGNORED_TAGS.has(tag)) return null;
-  if (tag === "g" && el.hasAttribute("data-weasel-image")) {
-    const image = parseCroppedImage(el, ctm, onWarn);
-    if (image) {
-      const meta2 = collectElementMeta(el, uriToPrefix);
-      if (meta2) image.meta = meta2;
-      return image;
-    }
-  }
-  if (tag === "g") {
-    const local = parseTransform(el.getAttribute("transform"), onWarn);
-    const childCtm = multiply(ctm, local);
-    const childStyle = deriveStyle(style, el);
-    const children = parseChildren(el, childCtm, childStyle, gradients, clips, onWarn, uriToPrefix);
-    const opacity2 = ownValue(el, "opacity");
-    const group = { kind: "group", children };
-    const clip = clipFor(el, childCtm, clips, onWarn);
-    if (clip) group.clip = clip;
-    if (opacity2 != null) group.opacity = opacity2;
-    const meta2 = collectElementMeta(el, uriToPrefix);
-    if (meta2) group.meta = meta2;
-    return group;
-  }
-  if (SUPPORTED_GROUP_TAGS.has(tag)) {
-    const childStyle = deriveStyle(style, el);
-    const x = parseFloat(el.getAttribute("x") ?? "0");
-    const y = parseFloat(el.getAttribute("y") ?? "0");
-    const offset = [1, 0, 0, 1, Number.isFinite(x) ? x : 0, Number.isFinite(y) ? y : 0];
-    if (el.hasAttribute("viewBox")) {
-      onWarn("nested <svg> viewBox is not modeled; its children are not rescaled");
-    }
-    return parseChildren(el, multiply(ctm, offset), childStyle, gradients, clips, onWarn, uriToPrefix);
-  }
-  if (tag === "text") {
-    const textNode = parseTextElement(el, ctm, style, gradients, onWarn);
-    if (textNode && !Array.isArray(textNode) && textNode.kind === "text") {
-      const meta2 = collectElementMeta(el, uriToPrefix);
-      if (meta2) textNode.meta = meta2;
-    }
-    return textNode;
-  }
-  if (tag === "image") {
-    const imageNode = parseImageElement(el, ctm, onWarn);
-    if (imageNode) {
-      const meta2 = collectElementMeta(el, uriToPrefix);
-      if (meta2) imageNode.meta = meta2;
-    }
-    return imageNode;
-  }
-  if (!SUPPORTED_LEAF_TAGS.has(tag)) {
-    onWarn(`unsupported element: <${el.tagName}>`);
-    return null;
-  }
-  const localTransform = parseTransform(el.getAttribute("transform"), onWarn);
-  let path = lowerLeaf(el, tag, ctm, onWarn);
-  if (!path) return null;
-  let rotation;
-  if (!isIdentity(localTransform)) {
-    const worldLocal = rebaseTransform(ctm, localTransform);
-    const bounds = pathAabb(path);
-    const cx = bounds.x + bounds.width / 2;
-    const cy = bounds.y + bounds.height / 2;
-    const angle = worldLocal && decomposeRotation(worldLocal, cx, cy);
-    if (!worldLocal) {
-      onWarn("leaf transform sits under a singular parent transform; dropped");
-    } else if (angle != null) {
-      rotation = angle;
-    } else {
-      path = transformPath(path, worldLocal);
-      const rotComp = rotationComponent(worldLocal);
-      if (Math.abs(rotComp) > 1e-4) {
-        onWarn(`leaf transform has a rotational component that can't be cleanly stored as rotation; baked into geometry (may not round-trip identically)`);
-      }
-    }
-  }
-  const leafStyle = deriveStyle(style, el);
-  const fill = readPaint2(leafStyle, "fill", "#000000", gradients, onWarn);
-  const stroke = readStroke(leafStyle, gradients, onWarn, isNonScalingStroke(el));
-  const opacity = ownValue(el, "opacity");
-  if (styleValue(leafStyle, "fill-rule") === "evenodd" && path.kind === "polygon") {
-    path = { ...path, fillRule: "evenodd" };
-  }
-  const node = { kind: "path", path, fill };
-  if (stroke) node.stroke = stroke;
-  if (opacity != null) node.opacity = opacity;
-  if (rotation != null) node.rotation = rotation;
-  if (tag === "line" && (leafStyle["fill"] ?? null) == null) {
-    node.fill = { kind: "none" };
-  }
-  const meta = collectElementMeta(el, uriToPrefix);
-  if (meta) node.meta = meta;
-  return node;
-}
-function lowerLeaf(el, tag, m, onWarn) {
-  const num2 = (name, fallback = 0) => {
-    const v = el.getAttribute(name);
-    if (v == null) return fallback;
-    const n = parseFloat(v);
-    return Number.isFinite(n) ? n : fallback;
-  };
-  if (tag === "rect") {
-    const x = num2("x", 0);
-    const y = num2("y", 0);
-    const w = num2("width", 0);
-    const h = num2("height", 0);
-    const rx = num2("rx", 0);
-    const ry = num2("ry", 0);
-    return rectElementToPath(x, y, w, h, rx, ry, m);
-  }
-  if (tag === "circle") return circleToPath(num2("cx"), num2("cy"), num2("r"), m);
-  if (tag === "ellipse") return ellipseToPath(num2("cx"), num2("cy"), num2("rx"), num2("ry"), m);
-  if (tag === "line") return lineToPath(num2("x1"), num2("y1"), num2("x2"), num2("y2"), m);
-  if (tag === "polyline") return polylineToPath(parsePoints(el.getAttribute("points") ?? ""), m);
-  if (tag === "polygon") return polygonToPath(parsePoints(el.getAttribute("points") ?? ""), m);
-  if (tag === "path") {
-    const d = el.getAttribute("d") ?? "";
-    if (!d.trim()) {
-      onWarn("<path> with empty d=");
-      return null;
-    }
-    const raw = pathFromD(d, onWarn);
-    const transformed = transformPath(raw, m);
-    if (transformed.kind === "polygon") {
-      const rect = polygonToRectIfAxisAligned(transformed);
-      if (rect) return rect;
-    }
-    return transformed;
-  }
-  return null;
-}
-function polygonToRectIfAxisAligned(p) {
-  const cmds = p.commands;
-  if (cmds.length !== 5) return null;
-  if (cmds[0] !== PATH_M) return null;
-  if (cmds[1] !== PATH_L || cmds[2] !== PATH_L || cmds[3] !== PATH_L) return null;
-  if (cmds[4] !== PATH_Z) return null;
-  const c = p.coords;
-  if (c.length !== 8) return null;
-  const x0 = c[0], y0 = c[1];
-  const x1 = c[2], y1 = c[3];
-  const x2 = c[4], y2 = c[5];
-  const x3 = c[6], y3 = c[7];
-  if (y0 !== y1 || x1 !== x2 || y2 !== y3 || x3 !== x0) return null;
-  const x = Math.min(x0, x1);
-  const y = Math.min(y0, y2);
-  const width2 = Math.abs(x1 - x0);
-  const height2 = Math.abs(y2 - y1);
-  if (width2 === 0 || height2 === 0) return null;
-  return { kind: "rect", x, y, width: width2, height: height2 };
-}
-function pathAabb(path) {
-  if (path.kind === "rect") {
-    return { x: path.x, y: path.y, width: path.width, height: path.height };
-  }
-  return boundsOfPath(path);
-}
+
+// src/readPaint.ts
 function readPaint2(style, attr, defaultColor, gradients, onWarn) {
   const raw = resolveCurrentColor(style[attr] ?? null, style);
   const opacity = styleValue(style, `${attr}-opacity`, onWarn);
@@ -2089,11 +2017,11 @@ var STROKE_KEYS = [
 function isNonScalingStroke(el) {
   return ownValue(el, "vector-effect") === "non-scaling-stroke";
 }
-function ownStrokeStyle(el) {
+function ownStrokeStyle(el, computed) {
   const out = {};
   for (const k of STROKE_KEYS) {
     const v = ownProp(el, k);
-    if (v != null) out[k] = v;
+    if (v != null) out[k] = v === "inherit" ? v : computed[k];
   }
   return out;
 }
@@ -2117,6 +2045,92 @@ function coreStroke(stroke) {
   if (stroke.markerEnd) out.markerEnd = stroke.markerEnd;
   return out;
 }
+var near = (v, target) => Math.abs(v - target) <= 1e-9;
+function placeBox(box, m, stretch) {
+  const [a, b, c, d] = m;
+  const scale = Math.sqrt(Math.abs(a * d - b * c));
+  const eps = 1e-4 * Math.hypot(a, b, c, d);
+  const uniform = Math.abs(a - d) <= eps;
+  if (Math.abs(b) <= eps && Math.abs(c) <= eps && (stretch || uniform && a > 0)) {
+    const p0 = applyMatrix(m, box.x, box.y);
+    const p1 = applyMatrix(m, box.x + box.width, box.y + box.height);
+    return {
+      x: Math.min(p0.x, p1.x),
+      y: Math.min(p0.y, p1.y),
+      width: Math.abs(p1.x - p0.x),
+      height: Math.abs(p1.y - p0.y),
+      rotation: 0,
+      scale,
+      flipX: a < 0,
+      flipY: d < 0
+    };
+  }
+  const p = Math.hypot(a, b);
+  const q = (a * c + b * d) / p;
+  const r = (a * d - b * c) / p;
+  const settle = (v) => Math.abs(v - 1) <= 1e-5 ? 1 : v;
+  const sx = settle(stretch ? p : scale);
+  const sy = settle(stretch ? Math.abs(r) : scale);
+  const flipY = stretch && r < 0;
+  const ry = flipY ? -sy : sy;
+  const linear = [p / sx, 0, q / ry, r / ry];
+  const center = applyMatrix(m, box.x + box.width / 2, box.y + box.height / 2);
+  const width2 = box.width * sx;
+  const height2 = box.height * sy;
+  const placed = {
+    x: center.x - width2 / 2,
+    y: center.y - height2 / 2,
+    width: width2,
+    height: height2,
+    rotation: Math.atan2(b, a),
+    scale: settle(scale),
+    flipX: false,
+    flipY
+  };
+  if (!near(linear[0], 1) || !near(linear[2], 0) || !near(linear[3], 1)) placed.transform = linear;
+  return placed;
+}
+function placeNode(node, tag, m, stretch, onWarn) {
+  if (isIdentity(m)) return 1;
+  const cx = node.x + node.width / 2;
+  const cy = node.y + node.height / 2;
+  if (!invert(m)) {
+    onWarn(`<${tag}> sits under a singular transform; kept its size`);
+    const center = applyMatrix(m, cx, cy);
+    node.x = center.x - node.width / 2;
+    node.y = center.y - node.height / 2;
+    return 1;
+  }
+  const turn = decomposeRotation(m, cx, cy);
+  if (turn != null) {
+    node.rotation = turn;
+    return 1;
+  }
+  const placed = placeBox(node, m, stretch);
+  node.x = placed.x;
+  node.y = placed.y;
+  node.width = placed.width;
+  node.height = placed.height;
+  if (Math.abs(placed.rotation) > 1e-9) node.rotation = placed.rotation;
+  if (placed.flipX) node.flipX = !node.flipX;
+  if (placed.flipY) node.flipY = !node.flipY;
+  if (placed.transform) node.transform = placed.transform;
+  return placed.scale;
+}
+function boxTransformAttr(node) {
+  if (poseLinearOf(node)) {
+    const frame = poseFrameOf(node);
+    const m = frame && formatMatrix(frame);
+    return m ? `transform="${m}"` : null;
+  }
+  if (!node.rotation) return null;
+  const cx = node.x + node.width / 2;
+  const cy = node.y + node.height / 2;
+  const deg = node.rotation * 180 / Math.PI;
+  return `transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`;
+}
+
+// src/readImage.ts
 var XLINK_NS2 = "http://www.w3.org/1999/xlink";
 function parseImageElement(el, ctm, onWarn) {
   const href = imageHref(el);
@@ -2134,45 +2148,15 @@ function imageHref(el) {
   return el.getAttribute("href") ?? el.getAttributeNS(XLINK_NS2, "href") ?? el.getAttribute("xlink:href");
 }
 function imageNodeAt(boxEl, ownerEl, href, ctm, onWarn) {
-  const num2 = (raw, fallback) => {
-    if (raw == null) return fallback;
-    const n = parseFloat(raw);
-    return Number.isFinite(n) ? n : fallback;
-  };
-  const rawX = num2(boxEl.getAttribute("x"), 0);
-  const rawY = num2(boxEl.getAttribute("y"), 0);
-  const rawW = num2(boxEl.getAttribute("width"), 0);
-  const rawH = num2(boxEl.getAttribute("height"), 0);
-  const px = (x, y) => [ctm[0] * x + ctm[2] * y + ctm[4], ctm[1] * x + ctm[3] * y + ctm[5]];
-  const [x0, y0] = px(rawX, rawY);
-  const [x1, y1] = px(rawX + rawW, rawY + rawH);
-  const node = {
-    kind: "image",
-    href,
-    x: Math.min(x0, x1),
-    y: Math.min(y0, y1),
-    width: Math.abs(x1 - x0),
-    height: Math.abs(y1 - y0)
-  };
+  const rawX = readLength(boxEl, "x", "x", 0, onWarn);
+  const rawY = readLength(boxEl, "y", "y", 0, onWarn);
+  const rawW = readLength(boxEl, "width", "x", 0, onWarn);
+  const rawH = readLength(boxEl, "height", "y", 0, onWarn);
+  const node = { kind: "image", href, x: rawX, y: rawY, width: rawW, height: rawH };
   const opacity = ownValue(ownerEl, "opacity");
   if (opacity != null) node.opacity = opacity;
   const localTransform = parseTransform(ownerEl.getAttribute("transform"), onWarn);
-  if (!isIdentity(localTransform)) {
-    const worldLocal = rebaseTransform(ctm, localTransform);
-    const cx = node.x + node.width / 2;
-    const cy = node.y + node.height / 2;
-    const angle = worldLocal && decomposeRotation(worldLocal, cx, cy);
-    if (!worldLocal) {
-      onWarn("<image> transform sits under a singular parent transform; dropped");
-    } else if (angle != null) {
-      node.rotation = angle;
-    } else {
-      const rotComp = rotationComponent(worldLocal);
-      if (Math.abs(rotComp) > 1e-4) {
-        onWarn("<image> transform has a rotational component that can't be cleanly stored as rotation; dropped (may not round-trip identically)");
-      }
-    }
-  }
+  placeNode(node, "image", multiply(ctm, localTransform), true, onWarn);
   return node;
 }
 function parseCroppedImage(g, ctm, onWarn) {
@@ -2186,10 +2170,66 @@ function parseCroppedImage(g, ctm, onWarn) {
     node.source = source;
   }
   const flip = parseTransform(img.getAttribute("transform"), onWarn);
-  if (flip[0] < 0) node.flipX = true;
-  if (flip[3] < 0) node.flipY = true;
+  if (flip[0] < 0) toggle(node, "flipX");
+  if (flip[3] < 0) toggle(node, "flipY");
   return node;
 }
+function toggle(node, key) {
+  if (node[key]) delete node[key];
+  else node[key] = true;
+}
+function svgDirection(style, text) {
+  return paragraphDirection(text, style?.direction ?? "auto");
+}
+function anchorOffset(style, width2, text) {
+  const edge = resolveAlign(style?.align ?? "left", svgDirection(style, text));
+  return edge === "center" ? width2 / 2 : edge === "right" ? width2 : 0;
+}
+
+// src/tspanLines.ts
+var LineTracker = class {
+  y;
+  constructor(text) {
+    this.y = text.getAttribute("y");
+  }
+  /** Whether `tspan` opens a new line. Call once per tspan, in order. */
+  startsLine(tspan) {
+    const y = tspan.getAttribute("y");
+    const movedY = y != null && y !== this.y;
+    if (y != null) this.y = y;
+    if (!tspan.hasAttribute("x")) return false;
+    const dy = parseFloat(tspan.getAttribute("dy") ?? "");
+    return movedY || Number.isFinite(dy) && dy !== 0;
+  }
+};
+function warnUnreadPositions(el, onWarn) {
+  const tag = el.tagName.toLowerCase();
+  for (const name of ["x", "y"]) {
+    const raw = el.getAttribute(name)?.trim() ?? "";
+    if (/[\s,]/.test(raw)) onWarn(`<${tag} ${name}="${raw}"> positions each glyph; only the first value is read`);
+  }
+  for (const name of ["dx", "rotate"]) {
+    const raw = el.getAttribute(name)?.trim() ?? "";
+    if (raw.split(/[\s,]+/).some((v) => parseFloat(v) !== 0 && v !== "")) {
+      onWarn(`<${tag} ${name}="${raw}"> is not read; the glyphs keep their own advance and angle`);
+    }
+  }
+}
+function joinLines(lines) {
+  const out = [];
+  let breaks = 0;
+  for (const line of lines) {
+    if (line.length > 0) {
+      if (breaks > 0) line[0] = { ...line[0], text: "\n".repeat(breaks) + line[0].text };
+      out.push(...line);
+      breaks = 0;
+    }
+    if (out.length > 0) breaks++;
+  }
+  return out;
+}
+
+// src/readText.ts
 var XML_NS = "http://www.w3.org/XML/1998/namespace";
 function preservesSpace(el) {
   for (let e = el; e; e = e.parentElement) {
@@ -2233,12 +2273,39 @@ function laidOutWidth(runs, style, plain) {
     maxWidth: Infinity,
     lineHeight: resolved.lineHeight,
     align: resolved.align,
-    direction: resolved.direction
+    direction: resolved.direction,
+    tabSize: resolved.tabSize
   });
   if (bounds.width > 0) return bounds.width;
   const longest = plain.split("\n").reduce((max, line) => Math.max(max, line.length), 0);
   return longest * resolved.fontSize * ESTIMATED_GLYPH_ADVANCE_EM;
 }
+function placeTextNode(node, m, onWarn) {
+  const cx = node.x + node.width / 2;
+  const cy = node.y + node.height / 2;
+  const scale = placeNode(node, "text", m, false, onWarn);
+  const inBox = [
+    scale,
+    0,
+    0,
+    scale,
+    node.x + node.width / 2 - scale * cx,
+    node.y + node.height / 2 - scale * cy
+  ];
+  if (isIdentity(inBox)) return;
+  if (Math.abs(scale - 1) > 1e-9) {
+    node.style = scaleTextStyle(node.style, scale);
+    if (node.runs) node.runs = scaleRuns(node.runs, scale);
+    if (node.stroke) node.stroke = scaleStroke(node.stroke, scale);
+  }
+  if (node.fill) node.fill = fillThroughMatrix(node.fill, inBox);
+  if (node.stroke?.paint) {
+    node.stroke = { ...node.stroke, paint: fillThroughMatrix(node.stroke.paint, inBox) };
+  }
+  if (node.runs) {
+    node.runs = node.runs.map((r) => r.fill ? { ...r, fill: fillThroughMatrix(r.fill, inBox) } : r);
+  }
+}
 function parseTextElement(el, ctm, style, gradients, onWarn) {
   const num2 = (raw, fallback) => {
     if (raw == null) return fallback;
@@ -2246,11 +2313,9 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
     return Number.isFinite(n) ? n : fallback;
   };
   const localTransform = parseTransform(el.getAttribute("transform"), onWarn);
-  const m = ctm;
-  const rawX = num2(el.getAttribute("x"), 0);
-  const rawY = num2(el.getAttribute("y"), 0);
-  const ax = m[0] * rawX + m[2] * rawY + m[4];
-  const ay = m[1] * rawX + m[3] * rawY + m[5];
+  warnUnreadPositions(el, onWarn);
+  const ax = readLength(el, "x", "x", 0, onWarn);
+  const ay = readLength(el, "y", "y", 0, onWarn);
   const leafStyle = deriveStyle(style, el);
   const textStyle = readTextStyle(leafStyle, onWarn);
   const textPaint = readTextPaint(leafStyle, gradients, onWarn, isNonScalingStroke(el));
@@ -2260,26 +2325,32 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   const explicitTopAnchor = dominantBaseline === "text-before-edge" || dominantBaseline === "hanging";
   const topY = explicitTopAnchor ? ay : ay - fontSize;
   const inheritedShift = ownValue(el, "baseline-shift", onWarn) ?? {};
-  const runs = [];
+  const runLines = [[]];
+  const tracker = new LineTracker(el);
+  const push = (run) => {
+    runLines[runLines.length - 1].push(run);
+  };
   for (let i = 0; i < el.childNodes.length; i++) {
     const child = el.childNodes[i];
     if (child.nodeType === 3) {
       const t = child.textContent ?? "";
       if (!t) continue;
-      runs.push({ text: t, ...inheritedShift });
+      push({ text: t, ...inheritedShift });
     } else if (child.nodeType === 1) {
       const sp = child;
       if (sp.tagName.toLowerCase() !== "tspan") {
         onWarn(`<text> child <${sp.tagName}> not supported; flattening text content`);
         const t = sp.textContent ?? "";
-        if (t) runs.push({ text: t, ...inheritedShift });
+        if (t) push({ text: t, ...inheritedShift });
         continue;
       }
-      const run = readTspanRun(sp, gradients, leafStyle, onWarn);
-      runs.push(run);
+      warnUnreadPositions(sp, onWarn);
+      if (tracker.startsLine(sp)) runLines.push([]);
+      push(readTspanRun(sp, gradients, leafStyle, onWarn));
     }
   }
-  if (!preservesSpace(el)) collapseRunWhitespace(runs);
+  if (!preservesSpace(el)) for (const line of runLines) collapseRunWhitespace(line);
+  const runs = joinLines(runLines);
   const plain = runs.map((r) => r.text).join("");
   const dataW = num2(el.getAttribute("data-weasel-width"), NaN);
   const dataH = num2(el.getAttribute("data-weasel-height"), NaN);
@@ -2289,7 +2360,7 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   const opacity = ownValue(el, "opacity");
   const node = {
     kind: "text",
-    x: ax - anchorOffset(textStyle, width2),
+    x: ax - anchorOffset(textStyle, width2, plain),
     y: topY,
     width: width2,
     height: height2,
@@ -2299,30 +2370,20 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
     (r) => Object.entries(r).some(([k, v]) => k !== "text" && v !== void 0)
   );
   if (hasStyling) node.runs = runs;
+  if (textStyle.direction === void 0 && !el.hasAttribute("data-weasel-width")) {
+    textStyle.direction = "ltr";
+  }
   if (el.getAttribute("data-weasel-wrap") === "true") textStyle.wrap = true;
   if (el.getAttribute("data-weasel-align") === "justify") textStyle.align = "justify";
+  const tabSize = Number(el.getAttribute("data-weasel-tab-size") ?? NaN);
+  if (Number.isFinite(tabSize)) textStyle.tabSize = tabSize;
   const va = el.getAttribute("data-weasel-vertical-align");
   if (va === "center" || va === "bottom") node.verticalAlign = va;
   if (Object.keys(textStyle).length > 0) node.style = textStyle;
   if (textPaint.fill !== void 0) node.fill = textPaint.fill;
   if (textPaint.stroke != null) node.stroke = textPaint.stroke;
   if (opacity != null) node.opacity = opacity;
-  if (!isIdentity(localTransform)) {
-    const worldLocal = rebaseTransform(ctm, localTransform);
-    const cx = node.x + node.width / 2;
-    const cy = node.y + node.height / 2;
-    const angle = worldLocal && decomposeRotation(worldLocal, cx, cy);
-    if (!worldLocal) {
-      onWarn("<text> transform sits under a singular parent transform; dropped");
-    } else if (angle != null) {
-      node.rotation = angle;
-    } else {
-      const rotComp = rotationComponent(worldLocal);
-      if (Math.abs(rotComp) > 1e-4) {
-        onWarn(`<text> transform has a rotational component that can't be cleanly stored as rotation; dropped (may not round-trip identically)`);
-      }
-    }
-  }
+  placeTextNode(node, multiply(ctm, localTransform), onWarn);
   return node;
 }
 function readTspanRun(el, gradients, style, onWarn) {
@@ -2338,7 +2399,8 @@ function readTspanRun(el, gradients, style, onWarn) {
   const size = ownValue(el, "font-size", onWarn);
   if (size?.fontSize != null) run.fontSize = size.fontSize;
   if (size?.fontScale != null) run.fontScale = size.fontScale;
-  const ls = ownValue(el, "letter-spacing", onWarn);
+  const tspanStyle = deriveStyle(style, el);
+  const ls = ownValue(el, "letter-spacing", onWarn, fontSizeOf(tspanStyle));
   if (ls != null) run.letterSpacing = ls;
   const shift = ownValue(el, "baseline-shift", onWarn);
   if (shift?.script != null) run.script = shift.script;
@@ -2351,11 +2413,12 @@ function readTspanRun(el, gradients, style, onWarn) {
   if (transform) run.textTransform = transform;
   const variant = ownValue(el, "font-variant", onWarn);
   if (variant) run.fontVariantCaps = variant;
-  const tspanStyle = deriveStyle(style, el);
   const fillAttr = resolveCurrentColor(ownProp(el, "fill"), tspanStyle);
   if (fillAttr) {
     const parsed = readProperty("fill", fillAttr);
-    if (parsed?.kind === "solid") {
+    if (parsed?.kind === "none") {
+      run.fill = null;
+    } else if (parsed?.kind === "solid") {
       run.fill = { fill: "solid", color: parsed.color };
     } else if (parsed?.kind === "ref") {
       const paint = gradients.get(parsed.id);
@@ -2363,7 +2426,7 @@ function readTspanRun(el, gradients, style, onWarn) {
       else if (parsed.fallback) run.fill = { fill: "solid", color: parsed.fallback.color };
     }
   }
-  const stroke = coreStroke(readStroke(ownStrokeStyle(el), gradients, onWarn, isNonScalingStroke(el)));
+  const stroke = coreStroke(readStroke(ownStrokeStyle(el, tspanStyle), gradients, onWarn, isNonScalingStroke(el)));
   if (stroke) run.stroke = stroke;
   return run;
 }
@@ -2371,17 +2434,14 @@ function readTextStyle(style, onWarn) {
   const out = {};
   const size = styleValue(style, "font-size", onWarn);
   if (size?.fontSize != null) out.fontSize = size.fontSize;
-  else if (size?.fontScale != null) {
-    onWarn(`font-size "${style["font-size"]}" on <text> is resolved against the 16px default`);
-    out.fontSize = 16 * size.fontScale;
-  }
   const ff = styleValue(style, "font-family", onWarn);
   if (ff) out.fontFamily = ff;
   const fw = styleValue(style, "font-weight", onWarn);
   if (fw != null) out.fontWeight = fw;
   const fs = styleValue(style, "font-style", onWarn);
   if (fs) out.fontStyle = fs;
-  if (styleValue(style, "direction") === "rtl") out.direction = "rtl";
+  const direction = styleValue(style, "direction");
+  if (direction === "rtl" || direction === "ltr") out.direction = direction;
   const ltr = out.direction !== "rtl";
   const anchor = styleValue(style, "text-anchor") ?? (ltr ? void 0 : "start");
   if (anchor === "start") out.align = ltr ? "left" : "right";
@@ -2489,13 +2549,8 @@ function sizedMarkerRef(el) {
   return { key, size: px ? { px: n } : n };
 }
 function markerInsetAttr(el) {
-  const n = parseFloat(weaselAttr(el, "inset") ?? "");
-  return Number.isFinite(n) && n > 0 ? n : 0;
-}
-function styleAt(el) {
-  const chain = [];
-  for (let e = el; e; e = e.parentElement) chain.unshift(e);
-  return chain.reduce((style, e) => deriveStyle(style, e), EMPTY_STYLE);
+  const n = parseFloat(weaselAttr(el, "inset") ?? "");
+  return Number.isFinite(n) && n > 0 ? n : 0;
 }
 function markerRef(raw, lo, span) {
   const v = raw?.trim();
@@ -2638,6 +2693,266 @@ function markerEntryFrom(el, id, role, strokeWidth, gradients, onWarn) {
     inset
   };
 }
+
+// src/parse.ts
+var SUPPORTED_GROUP_TAGS = /* @__PURE__ */ new Set(["g", "svg"]);
+function parseSvg(svg, opts = {}) {
+  const warnings = [];
+  const onWarn = (m) => {
+    warnings.push(m);
+  };
+  let doc;
+  try {
+    doc = new DOMParser().parseFromString(svg, "image/svg+xml");
+  } catch (e) {
+    return { nodes: [], warnings: [`failed to parse SVG: ${e.message}`] };
+  }
+  const errEl = doc.getElementsByTagName("parsererror")[0];
+  if (errEl) {
+    return { nodes: [], warnings: [`SVG parse error: ${errEl.textContent ?? "unknown"}`] };
+  }
+  const root = doc.documentElement;
+  if (!root || root.tagName.toLowerCase() !== "svg") {
+    return { nodes: [], warnings: ["root element is not <svg>"] };
+  }
+  bindStylesheets(doc, mediaEnvironmentFor(root, opts.media), onWarn);
+  const namespaces = opts.namespaces ?? {};
+  const uriToPrefix = /* @__PURE__ */ new Map();
+  for (const [prefix, uri] of Object.entries(namespaces)) {
+    uriToPrefix.set(uri, prefix);
+  }
+  const documentMeta = collectDocumentMeta(root, uriToPrefix);
+  const gradients = collectGradients(root, onWarn);
+  for (const [id, paint] of collectPatterns(root, onWarn)) gradients.set(id, paint);
+  const rootStyle = deriveStyle(EMPTY_STYLE, root);
+  const clips = collectClipPaths(root, onWarn);
+  const nodes = parseChildren(root, IDENTITY_MATRIX, rootStyle, gradients, clips, onWarn, uriToPrefix);
+  const markers = ingestMarkers(root, nodes, gradients, onWarn);
+  const result = { nodes, warnings };
+  if (markers.length > 0) result.markers = markers;
+  if (documentMeta) result.documentMeta = documentMeta;
+  const viewBox = parseViewBoxAttr(root.getAttribute("viewBox"));
+  if (viewBox) result.viewBox = viewBox;
+  const width2 = parseRootLength(root.getAttribute("width"), "width", fontSizeOf(rootStyle), onWarn);
+  if (width2 != null) result.width = width2;
+  const height2 = parseRootLength(root.getAttribute("height"), "height", fontSizeOf(rootStyle), onWarn);
+  if (height2 != null) result.height = height2;
+  for (let i = 0; i < root.children.length; i++) {
+    const c = root.children[i];
+    if (c.tagName.toLowerCase() === "title") {
+      result.title = c.textContent ?? "";
+      break;
+    }
+  }
+  return result;
+}
+function parseRootLength(raw, name, fontSize, onWarn) {
+  if (raw == null) return void 0;
+  const n = parseFloat(raw);
+  if (!Number.isFinite(n)) return void 0;
+  const unit = /^\s*[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?\s*([a-z%]+)\s*$/i.exec(raw)?.[1];
+  const scale = unit && ABSOLUTE_PX[unit.toLowerCase()];
+  if (scale) return n * scale;
+  const ems = unit && emsPer(unit);
+  if (ems) return n * ems * fontSize;
+  if (unit) onWarn(`<svg ${name}="${raw}"> unit "${unit}" is not converted; read as ${n}`);
+  return n;
+}
+function collectDocumentMeta(root, uriToPrefix) {
+  if (uriToPrefix.size === 0) return void 0;
+  const meta = {};
+  for (let i = 0; i < root.attributes.length; i++) {
+    const a = root.attributes[i];
+    if (!a.namespaceURI) continue;
+    const prefix = uriToPrefix.get(a.namespaceURI);
+    if (!prefix) continue;
+    const bucket = meta[prefix] ??= {};
+    (bucket.attrs ??= {})[a.localName] = a.value;
+  }
+  for (let i = 0; i < root.children.length; i++) {
+    const c = root.children[i];
+    if (!c.namespaceURI) continue;
+    const prefix = uriToPrefix.get(c.namespaceURI);
+    if (!prefix) continue;
+    const bucket = meta[prefix] ??= {};
+    const elements = bucket.elements ??= {};
+    const list = elements[c.localName] ??= [];
+    list.push(collectNamespacedElement(c, uriToPrefix));
+  }
+  return Object.keys(meta).length > 0 ? meta : void 0;
+}
+function collectNamespacedElement(el, uriToPrefix) {
+  const result = { attrs: {} };
+  for (let i = 0; i < el.attributes.length; i++) {
+    const a = el.attributes[i];
+    if (a.name.startsWith("xmlns")) continue;
+    result.attrs[a.localName] = a.value;
+  }
+  let hasChildElements = false;
+  for (let i = 0; i < el.children.length; i++) {
+    const c = el.children[i];
+    if (!c.namespaceURI) continue;
+    const prefix = uriToPrefix.get(c.namespaceURI);
+    if (!prefix) continue;
+    hasChildElements = true;
+    const children = result.children ??= {};
+    const list = children[c.localName] ??= [];
+    list.push(collectNamespacedElement(c, uriToPrefix));
+  }
+  if (!hasChildElements && el.textContent != null && el.textContent.trim() !== "") {
+    result.text = el.textContent;
+  }
+  return result;
+}
+function collectElementMeta(el, uriToPrefix) {
+  if (uriToPrefix.size === 0) return void 0;
+  const meta = {};
+  for (let i = 0; i < el.attributes.length; i++) {
+    const a = el.attributes[i];
+    if (!a.namespaceURI) continue;
+    const prefix = uriToPrefix.get(a.namespaceURI);
+    if (!prefix) continue;
+    const bucket = meta[prefix] ??= {};
+    (bucket.attrs ??= {})[a.localName] = a.value;
+  }
+  for (let i = 0; i < el.children.length; i++) {
+    const c = el.children[i];
+    if (!c.namespaceURI) continue;
+    const prefix = uriToPrefix.get(c.namespaceURI);
+    if (!prefix) continue;
+    const bucket = meta[prefix] ??= {};
+    const elements = bucket.elements ??= {};
+    const list = elements[c.localName] ??= [];
+    list.push(collectNamespacedElement(c, uriToPrefix));
+  }
+  return Object.keys(meta).length > 0 ? meta : void 0;
+}
+function parseChildren(parent, ctm, style, gradients, clips, onWarn, uriToPrefix) {
+  const out = [];
+  for (let i = 0; i < parent.children.length; i++) {
+    const el = parent.children[i];
+    const ns = el.namespaceURI;
+    if (ns && ns !== "http://www.w3.org/2000/svg") continue;
+    const node = parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix);
+    if (node) {
+      if (Array.isArray(node)) out.push(...node);
+      else out.push(node);
+    }
+  }
+  return out;
+}
+function parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix) {
+  const tag = el.tagName.toLowerCase();
+  if (IGNORED_TAGS.has(tag)) return null;
+  if (ownValue(el, "display") === "none") return null;
+  const containers = tag === "g" || SUPPORTED_GROUP_TAGS.has(tag);
+  if (!containers && isHidden(deriveStyle(style, el))) return null;
+  if (tag === "g" && el.hasAttribute("data-weasel-image")) {
+    const image = parseCroppedImage(el, ctm, onWarn);
+    if (image) {
+      const meta2 = collectElementMeta(el, uriToPrefix);
+      if (meta2) image.meta = meta2;
+      return image;
+    }
+  }
+  const clipRaw = tag === "g" ? null : ownProp(el, "clip-path");
+  if (clipRaw != null && readProperty("clip-path", clipRaw) !== "none") {
+    onWarn(`clip-path on <${tag}> is not modeled; only a <g> clips, so it is drawn unclipped`);
+  }
+  if (tag === "g") {
+    const local = parseTransform(el.getAttribute("transform"), onWarn);
+    const childCtm = multiply(ctm, local);
+    const childStyle = deriveStyle(style, el);
+    const children = parseChildren(el, childCtm, childStyle, gradients, clips, onWarn, uriToPrefix);
+    const opacity2 = ownValue(el, "opacity");
+    const group = { kind: "group", children };
+    const clip = clipFor(el, childCtm, clips, onWarn);
+    if (clip) group.clip = clip;
+    if (opacity2 != null) group.opacity = opacity2;
+    const meta2 = collectElementMeta(el, uriToPrefix);
+    if (meta2) group.meta = meta2;
+    return group;
+  }
+  if (SUPPORTED_GROUP_TAGS.has(tag)) {
+    const childStyle = deriveStyle(style, el);
+    const x = parseFloat(el.getAttribute("x") ?? "0");
+    const y = parseFloat(el.getAttribute("y") ?? "0");
+    const offset = [1, 0, 0, 1, Number.isFinite(x) ? x : 0, Number.isFinite(y) ? y : 0];
+    if (el.hasAttribute("viewBox")) {
+      onWarn("nested <svg> viewBox is not modeled; its children are not rescaled");
+    }
+    return parseChildren(el, multiply(ctm, offset), childStyle, gradients, clips, onWarn, uriToPrefix);
+  }
+  if (tag === "text") {
+    const textNode = parseTextElement(el, ctm, style, gradients, onWarn);
+    if (textNode && !Array.isArray(textNode) && textNode.kind === "text") {
+      const meta2 = collectElementMeta(el, uriToPrefix);
+      if (meta2) textNode.meta = meta2;
+    }
+    return textNode;
+  }
+  if (tag === "image") {
+    const imageNode = parseImageElement(el, ctm, onWarn);
+    if (imageNode) {
+      const meta2 = collectElementMeta(el, uriToPrefix);
+      if (meta2) imageNode.meta = meta2;
+    }
+    return imageNode;
+  }
+  if (!SUPPORTED_LEAF_TAGS.has(tag)) {
+    onWarn(`unsupported element: <${el.tagName}>`);
+    return null;
+  }
+  const localTransform = parseTransform(el.getAttribute("transform"), onWarn);
+  let path = lowerLeaf(el, tag, ctm, onWarn);
+  if (!path) return null;
+  let rotation;
+  let baked = ctm;
+  if (!isIdentity(localTransform)) {
+    const worldLocal = rebaseTransform(ctm, localTransform);
+    const bounds = boundsOfPath(path);
+    const cx = bounds.x + bounds.width / 2;
+    const cy = bounds.y + bounds.height / 2;
+    const angle = worldLocal && decomposeRotation(worldLocal, cx, cy);
+    if (!worldLocal) {
+      onWarn("leaf transform sits under a singular parent transform; dropped");
+    } else if (angle != null) {
+      rotation = angle;
+    } else {
+      path = transformPath(path, worldLocal);
+      baked = multiply(ctm, localTransform);
+      const rotComp = rotationComponent(worldLocal);
+      if (Math.abs(rotComp) > 1e-4) {
+        onWarn(`leaf transform has a rotational component that can't be cleanly stored as rotation; baked into geometry (may not round-trip identically)`);
+      }
+    }
+  }
+  const leafStyle = deriveStyle(style, el);
+  const fill = paintThroughMatrix(readPaint2(leafStyle, "fill", "#000000", gradients, onWarn), baked);
+  const ownStroke = readStroke(leafStyle, gradients, onWarn, isNonScalingStroke(el));
+  const stroke = ownStroke && strokeThroughMatrix(ownStroke, baked);
+  if (stroke && typeof stroke.width === "number" && isNonUniform(baked)) {
+    onWarn(`<${tag}> stroke sits under a skew or non-uniform scale; its width takes the uniform part only`);
+  }
+  const opacity = ownValue(el, "opacity");
+  if (styleValue(leafStyle, "fill-rule") === "evenodd" && path.kind === "polygon") {
+    path = { ...path, fillRule: "evenodd" };
+  }
+  const node = { kind: "path", path, fill };
+  if (stroke) node.stroke = stroke;
+  if (opacity != null) node.opacity = opacity;
+  if (rotation != null) node.rotation = rotation;
+  if (tag === "line" && (leafStyle["fill"] ?? null) == null) {
+    node.fill = { kind: "none" };
+  }
+  const meta = collectElementMeta(el, uriToPrefix);
+  if (meta) node.meta = meta;
+  return node;
+}
+function isHidden(style) {
+  const v = styleValue(style, "visibility");
+  return v === "hidden" || v === "collapse";
+}
 function serializeSvg(nodes, opts = {}) {
   const registry = new PaintServerRegistry();
   registerPaintServers(nodes, registry);
@@ -2649,7 +2964,7 @@ function serializeSvg(nodes, opts = {}) {
     rootAttrs.push(`xmlns:${WEASEL_NS_PREFIX}="${WEASEL_NS}"`);
   }
   for (const [prefix, uri] of Object.entries(namespaces)) {
-    rootAttrs.push(`xmlns:${prefix}="${escapeAttr2(uri)}"`);
+    rootAttrs.push(`xmlns:${prefix}="${escapeAttr(uri)}"`);
   }
   rootAttrs.push(`viewBox="${vb}"`);
   if (opts.width != null) rootAttrs.push(`width="${trimNumber(opts.width)}"`);
@@ -2659,7 +2974,7 @@ function serializeSvg(nodes, opts = {}) {
       const bucket = opts.documentMeta[prefix];
       if (!bucket?.attrs) continue;
       for (const [name, value] of Object.entries(bucket.attrs)) {
-        rootAttrs.push(`${prefix}:${name}="${escapeAttr2(value)}"`);
+        rootAttrs.push(`${prefix}:${name}="${escapeAttr(value)}"`);
       }
     }
   }
@@ -2687,7 +3002,7 @@ function serializeSvg(nodes, opts = {}) {
 function namespacedElementXml(prefix, localName2, el) {
   const attrs = [];
   for (const [name, value] of Object.entries(el.attrs)) {
-    attrs.push(`${name}="${escapeAttr2(value)}"`);
+    attrs.push(`${name}="${escapeAttr(value)}"`);
   }
   const head = attrs.length > 0 ? `<${prefix}:${localName2} ${attrs.join(" ")}>` : `<${prefix}:${localName2}>`;
   let body = "";
@@ -2707,7 +3022,7 @@ function metaAttrsXml(meta, namespaces) {
     const bucket = meta[prefix];
     if (!bucket?.attrs) continue;
     for (const [name, value] of Object.entries(bucket.attrs)) {
-      parts.push(`${prefix}:${name}="${escapeAttr2(value)}"`);
+      parts.push(`${prefix}:${name}="${escapeAttr(value)}"`);
     }
   }
   return parts.length > 0 ? ` ${parts.join(" ")}` : "";
@@ -2770,15 +3085,11 @@ function imageXml(node, namespaces) {
   if (node.opacity != null && node.opacity !== 1) {
     outer.push(`opacity="${trimNumber(node.opacity)}"`);
   }
-  if (node.rotation != null && node.rotation !== 0) {
-    const cx = node.x + node.width / 2;
-    const cy = node.y + node.height / 2;
-    const deg = node.rotation * 180 / Math.PI;
-    outer.push(`transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`);
-  }
+  const frame = boxTransformAttr(node);
+  if (frame) outer.push(frame);
   const metaAttrs = metaAttrsXml(node.meta, namespaces);
   const metaEls = metaElementsXml(node.meta, namespaces);
-  const href = `href="${escapeAttr2(node.href)}"`;
+  const href = `href="${escapeAttr(node.href)}"`;
   if (!node.source && !node.flipX && !node.flipY) {
     const attrs = [href, box, 'preserveAspectRatio="none"', ...outer].join(" ");
     if (metaEls) return `<image ${attrs}${metaAttrs}>${metaEls}</image>`;
@@ -2839,7 +3150,7 @@ function pathXml(node, registry, namespaces, warn) {
 }
 function paintAttrs(paint, name, registry, includeOpacity = true) {
   if (paint.kind === "none") return [`${name}="none"`];
-  const out = [`${name}="${paint.kind === "solid" ? paint.color : registry.ref(paint.paint)}"`];
+  const out = [`${name}="${paint.kind === "solid" ? escapeAttr(paint.color) : registry.ref(paint.paint)}"`];
   if (includeOpacity) out.push(...opacityAttr(`${name}-opacity`, svgPaintOpacity(paint)));
   return out;
 }
@@ -2860,7 +3171,7 @@ function coreStrokeAttrs(stroke, registry, warn) {
   const width2 = stroke.width ?? 1;
   if (!((typeof width2 === "object" ? width2.px : width2) > 0)) return [];
   warnStrokeAlign(stroke.align, warn);
-  const attrs = [`stroke="${"color" in paint ? paint.color : registry.ref(paint)}"`];
+  const attrs = [`stroke="${"color" in paint ? escapeAttr(paint.color) : registry.ref(paint)}"`];
   attrs.push(...opacityAttr("stroke-opacity", paint.opacity));
   attrs.push(...strokeWidthAttrs(width2));
   if (stroke.cap) attrs.push(`stroke-linecap="${stroke.cap}"`);
@@ -2921,7 +3232,8 @@ function computeBounds(nodes) {
       return;
     }
     const b = n.kind === "text" || n.kind === "image" ? { minX: n.x, minY: n.y, maxX: n.x + n.width, maxY: n.y + n.height } : pathBounds(n.path);
-    const local = n.rotation ? rotateAboutCenter(ctm, b, n.rotation) : ctm;
+    const frame = n.kind === "path" ? null : poseFrameOf(n);
+    const local = frame ? multiply(ctm, frame) : n.rotation ? rotateAboutCenter(ctm, b, n.rotation) : ctm;
     for (const [x, y] of corners(b)) {
       const px = local[0] * x + local[2] * y + local[4];
       const py = local[1] * x + local[3] * y + local[5];
@@ -2949,7 +3261,7 @@ function rotateAboutCenter(ctm, b, angle) {
 }
 function textXml(node, registry, namespaces, warn) {
   const attrs = [
-    `x="${trimNumber(node.x + anchorOffset(node.style, node.width))}"`,
+    `x="${trimNumber(node.x + anchorOffset(node.style, node.width, node.text))}"`,
     `y="${trimNumber(node.y)}"`,
     `dominant-baseline="text-before-edge"`,
     // The runs model stores real line breaks; SVG's default whitespace
@@ -2960,12 +3272,12 @@ function textXml(node, registry, namespaces, warn) {
   ];
   const style = node.style;
   if (style?.fontSize != null) attrs.push(`font-size="${trimNumber(resolveScreenLength(style.fontSize, 1))}"`);
-  if (style?.fontFamily) attrs.push(`font-family="${escapeAttr2(style.fontFamily)}"`);
-  if (style?.fontWeight != null) attrs.push(`font-weight="${String(style.fontWeight)}"`);
+  if (style?.fontFamily) attrs.push(`font-family="${escapeAttr(style.fontFamily)}"`);
+  if (style?.fontWeight != null) attrs.push(`font-weight="${escapeAttr(String(style.fontWeight))}"`);
   if (style?.fontStyle && style.fontStyle !== "normal") attrs.push(`font-style="${style.fontStyle}"`);
   if (style?.fontVariantCaps === "small-caps") attrs.push('font-variant="small-caps"');
-  const direction = style?.direction ?? "ltr";
-  if (direction === "rtl") attrs.push('direction="rtl"');
+  const direction = svgDirection(style, node.text);
+  if (direction === "rtl" || style?.direction === "ltr") attrs.push(`direction="${direction}"`);
   if (style?.align != null || direction === "rtl") {
     const align = style?.align ?? "left";
     const anchor = align === "center" ? "middle" : align === "start" || align === "justify" ? "start" : align === "end" ? "end" : align === "left" === (direction === "ltr") ? "start" : "end";
@@ -2985,6 +3297,7 @@ function textXml(node, registry, namespaces, warn) {
     attrs.push('data-weasel-wrap="true"');
     warn("text that wraps at its box width is written unwrapped: SVG text does not wrap, so other readers draw one line per hard break (weasel reads the wrap back)");
   }
+  if (style?.tabSize != null) attrs.push(`data-weasel-tab-size="${trimNumber(style.tabSize)}"`);
   if (node.verticalAlign && node.verticalAlign !== "top") {
     attrs.push(`data-weasel-vertical-align="${node.verticalAlign}"`);
     warn(`text aligned to the ${node.verticalAlign} of its box is written top-aligned: SVG text has no box, so other readers draw it at the top (weasel reads the alignment back)`);
@@ -2992,19 +3305,15 @@ function textXml(node, registry, namespaces, warn) {
   if (node.fill === null) {
     attrs.push('fill="none"');
   } else if (node.fill) {
-    attrs.push(`fill="${"color" in node.fill ? node.fill.color : registry.ref(node.fill)}"`);
+    attrs.push(`fill="${"color" in node.fill ? escapeAttr(node.fill.color) : registry.ref(node.fill)}"`);
     attrs.push(...opacityAttr("fill-opacity", node.fill.opacity));
   }
   for (const a of coreStrokeAttrs(node.stroke, registry, warn)) attrs.push(a);
   if (node.opacity != null && node.opacity !== 1) {
     attrs.push(`opacity="${trimNumber(node.opacity)}"`);
   }
-  if (node.rotation != null && node.rotation !== 0) {
-    const cx = node.x + node.width / 2;
-    const cy = node.y + node.height / 2;
-    const deg = node.rotation * 180 / Math.PI;
-    attrs.push(`transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`);
-  }
+  const frame = boxTransformAttr(node);
+  if (frame) attrs.push(frame);
   const body = node.runs && node.runs.length > 0 ? node.runs.map((r) => runXml(r, style, registry, warn)).join("") : escapeText(node.text);
   const metaAttrs = metaAttrsXml(node.meta, namespaces);
   const metaEls = metaElementsXml(node.meta, namespaces);
@@ -3021,7 +3330,7 @@ function runXml(run, style, registry, warn) {
   else if (run.bold) attrs.push(`font-weight="700"`);
   if (run.italic) attrs.push(`font-style="italic"`);
   if (run.fontVariantCaps) attrs.push(`font-variant="${run.fontVariantCaps}"`);
-  if (run.fontFamily) attrs.push(`font-family="${escapeAttr2(run.fontFamily)}"`);
+  if (run.fontFamily) attrs.push(`font-family="${escapeAttr(run.fontFamily)}"`);
   const face = scriptSizeFace(run, style);
   const presetScale = face && run.script ? scriptMetricsFor(face.family, face.weight, face.style)[run.script].size : void 0;
   const scale = run.fontScale ?? presetScale;
@@ -3037,9 +3346,10 @@ function runXml(run, style, registry, warn) {
   }
   const runDecoration = textDecorationValue(run.underline, run.strikethrough, run.overline);
   if (runDecoration) attrs.push(`text-decoration="${runDecoration}"`);
-  if (run.fill) {
+  if (run.fill === null) attrs.push('fill="none"');
+  else if (run.fill) {
     if ("color" in run.fill) {
-      attrs.push(`fill="${run.fill.color}"`);
+      attrs.push(`fill="${escapeAttr(run.fill.color)}"`);
     } else {
       attrs.push(`fill="${registry.ref(run.fill)}"`);
     }
@@ -3056,21 +3366,7 @@ function textDecorationValue(underline, strikethrough, overline) {
   if (overline) tokens.push("overline");
   return tokens.length > 0 ? tokens.join(" ") : null;
 }
-function escapeAttr2(s) {
-  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
-}
-function escapeText(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
 function pathBounds(path) {
-  if (path.kind === "rect") {
-    return {
-      minX: path.x,
-      minY: path.y,
-      maxX: path.x + path.width,
-      maxY: path.y + path.height
-    };
-  }
   const b = boundsOfPath(path);
   return { minX: b.x, minY: b.y, maxX: b.x + b.width, maxY: b.y + b.height };
 }
@@ -3109,10 +3405,6 @@ function readFileText(file) {
     reader.readAsText(file);
   });
 }
-var svgIdCounter = 0;
-function freshSvgNodeId() {
-  return `n${(svgIdCounter++).toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
-}
 function fillDataFromSvg(paint, box) {
   if (!paint) return void 0;
   if (paint.kind === "none") return null;
@@ -3205,6 +3497,7 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
         height: n.height
       };
       if (n.rotation) pose2.rotation = n.rotation;
+      if (n.transform) pose2.transform = n.transform;
       const box = {
         x: pose2.x,
         y: pose2.y,
@@ -3226,6 +3519,7 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
     if (n.kind === "image") {
       const pose2 = { x: n.x, y: n.y, width: n.width, height: n.height };
       if (n.rotation) pose2.rotation = n.rotation;
+      if (n.transform) pose2.transform = n.transform;
       return pushLeaf(n, parentId, pose2, {
         image: {
           src: n.href,
@@ -3253,18 +3547,15 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
 function isNodeList(input) {
   return Array.isArray(input);
 }
-function scaleTextData(data, scale) {
-  if (scale === 1 || typeof data.text !== "string") return data;
-  const style = data.style ?? {};
-  const scaleSize = (v) => typeof v === "number" ? v * scale : v;
-  const runs = data.runs;
-  return {
-    ...data,
-    ...runs ? {
-      runs: runs.map((r) => r.fontSize !== void 0 ? { ...r, fontSize: scaleSize(r.fontSize) } : r)
-    } : {},
-    style: { ...style, fontSize: scaleSize(style.fontSize ?? resolveTextStyle(style).fontSize) }
-  };
+function scaleLeafData(data, scale) {
+  if (scale === 1) return data;
+  const out = { ...data };
+  if (out.stroke) out.stroke = scaleStroke(out.stroke, scale);
+  if (typeof out.text === "string") {
+    out.style = scaleTextStyle(out.style, scale);
+    if (out.runs) out.runs = scaleRuns(out.runs, scale);
+  }
+  return out;
 }
 async function unpackSvgFiles(files, ctx) {
   const layer = ctx.scene.layers[0]?.id ?? "default";
@@ -3274,14 +3565,14 @@ async function unpackSvgFiles(files, ctx) {
       const text = await readFileText(file);
       const parsed = parseSvg(text);
       for (const w of parsed.warnings) dwarn("ingest", `svg "${file.name}":`, w);
-      let drafts = svgNodesToKitDrafts(parsed, freshSvgNodeId);
+      let drafts = svgNodesToKitDrafts(parsed, () => ctx.scene.mintId());
       if (drafts.length === 0) {
         console.warn(`weasel ingest: svg "${file.name}" parsed to no drawable nodes`);
         continue;
       }
       const roots = drafts.filter((d) => d.parentId === null);
       if (roots.length > 1) {
-        const wrapperId = freshSvgNodeId();
+        const wrapperId = ctx.scene.mintId();
         const union2 = unionAABB(roots.map((d) => d.pose));
         drafts = [
           { kind: "container", id: wrapperId, parentId: null, pose: union2 },
@@ -3316,7 +3607,7 @@ async function unpackSvgFiles(files, ctx) {
             kind: d.kind,
             layer,
             pose: place(d.pose),
-            data: d.kind === "leaf" ? scaleTextData(d.data, scale) : {},
+            data: d.kind === "leaf" ? scaleLeafData(d.data, scale) : {},
             parent: d.parentId
           },
           label: "Insert SVG"
@@ -3369,6 +3660,7 @@ function svgImageFromKit(image, pose) {
   if (image.flipY) node.flipY = true;
   if (image.opacity != null) node.opacity = image.opacity;
   if (pose.rotation) node.rotation = pose.rotation;
+  if (pose.transform) node.transform = pose.transform;
   return node;
 }
 function strokeInPoseFrame(stroke, box) {
@@ -3399,6 +3691,7 @@ function svgLeafFromKit(data, pose) {
     if (data.fill !== void 0) node2.fill = data.fill && fillInPoseFrame(data.fill, pose);
     if (data.stroke) node2.stroke = strokeInPoseFrame(data.stroke, pose);
     if (pose.rotation) node2.rotation = pose.rotation;
+    if (pose.transform) node2.transform = pose.transform;
     return node2;
   }
   if (!data.path) return null;