@weasel-js/svg 1.5.0 → 1.5.1

package/dist/index.js

@@ -1,4 +1,4 @@
-import { pathFromD, PATH_M, PATH_L, PATH_Z, boundsOfPath, getMarker, SCRIPT_METRICS, dwarn, createInsertOp, PathBuilder, parseColor, rgbaToHex, resolveTextStyle, layoutRuns, resolveRuns, resolveAlign, PATH_C, PATH_Q, solid, fillToBoundsFrame, getPaintKind } from '@weasel-js/core';
+import { pathFromD, PATH_M, PATH_L, PATH_Z, boundsOfPath, resolveScreenLength, SCRIPT_METRICS, dwarn, getMarker, registerMarker, createInsertOp, PathBuilder, parseColor, rgbaToHex, resolveTextStyle, layoutRuns, resolveRuns, resolveAlign, PATH_C, PATH_Q, solid, fillToBoundsFrame, getPaintKind } from '@weasel-js/core';
 import { invert } from '@weasel-js/geom';
 import { tileGeometry } from '@weasel-js/core/patterns-builtin';
 
@@ -242,8 +242,18 @@ function parsePaintAttr(raw) {
   if (s === "currentColor" || s === "currentcolor") {
     return { kind: "solid", color: "#000000", alpha: 1 };
   }
-  const urlMatch = /^url\(\s*#([^)\s]+)\s*\)/.exec(s);
-  if (urlMatch) return { kind: "ref", id: urlMatch[1] };
+  const urlMatch = /^url\(\s*#([^)\s]+)\s*\)(.*)$/.exec(s);
+  if (urlMatch) {
+    const out = { kind: "ref", id: urlMatch[1] };
+    const rest = urlMatch[2].trim();
+    if (rest !== "" && rest !== "none") {
+      const fallback = parsePaintAttr(rest);
+      if (fallback?.kind === "solid") {
+        out.fallback = { color: fallback.color, alpha: fallback.alpha };
+      }
+    }
+    return out;
+  }
   try {
     const [r, g, b, a] = parseColor(s);
     return { kind: "solid", color: rgbaToHex([r, g, b]), alpha: a };
@@ -387,13 +397,45 @@ function serializePathD(path) {
 }
 
 // src/gradients.ts
-var GRADIENT_TAGS = /* @__PURE__ */ new Set(["lineargradient", "radialgradient"]);
+var WEASEL_NS = "urn:weasel-js:svg";
+var WEASEL_NS_PREFIX = "wzl";
+function hasNativeSvgForm(paint) {
+  const kind = paint.fill ?? "solid";
+  return kind === "solid" || kind === "linear-gradient" || kind === "radial-gradient" || kind === "pattern";
+}
+var INTERPOLATE_SPACES = /* @__PURE__ */ new Set(["rgb", "oklab", "oklch"]);
+function interpolateAttr(space) {
+  if (!space || space === "rgb") return "";
+  return ` ${WEASEL_NS_PREFIX}:interpolate="${space}"`;
+}
+function readInterpolate(el, elements) {
+  const raw = inheritedAttr(el, elements, `${WEASEL_NS_PREFIX}:interpolate`) ?? el.getAttributeNS(WEASEL_NS, "interpolate");
+  if (raw === "oklab" || raw === "oklch") return raw;
+  return void 0;
+}
+function usesInterpolateAttr(paint) {
+  const space = paint.interpolate;
+  return space != null && space !== "rgb" && INTERPOLATE_SPACES.has(space);
+}
+function localName(tag) {
+  const i = tag.indexOf(":");
+  return (i < 0 ? tag : tag.slice(i + 1)).toLowerCase();
+}
+var GRADIENT_TAGS = /* @__PURE__ */ new Set([
+  "lineargradient",
+  "radialgradient",
+  "conicgradient",
+  `${WEASEL_NS_PREFIX}:conicgradient`,
+  "meshgradient",
+  `${WEASEL_NS_PREFIX}:meshgradient`
+]);
 var XLINK_NS = "http://www.w3.org/1999/xlink";
 function collectGradients(svg, onWarn) {
   const out = /* @__PURE__ */ new Map();
   const elements = collectElementsByTag(svg, GRADIENT_TAGS);
   for (const [id, el] of elements) {
-    const paint = el.tagName.toLowerCase() === "lineargradient" ? readLinearGradient(el, elements, onWarn) : readRadialGradient(el, elements, onWarn);
+    const tag = localName(el.tagName);
+    const paint = tag === "lineargradient" ? readLinearGradient(el, elements, onWarn) : tag === "conicgradient" ? readConicGradient(el, elements, onWarn) : tag === "meshgradient" ? readMeshGradient(el, onWarn) : readRadialGradient(el, elements, onWarn);
     if (paint) out.set(id, paint);
   }
   warnUnsupportedDefsChildren(svg, onWarn);
@@ -407,7 +449,8 @@ function warnUnsupportedDefsChildren(svg, onWarn) {
     for (let i = 0; i < root.children.length; i++) {
       const child = root.children[i];
       const tag = child.tagName.toLowerCase();
-      if (GRADIENT_TAGS.has(tag) || tag === "pattern" || tag === "marker") continue;
+      if (GRADIENT_TAGS.has(tag) || GRADIENT_TAGS.has(localName(tag))) continue;
+      if (tag === "pattern" || tag === "marker" || tag === "clippath") continue;
       onWarn(`unsupported <defs> child: <${child.tagName}>`);
     }
   }
@@ -489,7 +532,8 @@ function readLinearGradient(el, elements, onWarn) {
       y: num(inheritedAttr(el, elements, "y2"), 0)
     },
     stops: inheritedStops(el, elements, onWarn),
-    units: readGradientUnits(el, elements)
+    units: readGradientUnits(el, elements),
+    interpolate: readInterpolate(el, elements)
   };
 }
 function readRadialGradient(el, elements, onWarn) {
@@ -502,7 +546,48 @@ function readRadialGradient(el, elements, onWarn) {
     },
     radius: num(inheritedAttr(el, elements, "r"), 0.5),
     stops: inheritedStops(el, elements, onWarn),
-    units: readGradientUnits(el, elements)
+    units: readGradientUnits(el, elements),
+    interpolate: readInterpolate(el, elements)
+  };
+}
+function readConicGradient(el, elements, onWarn) {
+  warnGradientTransform(el, elements, onWarn);
+  return {
+    fill: "conic-gradient",
+    center: {
+      x: num(inheritedAttr(el, elements, "cx"), 0.5),
+      y: num(inheritedAttr(el, elements, "cy"), 0.5)
+    },
+    angle: num(inheritedAttr(el, elements, "angle"), 0),
+    stops: inheritedStops(el, elements, onWarn),
+    units: readGradientUnits(el, elements),
+    interpolate: readInterpolate(el, elements)
+  };
+}
+function readMeshGradient(el, onWarn) {
+  const patches = [];
+  for (let i = 0; i < el.children.length; i++) {
+    const child = el.children[i];
+    if (localName(child.tagName) !== "patch") continue;
+    const points = (child.getAttribute("points") ?? "").trim().split(/\s+/).filter(Boolean).map((pair) => {
+      const [x, y] = pair.split(",").map(Number);
+      return { x, y };
+    });
+    const colors = (child.getAttribute("colors") ?? "").trim().split(/\s+/).filter(Boolean);
+    const sane = (points.length === 12 || points.length === 16) && points.every((p) => Number.isFinite(p.x) && Number.isFinite(p.y)) && colors.length === 4;
+    if (!sane) {
+      onWarn?.(`<${WEASEL_NS_PREFIX}:patch> with ${points.length} points and ${colors.length} colors \u2014 dropped`);
+      continue;
+    }
+    patches.push({ points, colors });
+  }
+  if (patches.length === 0) return null;
+  const space = el.getAttribute("interpolate") ?? el.getAttributeNS(WEASEL_NS, "interpolate");
+  return {
+    fill: "mesh-gradient",
+    patches,
+    units: el.getAttribute("gradientUnits") === "objectBoundingBox" ? "bounds" : "world",
+    ...space === "oklab" || space === "oklch" ? { interpolate: space } : {}
   };
 }
 var PaintServerRegistry = class {
@@ -511,11 +596,14 @@ var PaintServerRegistry = class {
   counter = 0;
   // Marker keys referenced by any stroke, in first-use order. The `<defs>`
   // id is the marker key itself, not a minted counter id: `parseSvg` reads a
-  // `marker-end="url(#id)"` fragment back as the marker key directly (it
-  // never inspects the `<marker>` element), so a synthetic id would come
-  // back unresolvable and warn on round-trip.
+  // `marker-end="url(#id)"` fragment back as the marker key directly when the
+  // registry knows it, so a synthetic id would come back as a stranger.
   markerKeys = [];
   markerKeySet = /* @__PURE__ */ new Set();
+  // Clip paths, in first-use order. Identity, not value: two groups clipped by
+  // equal outlines get a def each, which costs bytes and misleads nobody.
+  clips = [];
+  clipIds = /* @__PURE__ */ new Map();
   register(paint) {
     const existing = this.byPaint.get(paint);
     if (existing) return existing;
@@ -524,6 +612,23 @@ var PaintServerRegistry = class {
     this.order.push(paint);
     return id;
   }
+  /**
+   * The `fill` / `stroke` attribute value referencing this paint server: a
+   * `url(#id)` reference, plus the fallback paint SVG's own grammar allows
+   * after one for any kind SVG cannot express. A renderer that cannot resolve
+   * the reference takes the fallback instead of dropping the fill, which is
+   * the difference between a flat shape and a vanished one.
+   */
+  ref(paint) {
+    const id = this.register(paint);
+    if (hasNativeSvgForm(paint)) return `url(#${id})`;
+    return `url(#${id}) ${paintFallback(paint)}`;
+  }
+  /** Whether any registered paint serializes outside SVG's own vocabulary, so
+   *  the root has to declare {@link WEASEL_NS}. */
+  usesPrivateNamespace() {
+    return this.order.some((paint) => !hasNativeSvgForm(paint) || usesInterpolateAttr(paint));
+  }
   /** The `<defs>` id for a marker key — the key itself, minting nothing.
    *  `undefined` when nothing is registered under `key`, so a caller emits no
    *  attribute at all rather than a `url(#…)` pointing at a def that will
@@ -536,9 +641,21 @@ var PaintServerRegistry = class {
     }
     return key;
   }
-  /** Emit `<defs>...</defs>` XML for every registered paint server and marker. */
+  /** Mint (or recall) the `<defs>` id for a clip outline. */
+  clipId(path) {
+    const existing = this.clipIds.get(path);
+    if (existing) return existing;
+    const id = `clip${this.clips.length}`;
+    this.clipIds.set(path, id);
+    this.clips.push(path);
+    return id;
+  }
+  /** Emit `<defs>...</defs>` XML for every registered paint server, marker
+   *  and clip path. */
   toDefsXml(onWarn) {
-    if (this.order.length === 0 && this.markerKeys.length === 0) return "";
+    if (this.order.length === 0 && this.markerKeys.length === 0 && this.clips.length === 0) {
+      return "";
+    }
     const parts = ["<defs>"];
     for (const paint of this.order) {
       parts.push(paintServerXml(this.byPaint.get(paint), paint, onWarn));
@@ -546,18 +663,33 @@ var PaintServerRegistry = class {
     for (const key of this.markerKeys) {
       const entry = getMarker(key);
       if (!entry) continue;
-      parts.push(entry.toSvg ? entry.toSvg(key, entry) : defaultMarkerXml(key, entry));
+      parts.push(entry.toSvg ? entry.toSvg(key, entry) : defaultMarkerXml(key, entry, onWarn));
+    }
+    for (const path of this.clips) {
+      parts.push(
+        `<clipPath id="${this.clipIds.get(path)}"><path d="${serializePathD(path)}"/></clipPath>`
+      );
     }
     parts.push("</defs>");
     return parts.join("");
   }
 };
-function defaultMarkerXml(id, entry) {
+function defaultMarkerXml(id, entry, onWarn) {
   const path = entry.path({ size: 1, stroke: { paint: { fill: "solid", color: "#000" } } });
   const d = serializePathD(path);
-  const fill = entry.fill === "none" ? "none" : "context-stroke";
-  const outline = entry.outline ? ` stroke="context-stroke" stroke-width="${entry.outline.width}" stroke-linecap="round" stroke-linejoin="round"` : "";
-  return `<marker id="${id}" markerUnits="strokeWidth" markerWidth="8" markerHeight="8" refX="0" refY="0" orient="auto" overflow="visible"><path d="${d}" fill="${fill}"${outline}/></marker>`;
+  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)}" stroke-linecap="round" stroke-linejoin="round"` : "";
+  const orient = typeof entry.orient === "number" ? trimNumber(entry.orient * 180 / Math.PI) : "auto-start-reverse";
+  return `<marker id="${id}" markerUnits="strokeWidth" markerWidth="8" markerHeight="8" refX="0" refY="0" orient="${orient}" overflow="visible"><path d="${d}" ${fill}${outline}/></marker>`;
+}
+function markerPaintAttrs(attr, paint, id, onWarn) {
+  if (paint === "none") return `${attr}="none"`;
+  if (paint === void 0 || paint === "line") return `${attr}="context-stroke"`;
+  if ("color" in paint && (paint.fill === void 0 || paint.fill === "solid")) {
+    return paint.opacity != null && paint.opacity !== 1 ? `${attr}="${paint.color}" ${attr}-opacity="${trimNumber(paint.opacity)}"` : `${attr}="${paint.color}"`;
+  }
+  onWarn?.(`marker "${id}" ${attr} is a paint server, which a <marker> def cannot reference here; written as the line's paint`);
+  return `${attr}="context-stroke"`;
 }
 function paintServerXml(id, paint, onWarn) {
   if (paint.fill === "pattern") return patternXml(id, paint, onWarn);
@@ -574,14 +706,25 @@ function gradientUnitsAttr(units) {
 function gradientXml(id, paint) {
   if (paint.fill === "linear-gradient") {
     const stops = paint.stops.map(stopXml).join("");
-    return `<linearGradient id="${id}" gradientUnits="${gradientUnitsAttr(paint.units)}" x1="${trimNumber(paint.from.x)}" y1="${trimNumber(paint.from.y)}" x2="${trimNumber(paint.to.x)}" y2="${trimNumber(paint.to.y)}">${stops}</linearGradient>`;
+    return `<linearGradient id="${id}" gradientUnits="${gradientUnitsAttr(paint.units)}" x1="${trimNumber(paint.from.x)}" y1="${trimNumber(paint.from.y)}" x2="${trimNumber(paint.to.x)}" y2="${trimNumber(paint.to.y)}"${interpolateAttr(paint.interpolate)}>${stops}</linearGradient>`;
+  }
+  if (paint.fill === "conic-gradient") {
+    const stops = paint.stops.map(stopXml).join("");
+    const P = WEASEL_NS_PREFIX;
+    return `<${P}:conicGradient id="${id}" gradientUnits="${gradientUnitsAttr(paint.units)}" cx="${trimNumber(paint.center.x)}" cy="${trimNumber(paint.center.y)}" angle="${trimNumber(paint.angle)}"${interpolateAttr(paint.interpolate)}>${stops}</${P}:conicGradient>`;
   }
   if (paint.fill === "radial-gradient") {
     const stops = paint.stops.map(stopXml).join("");
-    return `<radialGradient id="${id}" gradientUnits="${gradientUnitsAttr(paint.units)}" cx="${trimNumber(paint.center.x)}" cy="${trimNumber(paint.center.y)}" r="${trimNumber(paint.radius)}">${stops}</radialGradient>`;
+    return `<radialGradient id="${id}" gradientUnits="${gradientUnitsAttr(paint.units)}" cx="${trimNumber(paint.center.x)}" cy="${trimNumber(paint.center.y)}" r="${trimNumber(paint.radius)}"${interpolateAttr(paint.interpolate)}>${stops}</radialGradient>`;
   }
   return "";
 }
+function paintFallback(paint) {
+  const color = getPaintKind(paint.fill)?.colorOf(paint);
+  if (!color) return "none";
+  const packed = /^#([0-9a-f]{6})[0-9a-f]{2}$/i.exec(color);
+  return packed ? `#${packed[1].toLowerCase()}` : color;
+}
 function stopXml(s) {
   const m = /^#([0-9a-f]{6})([0-9a-f]{2})$/i.exec(s.color);
   if (m) {
@@ -661,6 +804,7 @@ var IGNORED_TAGS = /* @__PURE__ */ new Set([
   "radialgradient",
   "pattern",
   "marker",
+  "clippath",
   "title",
   "desc",
   "metadata"
@@ -693,8 +837,11 @@ function parseSvg(svg, opts = {}) {
   const gradients = collectGradients(root, onWarn);
   for (const [id, paint] of collectPatterns(root, onWarn)) gradients.set(id, paint);
   const rootStyle = deriveStyle(EMPTY_STYLE, root);
-  const nodes = parseChildren(root, IDENTITY_MATRIX, rootStyle, gradients, onWarn, uriToPrefix);
+  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;
@@ -796,13 +943,53 @@ function collectElementMeta(el, uriToPrefix) {
   }
   return Object.keys(meta).length > 0 ? meta : void 0;
 }
-function parseChildren(parent, ctm, style, gradients, onWarn, uriToPrefix) {
+function collectClipPaths(root, onWarn) {
+  const out = /* @__PURE__ */ new Map();
+  for (const [id, el] of collectElementsByTag(root, /* @__PURE__ */ new Set(["clippath"]))) {
+    const units = el.getAttribute("clipPathUnits");
+    if (units && units !== "userSpaceOnUse") {
+      onWarn(`<clipPath id="${id}"> uses clipPathUnits="${units}", which is not modeled`);
+      continue;
+    }
+    const shapes = [];
+    for (let i = 0; i < el.children.length; i++) {
+      if (SUPPORTED_LEAF_TAGS.has(el.children[i].tagName.toLowerCase())) shapes.push(el.children[i]);
+    }
+    if (shapes.length !== 1) {
+      onWarn(
+        `<clipPath id="${id}"> holds ${shapes.length} shapes the kit can lower; only a single-shape clip is modeled, so it clips nothing`
+      );
+      continue;
+    }
+    const shape = shapes[0];
+    const local = parseTransform(shape.getAttribute("transform"), onWarn);
+    const path = lowerLeaf(shape, shape.tagName.toLowerCase(), local, onWarn);
+    if (path) out.set(id, path);
+  }
+  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());
+  if (!ref) {
+    onWarn(`clip-path="${attr}" is not a url(#id) reference; the clip is dropped`);
+    return void 0;
+  }
+  const path = clips.get(ref[1]);
+  if (!path) {
+    onWarn(`clip-path references #${ref[1]}, 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, onWarn, uriToPrefix);
+    const node = parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix);
     if (node) {
       if (Array.isArray(node)) out.push(...node);
       else out.push(node);
@@ -810,16 +997,26 @@ function parseChildren(parent, ctm, style, gradients, onWarn, uriToPrefix) {
   }
   return out;
 }
-function parseElement(el, ctm, style, gradients, onWarn, uriToPrefix) {
+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, onWarn, uriToPrefix);
+    const children = parseChildren(el, childCtm, childStyle, gradients, clips, onWarn, uriToPrefix);
     const opacity2 = readOpacityAttr(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;
@@ -833,7 +1030,7 @@ function parseElement(el, ctm, style, gradients, onWarn, uriToPrefix) {
     if (el.hasAttribute("viewBox")) {
       onWarn("nested <svg> viewBox is not modeled; its children are not rescaled");
     }
-    return parseChildren(el, multiply(ctm, offset), childStyle, gradients, onWarn, uriToPrefix);
+    return parseChildren(el, multiply(ctm, offset), childStyle, gradients, clips, onWarn, uriToPrefix);
   }
   if (tag === "text") {
     const textNode = parseTextElement(el, ctm, style, gradients, onWarn);
@@ -978,6 +1175,12 @@ function readPaint(style, attr, defaultColor, gradients, onWarn) {
   if (parsed.kind === "ref") {
     const paint = gradients.get(parsed.id);
     if (!paint) {
+      if (parsed.fallback) {
+        const flat = { kind: "solid", color: parsed.fallback.color };
+        const a2 = opacity ?? (parsed.fallback.alpha < 1 ? parsed.fallback.alpha : void 0);
+        if (a2 != null) flat.opacity = a2;
+        return flat;
+      }
       onWarn(`${attr} references unknown gradient #${parsed.id}`);
       return { kind: "solid", color: defaultColor };
     }
@@ -1034,12 +1237,7 @@ function readStroke(style, gradients, onWarn, nonScaling = false) {
     ["marker-end", "markerEnd"]
   ]) {
     const id = parseMarkerRef(style[attr] ?? null);
-    if (id === void 0) continue;
-    if (getMarker(id) === void 0) {
-      onWarn(`${attr} references a marker this kit has no entry for: #${id}`);
-      continue;
-    }
-    stroke[field] = id;
+    if (id !== void 0) stroke[field] = id;
   }
   return stroke;
 }
@@ -1155,20 +1353,30 @@ function parseRunFontSize(raw, onWarn) {
 }
 var XLINK_NS2 = "http://www.w3.org/1999/xlink";
 function parseImageElement(el, ctm, onWarn) {
-  const href = el.getAttribute("href") ?? el.getAttributeNS(XLINK_NS2, "href") ?? el.getAttribute("xlink:href");
+  const href = imageHref(el);
   if (!href) {
     onWarn("<image> without href; dropped");
     return null;
   }
+  const node = imageNodeAt(el, el, href, ctm, onWarn);
+  if (el.hasAttribute("preserveAspectRatio") && el.getAttribute("preserveAspectRatio") !== "none") {
+    onWarn("<image> preserveAspectRatio is not modeled; the box is taken literally");
+  }
+  return node;
+}
+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(el.getAttribute("x"), 0);
-  const rawY = num2(el.getAttribute("y"), 0);
-  const rawW = num2(el.getAttribute("width"), 0);
-  const rawH = num2(el.getAttribute("height"), 0);
+  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);
@@ -1180,9 +1388,9 @@ function parseImageElement(el, ctm, onWarn) {
     width: Math.abs(x1 - x0),
     height: Math.abs(y1 - y0)
   };
-  const opacity = readOpacityAttr(el, "opacity");
+  const opacity = readOpacityAttr(ownerEl, "opacity");
   if (opacity != null) node.opacity = opacity;
-  const localTransform = parseTransform(el.getAttribute("transform"), onWarn);
+  const localTransform = parseTransform(ownerEl.getAttribute("transform"), onWarn);
   if (!isIdentity(localTransform)) {
     const worldLocal = rebaseTransform(ctm, localTransform);
     const cx = node.x + node.width / 2;
@@ -1199,9 +1407,21 @@ function parseImageElement(el, ctm, onWarn) {
       }
     }
   }
-  if (el.hasAttribute("preserveAspectRatio") && el.getAttribute("preserveAspectRatio") !== "none") {
-    onWarn("<image> preserveAspectRatio is not modeled; the box is taken literally");
-  }
+  return node;
+}
+function parseCroppedImage(g, ctm, onWarn) {
+  const viewport = [...g.children].find((c) => c.tagName.toLowerCase() === "svg");
+  const img = viewport && [...viewport.children].find((c) => c.tagName.toLowerCase() === "image");
+  const href = img && imageHref(img);
+  const source = viewport && parseViewBoxAttr(viewport.getAttribute("viewBox"));
+  if (!img || !href || !source) return null;
+  const node = imageNodeAt(viewport, g, href, ctm, onWarn);
+  if (source.x !== 0 || source.y !== 0 || source.width !== 1 || source.height !== 1) {
+    node.source = source;
+  }
+  const flip = parseTransform(img.getAttribute("transform"), onWarn);
+  if (flip[0] < 0) node.flipX = true;
+  if (flip[3] < 0) node.flipY = true;
   return node;
 }
 var XML_NS = "http://www.w3.org/XML/1998/namespace";
@@ -1268,7 +1488,7 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   const leafStyle = deriveStyle(style, el);
   const textStyle = readTextStyle(leafStyle, onWarn);
   const textPaint = readTextPaint(leafStyle, gradients, onWarn, isNonScalingStroke(el));
-  const fontSize = textStyle.fontSize ?? 16;
+  const fontSize = resolveScreenLength(textStyle.fontSize ?? 16, 1);
   const lineHeight = textStyle.lineHeight ?? 1.2;
   const dominantBaseline = el.getAttribute("dominant-baseline");
   const explicitTopAnchor = dominantBaseline === "text-before-edge" || dominantBaseline === "hanging";
@@ -1315,6 +1535,8 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   );
   if (hasStyling) node.runs = runs;
   if (el.getAttribute("data-weasel-wrap") === "true") textStyle.wrap = true;
+  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;
@@ -1376,6 +1598,7 @@ function readTspanRun(el, gradients, style, onWarn) {
     } else if (parsed?.kind === "ref") {
       const paint = gradients.get(parsed.id);
       if (paint) run.fill = paint;
+      else if (parsed.fallback) run.fill = { fill: "solid", color: parsed.fallback.color };
     }
   }
   const stroke = coreStroke(readStroke(ownStrokeStyle(el), gradients, onWarn, isNonScalingStroke(el)));
@@ -1425,6 +1648,9 @@ function readTextPaint(style, gradients, onWarn, nonScalingStroke = false) {
     } else if (parsed?.kind === "ref") {
       const paint = gradients.get(parsed.id);
       if (paint) out.fill = paint;
+      else if (parsed.fallback) {
+        out.fill = { fill: "solid", color: parsed.fallback.color };
+      }
     } else if (parsed?.kind === "none") {
       out.fill = null;
     }
@@ -1433,6 +1659,196 @@ function readTextPaint(style, gradients, onWarn, nonScalingStroke = false) {
   if (stroke) out.stroke = stroke;
   return out;
 }
+var MARKER_FIELDS = [
+  ["markerStart", "start", "marker-start"],
+  ["markerMid", "mid", "marker-mid"],
+  ["markerEnd", "end", "marker-end"]
+];
+function ingestMarkers(root, nodes, gradients, onWarn) {
+  const defs = /* @__PURE__ */ new Map();
+  const all = root.getElementsByTagName("marker");
+  for (let i = 0; i < all.length; i++) {
+    const id = all[i].getAttribute("id");
+    if (id && !defs.has(id)) defs.set(id, all[i]);
+  }
+  const minted = /* @__PURE__ */ new Map();
+  const resolve = (stroke, width) => {
+    const w = width === void 0 ? 1 : typeof width === "number" ? width : width.px;
+    for (const [field, role, attr] of MARKER_FIELDS) {
+      const id = stroke[field];
+      if (typeof id !== "string" || getMarker(id) !== void 0) continue;
+      const el = defs.get(id);
+      if (!el) {
+        onWarn(`${attr} references #${id}, which is neither a kit marker nor defined in the document`);
+        delete stroke[field];
+        continue;
+      }
+      const cacheKey = `${id}\0${role}\0${w}`;
+      if (!minted.has(cacheKey)) minted.set(cacheKey, markerEntryFrom(el, id, role, w, gradients, onWarn));
+      const entry = minted.get(cacheKey);
+      if (entry) stroke[field] = entry.id;
+      else delete stroke[field];
+    }
+  };
+  const visit = (n) => {
+    if (n.kind === "group") n.children.forEach(visit);
+    else if (n.kind === "path" && n.stroke) resolve(n.stroke, n.stroke.width);
+    else if (n.kind === "text") {
+      if (n.stroke) resolve(n.stroke, n.stroke.width);
+      for (const run of n.runs ?? []) {
+        if (run.stroke) resolve(run.stroke, run.stroke.width ?? n.stroke?.width);
+      }
+    }
+  };
+  nodes.forEach(visit);
+  const out = /* @__PURE__ */ new Map();
+  for (const entry of minted.values()) if (entry) out.set(entry.id, entry);
+  return [...out.values()];
+}
+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);
+}
+function markerRef(raw, lo, span) {
+  const v = raw?.trim();
+  if (v === "left" || v === "top") return lo;
+  if (v === "center") return lo + span / 2;
+  if (v === "right" || v === "bottom") return lo + span;
+  const n = v ? parseFloat(v) : 0;
+  return Number.isFinite(n) ? n : 0;
+}
+function markerOrient(raw) {
+  const v = raw?.trim() ?? "";
+  if (v === "auto") return { orient: "auto", reverseAtStart: true };
+  if (v === "auto-start-reverse") return { orient: "auto", reverseAtStart: false };
+  const m = /^(-?[\d.]+(?:e-?\d+)?)(deg|rad|grad|turn)?$/i.exec(v);
+  if (!m) return { orient: 0, reverseAtStart: false };
+  const n = parseFloat(m[1]);
+  const unit = (m[2] ?? "deg").toLowerCase();
+  const rad = unit === "rad" ? n : unit === "grad" ? n * Math.PI / 200 : unit === "turn" ? n * 2 * Math.PI : n * Math.PI / 180;
+  return { orient: rad, reverseAtStart: false };
+}
+function markerPaint(style, attr, gradients, onWarn) {
+  const raw = style[attr]?.trim();
+  if (raw === "context-stroke") return "line";
+  if (raw === "context-fill") {
+    onWarn(`a marker's ${attr}="context-fill" is read as the line's stroke paint`);
+    return "line";
+  }
+  const paint = readPaint(style, attr, "#000000", gradients, onWarn);
+  if (paint.kind === "none") return "none";
+  if (paint.kind === "gradient") return paint.paint;
+  return paint.opacity != null ? { ...solid(paint.color), opacity: paint.opacity } : solid(paint.color);
+}
+function asPolygon(path) {
+  if (path.kind === "polygon") return path;
+  const { x, y, width: w, height: h } = path;
+  return {
+    kind: "polygon",
+    commands: new Uint8Array([PATH_M, PATH_L, PATH_L, PATH_L, PATH_Z]),
+    coords: new Float32Array([x, y, x + w, y, x + w, y + h, x, y + h]),
+    fillRule: "nonzero"
+  };
+}
+function shortHash(s) {
+  let h = 2166136261;
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return (h >>> 0).toString(36);
+}
+function markerEntryFrom(el, id, role, strokeWidth, gradients, onWarn) {
+  const num2 = (name, fallback) => {
+    const n = parseFloat(el.getAttribute(name) ?? "");
+    return Number.isFinite(n) ? n : fallback;
+  };
+  const vb = parseViewBoxAttr(el.getAttribute("viewBox"));
+  let sx = 1, sy = 1;
+  if (vb && vb.width > 0 && vb.height > 0) {
+    sx = num2("markerWidth", 3) / vb.width;
+    sy = num2("markerHeight", 3) / vb.height;
+    const par = el.getAttribute("preserveAspectRatio")?.trim() ?? "";
+    if (!par.startsWith("none")) {
+      const s = par.endsWith("slice") ? Math.max(sx, sy) : Math.min(sx, sy);
+      sx = s;
+      sy = s;
+    }
+  }
+  const refX = markerRef(el.getAttribute("refX"), vb?.x ?? 0, vb?.width ?? 0);
+  const refY = markerRef(el.getAttribute("refY"), vb?.y ?? 0, vb?.height ?? 0);
+  const k = el.getAttribute("markerUnits") === "userSpaceOnUse" && strokeWidth > 0 ? 1 / strokeWidth : 1;
+  const { orient, reverseAtStart } = markerOrient(el.getAttribute("orient"));
+  const turn = role === "start" && reverseAtStart ? -1 : 1;
+  const base = [turn * sx * k, 0, 0, turn * sy * k, -turn * sx * k * refX, -turn * sy * k * refY];
+  const parts = [];
+  const collect = (parent, m, style) => {
+    for (let i = 0; i < parent.children.length; i++) {
+      const child = parent.children[i];
+      const tag = child.tagName.toLowerCase();
+      const cm = multiply(m, parseTransform(child.getAttribute("transform"), onWarn));
+      const cs = deriveStyle(style, child);
+      if (tag === "g") collect(child, cm, cs);
+      else if (SUPPORTED_LEAF_TAGS.has(tag)) {
+        const path = lowerLeaf(child, tag, cm, onWarn);
+        if (path) parts.push({ path: asPolygon(path), style: cs });
+      } else if (!IGNORED_TAGS.has(tag)) {
+        onWarn(`<marker id="${id}"> child <${child.tagName}> is not supported; skipped`);
+      }
+    }
+  };
+  collect(el, base, styleAt(el));
+  if (parts.length === 0) {
+    onWarn(`<marker id="${id}"> draws nothing this kit can read; dropped`);
+    return null;
+  }
+  const first = parts[0].style;
+  const fill = markerPaint(first, "fill", gradients, onWarn);
+  const outlinePaint = markerPaint(first, "stroke", gradients, onWarn);
+  const outlineWidth = parseFloat(first["stroke-width"] ?? "1") * Math.sqrt(sx * sy) * k;
+  const outline = outlinePaint !== "none" && outlineWidth > 0 ? { width: outlineWidth, paint: outlinePaint } : false;
+  if (parts.some((p) => JSON.stringify(p.style) !== JSON.stringify(first))) {
+    onWarn(`<marker id="${id}"> paints its parts differently; all take the first part's paint`);
+  }
+  let commandCount = 0, coordCount = 0;
+  for (const p of parts) {
+    commandCount += p.path.commands.length;
+    coordCount += p.path.coords.length;
+  }
+  const commands = new Uint8Array(commandCount);
+  const coords = new Float32Array(coordCount);
+  let ci = 0, pi = 0;
+  for (const p of parts) {
+    commands.set(p.path.commands, ci);
+    ci += p.path.commands.length;
+    coords.set(p.path.coords, pi);
+    pi += p.path.coords.length;
+  }
+  const fillRule = parts[0].path.fillRule ?? "nonzero";
+  const round = (v) => Math.round(v * 1e4) / 1e4 + 0;
+  const hash = shortHash(JSON.stringify([
+    Array.from(commands),
+    Array.from(coords, round),
+    fillRule,
+    fill,
+    outline,
+    typeof orient === "number" ? round(orient) : orient
+  ]));
+  const key = id.endsWith(`-${hash}`) ? id : `${id}-${hash}`;
+  return {
+    id: key,
+    path: ({ size }) => {
+      const scaled = new Float32Array(coords.length);
+      for (let i = 0; i < coords.length; i++) scaled[i] = coords[i] * size;
+      return { kind: "polygon", commands, coords: scaled, fillRule };
+    },
+    fill,
+    outline,
+    orient,
+    inset: 0
+  };
+}
 function serializeSvg(nodes, opts = {}) {
   const registry = new PaintServerRegistry();
   registerPaintServers(nodes, registry);
@@ -1440,6 +1856,9 @@ function serializeSvg(nodes, opts = {}) {
   const vb = `${trimNumber(bounds.x)} ${trimNumber(bounds.y)} ${trimNumber(bounds.width)} ${trimNumber(bounds.height)}`;
   const namespaces = opts.namespaces ?? {};
   const rootAttrs = [`xmlns="http://www.w3.org/2000/svg"`];
+  if (registry.usesPrivateNamespace() && namespaces[WEASEL_NS_PREFIX] == null) {
+    rootAttrs.push(`xmlns:${WEASEL_NS_PREFIX}="${WEASEL_NS}"`);
+  }
   for (const [prefix, uri] of Object.entries(namespaces)) {
     rootAttrs.push(`xmlns:${prefix}="${escapeAttr2(uri)}"`);
   }
@@ -1460,22 +1879,28 @@ function serializeSvg(nodes, opts = {}) {
     for (const prefix of Object.keys(namespaces)) {
       const bucket = opts.documentMeta[prefix];
       if (!bucket?.elements) continue;
-      for (const [localName, list] of Object.entries(bucket.elements)) {
-        for (const el of list) docMetaXml += namespacedElementXml(prefix, localName, el);
+      for (const [localName2, list] of Object.entries(bucket.elements)) {
+        for (const el of list) docMetaXml += namespacedElementXml(prefix, localName2, el);
       }
     }
   }
   const defsXml = registry.toDefsXml(opts.onWarn);
-  const bodyXml = nodes.map((n) => nodeXml(n, registry, namespaces)).join("");
+  const said = /* @__PURE__ */ new Set();
+  const warn = (m) => {
+    if (!opts.onWarn || said.has(m)) return;
+    said.add(m);
+    opts.onWarn(m);
+  };
+  const bodyXml = nodes.map((n) => nodeXml(n, registry, namespaces, warn)).join("");
   const titleXml = opts.title && opts.title.length > 0 ? `<title>${escapeText(opts.title)}</title>` : "";
   return `<svg ${rootAttrs.join(" ")}>${titleXml}${defsXml}${docMetaXml}${bodyXml}</svg>`;
 }
-function namespacedElementXml(prefix, localName, el) {
+function namespacedElementXml(prefix, localName2, el) {
   const attrs = [];
   for (const [name, value] of Object.entries(el.attrs)) {
     attrs.push(`${name}="${escapeAttr2(value)}"`);
   }
-  const head = attrs.length > 0 ? `<${prefix}:${localName} ${attrs.join(" ")}>` : `<${prefix}:${localName}>`;
+  const head = attrs.length > 0 ? `<${prefix}:${localName2} ${attrs.join(" ")}>` : `<${prefix}:${localName2}>`;
   let body = "";
   if (el.children) {
     for (const [childName, list] of Object.entries(el.children)) {
@@ -1484,7 +1909,7 @@ function namespacedElementXml(prefix, localName, el) {
   } else if (el.text != null) {
     body = escapeText(el.text);
   }
-  return `${head}${body}</${prefix}:${localName}>`;
+  return `${head}${body}</${prefix}:${localName2}>`;
 }
 function metaAttrsXml(meta, namespaces) {
   if (!meta) return "";
@@ -1504,8 +1929,8 @@ function metaElementsXml(meta, namespaces) {
   for (const prefix of Object.keys(namespaces)) {
     const bucket = meta[prefix];
     if (!bucket?.elements) continue;
-    for (const [localName, list] of Object.entries(bucket.elements)) {
-      for (const el of list) out += namespacedElementXml(prefix, localName, el);
+    for (const [localName2, list] of Object.entries(bucket.elements)) {
+      for (const el of list) out += namespacedElementXml(prefix, localName2, el);
     }
   }
   return out;
@@ -1513,6 +1938,7 @@ function metaElementsXml(meta, namespaces) {
 function registerPaintServers(nodes, registry) {
   for (const n of nodes) {
     if (n.kind === "group") {
+      if (n.clip) registry.clipId(n.clip);
       registerPaintServers(n.children, registry);
     } else if (n.kind === "path") {
       if (n.fill.kind === "gradient") registry.register(n.fill.paint);
@@ -1544,50 +1970,61 @@ function registerMarkers(stroke, registry) {
     if (key) registry.markerId(key);
   }
 }
-function nodeXml(node, registry, namespaces) {
-  if (node.kind === "group") return groupXml(node, registry, namespaces);
-  if (node.kind === "text") return textXml(node, registry, namespaces);
+function nodeXml(node, registry, namespaces, warn) {
+  if (node.kind === "group") return groupXml(node, registry, namespaces, warn);
+  if (node.kind === "text") return textXml(node, registry, namespaces, warn);
   if (node.kind === "image") return imageXml(node, namespaces);
-  return pathXml(node, registry, namespaces);
+  return pathXml(node, registry, namespaces, warn);
+}
+function warnStrokeAlign(align, warn) {
+  if (align && align !== "center") {
+    warn(`a stroke aligned "${align}" of its edge is written centered: SVG has no stroke alignment`);
+  }
 }
 function imageXml(node, namespaces) {
-  const attrs = [
-    `href="${escapeAttr2(node.href)}"`,
-    `x="${trimNumber(node.x)}"`,
-    `y="${trimNumber(node.y)}"`,
-    `width="${trimNumber(node.width)}"`,
-    `height="${trimNumber(node.height)}"`,
-    `preserveAspectRatio="none"`
-  ];
+  const box = `x="${trimNumber(node.x)}" y="${trimNumber(node.y)}" width="${trimNumber(node.width)}" height="${trimNumber(node.height)}"`;
+  const outer = [];
   if (node.opacity != null && node.opacity !== 1) {
-    attrs.push(`opacity="${trimNumber(node.opacity)}"`);
+    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;
-    attrs.push(`transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`);
+    outer.push(`transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`);
   }
   const metaAttrs = metaAttrsXml(node.meta, namespaces);
   const metaEls = metaElementsXml(node.meta, namespaces);
-  if (metaEls) return `<image ${attrs.join(" ")}${metaAttrs}>${metaEls}</image>`;
-  return `<image ${attrs.join(" ")}${metaAttrs}/>`;
-}
-function groupXml(node, registry, namespaces) {
+  const href = `href="${escapeAttr2(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>`;
+    return `<image ${attrs}${metaAttrs}/>`;
+  }
+  const src = node.source ?? { x: 0, y: 0, width: 1, height: 1 };
+  const viewBox = [src.x, src.y, src.width, src.height].map(trimNumber).join(" ");
+  const flip = node.flipX || node.flipY ? ` transform="matrix(${node.flipX ? -1 : 1} 0 0 ${node.flipY ? -1 : 1} ${trimNumber(node.flipX ? 2 * src.x + src.width : 0)} ${trimNumber(node.flipY ? 2 * src.y + src.height : 0)})"` : "";
+  const head = ['<g data-weasel-image="true"', ...outer].join(" ");
+  return `${head}${metaAttrs}><svg ${box} viewBox="${viewBox}" preserveAspectRatio="none"><image ${href} x="0" y="0" width="1" height="1" preserveAspectRatio="none"${flip}/></svg>${metaEls}</g>`;
+}
+function groupXml(node, registry, namespaces, warn) {
   const attrs = [];
   if (node.transform) {
     const m = formatMatrix(node.transform);
     if (m) attrs.push(`transform="${m}"`);
   }
+  if (node.clip) {
+    attrs.push(`clip-path="url(#${registry.clipId(node.clip)})"`);
+  }
   if (node.opacity != null && node.opacity !== 1) {
     attrs.push(`opacity="${trimNumber(node.opacity)}"`);
   }
   const metaAttrs = metaAttrsXml(node.meta, namespaces);
   const head = attrs.length > 0 ? `<g ${attrs.join(" ")}${metaAttrs}>` : `<g${metaAttrs}>`;
-  const body = node.children.map((c) => nodeXml(c, registry, namespaces)).join("");
+  const body = node.children.map((c) => nodeXml(c, registry, namespaces, warn)).join("");
   return `${head}${body}${metaElementsXml(node.meta, namespaces)}</g>`;
 }
-function pathXml(node, registry, namespaces) {
+function pathXml(node, registry, namespaces, warn) {
   const attrs = [`d="${serializePathD(node.path)}"`];
   const fillAttrs = paintAttrs(node.fill, "fill", registry);
   for (const a of fillAttrs) attrs.push(a);
@@ -1595,7 +2032,7 @@ function pathXml(node, registry, namespaces) {
     attrs.push(`fill-rule="evenodd"`);
   }
   if (node.stroke) {
-    const strokeAttrs = strokeAttrsFor(node.stroke, registry);
+    const strokeAttrs = strokeAttrsFor(node.stroke, registry, warn);
     for (const a of strokeAttrs) attrs.push(a);
   } else {
     attrs.push('stroke="none"');
@@ -1626,18 +2063,18 @@ function paintAttrs(paint, name, registry, includeOpacity = true) {
     }
     return out;
   }
-  const id = registry.register(paint.paint);
-  return [`${name}="url(#${id})"`];
+  return [`${name}="${registry.ref(paint.paint)}"`];
 }
 function strokeWidthAttrs(width) {
   if (typeof width === "number") return [`stroke-width="${trimNumber(width)}"`];
   return [`stroke-width="${trimNumber(width.px)}"`, 'vector-effect="non-scaling-stroke"'];
 }
-function coreStrokeAttrs(stroke, registry) {
+function coreStrokeAttrs(stroke, registry, warn) {
   const paint = stroke?.paint;
   if (!stroke || !paint) return [];
   const width = stroke.width ?? 1;
   if (!((typeof width === "object" ? width.px : width) > 0)) return [];
+  warnStrokeAlign(stroke.align, warn);
   const attrs = [];
   if ("color" in paint) {
     attrs.push(`stroke="${paint.color}"`);
@@ -1645,7 +2082,7 @@ function coreStrokeAttrs(stroke, registry) {
       attrs.push(`stroke-opacity="${trimNumber(paint.opacity)}"`);
     }
   } else {
-    attrs.push(`stroke="url(#${registry.register(paint)})"`);
+    attrs.push(`stroke="${registry.ref(paint)}"`);
   }
   attrs.push(...strokeWidthAttrs(width));
   if (stroke.cap) attrs.push(`stroke-linecap="${stroke.cap}"`);
@@ -1668,7 +2105,8 @@ function coreStrokeAttrs(stroke, registry) {
   }
   return attrs;
 }
-function strokeAttrsFor(stroke, registry) {
+function strokeAttrsFor(stroke, registry, warn) {
+  warnStrokeAlign(stroke.align, warn);
   const attrs = paintAttrs(stroke.paint, "stroke", registry, false);
   attrs.push(...strokeWidthAttrs(stroke.width));
   const opacity = stroke.opacity ?? (stroke.paint.kind === "solid" ? stroke.paint.opacity : void 0);
@@ -1735,7 +2173,7 @@ function rotateAboutCenter(ctm, b, angle) {
   const s = Math.sin(angle);
   return multiply(ctm, [c, s, -s, c, cx - cx * c + cy * s, cy - cx * s - cy * c]);
 }
-function textXml(node, registry, namespaces) {
+function textXml(node, registry, namespaces, warn) {
   const attrs = [
     `x="${trimNumber(node.x + anchorOffset(node.style, node.width))}"`,
     `y="${trimNumber(node.y)}"`,
@@ -1747,7 +2185,7 @@ function textXml(node, registry, namespaces) {
     `data-weasel-height="${trimNumber(node.height)}"`
   ];
   const style = node.style;
-  if (style?.fontSize != null) attrs.push(`font-size="${trimNumber(style.fontSize)}"`);
+  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?.fontStyle && style.fontStyle !== "normal") attrs.push(`font-style="${style.fontStyle}"`);
@@ -1759,11 +2197,18 @@ function textXml(node, registry, namespaces) {
     if (anchor !== "start") attrs.push(`text-anchor="${anchor}"`);
   }
   if (style?.letterSpacing != null && style.letterSpacing !== 0) {
-    attrs.push(`letter-spacing="${trimNumber(style.letterSpacing)}"`);
+    attrs.push(`letter-spacing="${trimNumber(resolveScreenLength(style.letterSpacing, 1))}"`);
   }
   const decoration = textDecorationValue(style?.underline, style?.strikethrough, style?.overline);
   if (decoration) attrs.push(`text-decoration="${decoration}"`);
-  if (style?.wrap) attrs.push('data-weasel-wrap="true"');
+  if (style?.wrap) {
+    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 (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)`);
+  }
   if (node.fill === null) {
     attrs.push('fill="none"');
   } else if (node.fill) {
@@ -1773,11 +2218,10 @@ function textXml(node, registry, namespaces) {
         attrs.push(`fill-opacity="${trimNumber(node.fill.opacity)}"`);
       }
     } else {
-      const id = registry.register(node.fill);
-      attrs.push(`fill="url(#${id})"`);
+      attrs.push(`fill="${registry.ref(node.fill)}"`);
     }
   }
-  for (const a of coreStrokeAttrs(node.stroke, registry)) attrs.push(a);
+  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)}"`);
   }
@@ -1787,19 +2231,19 @@ function textXml(node, registry, namespaces) {
     const deg = node.rotation * 180 / Math.PI;
     attrs.push(`transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`);
   }
-  const body = node.runs && node.runs.length > 0 ? node.runs.map((r) => runXml(r, registry)).join("") : escapeText(node.text);
+  const body = node.runs && node.runs.length > 0 ? node.runs.map((r) => runXml(r, registry, warn)).join("") : escapeText(node.text);
   const metaAttrs = metaAttrsXml(node.meta, namespaces);
   const metaEls = metaElementsXml(node.meta, namespaces);
   return `<text ${attrs.join(" ")}${metaAttrs}>${body}${metaEls}</text>`;
 }
-function runXml(run, registry) {
+function runXml(run, registry, warn) {
   const attrs = [];
   if (run.bold) attrs.push(`font-weight="700"`);
   if (run.italic) attrs.push(`font-style="italic"`);
   if (run.fontFamily) attrs.push(`font-family="${escapeAttr2(run.fontFamily)}"`);
   const presetScale = run.script != null && run.baselineShift != null ? SCRIPT_METRICS[run.script].size : void 0;
   const scale = run.fontScale ?? presetScale;
-  if (run.fontSize != null) attrs.push(`font-size="${trimNumber(run.fontSize)}"`);
+  if (run.fontSize != null) attrs.push(`font-size="${trimNumber(resolveScreenLength(run.fontSize, 1))}"`);
   else if (scale != null) attrs.push(`font-size="${trimNumber(scale * 100)}%"`);
   if (run.baselineShift != null) {
     attrs.push(`baseline-shift="${trimNumber(run.baselineShift * 100)}%"`);
@@ -1807,7 +2251,7 @@ function runXml(run, registry) {
     attrs.push(`baseline-shift="${run.script}"`);
   }
   if (run.letterSpacing != null) {
-    attrs.push(`letter-spacing="${trimNumber(run.letterSpacing)}"`);
+    attrs.push(`letter-spacing="${trimNumber(resolveScreenLength(run.letterSpacing, 1))}"`);
   }
   const runDecoration = textDecorationValue(run.underline, run.strikethrough, run.overline);
   if (runDecoration) attrs.push(`text-decoration="${runDecoration}"`);
@@ -1815,11 +2259,10 @@ function runXml(run, registry) {
     if ("color" in run.fill) {
       attrs.push(`fill="${run.fill.color}"`);
     } else {
-      const id = registry.register(run.fill);
-      attrs.push(`fill="url(#${id})"`);
+      attrs.push(`fill="${registry.ref(run.fill)}"`);
     }
   }
-  for (const a of coreStrokeAttrs(run.stroke, registry)) attrs.push(a);
+  for (const a of coreStrokeAttrs(run.stroke, registry, warn)) attrs.push(a);
   const head = attrs.length > 0 ? `<tspan ${attrs.join(" ")}>` : "<tspan>";
   return `${head}${escapeText(run.text)}</tspan>`;
 }
@@ -1946,6 +2389,7 @@ function svgNodesToKitDrafts(nodes, nextId) {
         data: {
           text: n.text,
           ...n.style ? { style: n.style } : {},
+          ...n.verticalAlign ? { verticalAlign: n.verticalAlign } : {},
           ...n.runs ? { runs: n.runs.map((r) => runInBoxFrame(r, box)) } : {},
           // `!== undefined`, not a truthiness test: `null` is the document
           // saying `fill="none"`, and absent takes the painter's default.
@@ -1996,13 +2440,14 @@ function svgNodesToKitDrafts(nodes, nextId) {
 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: r.fontSize * scale } : r)
+      runs: runs.map((r) => r.fontSize !== void 0 ? { ...r, fontSize: scaleSize(r.fontSize) } : r)
     } : {},
-    style: { ...style, fontSize: resolveTextStyle(style).fontSize * scale }
+    style: { ...style, fontSize: scaleSize(style.fontSize ?? resolveTextStyle(style).fontSize) }
   };
 }
 function unionRect(a, b) {
@@ -2020,6 +2465,7 @@ 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);
+      for (const m of parsed.markers ?? []) if (getMarker(m.id) === void 0) registerMarker(m);
       let drafts = svgNodesToKitDrafts(parsed.nodes, freshSvgNodeId);
       if (drafts.length === 0) {
         console.warn(`weasel ingest: svg "${file.name}" parsed to no drawable nodes`);