@jasy/pdf 1.0.0-alpha.9 → 1.0.0-beta.2

package/dist/svg/index.js

@@ -0,0 +1,331 @@
+import { parseXml } from "./xml.js";
+import { SvgParseError, SvgUnsupportedError } from "./errors.js";
+import { IDENTITY, isIdentity, multiply, parseTransform } from "./transform.js";
+import { shapeOf } from "./shapes.js";
+import { transformCommands } from "../vector/path.js";
+import { declarationsFor, parseStylesheet } from "./css.js";
+import { ROOT_STYLE, isPaintRef, cascadedReader, paintAlpha, resolveStyle, } from "./style.js";
+import { gradientsOf, resolveSvgGradient } from "./gradients.js";
+export { SvgParseError, SvgUnsupportedError } from "./errors.js";
+/**
+ * Elements that carry no ink. They are SKIPPED rather than reported: they are legal, common, and
+ * drawing nothing is the correct result. `<defs>` is here because its contents are only ever drawn
+ * through a reference - and an unresolvable reference is reported where it is USED (`fill="url(#x)"`),
+ * which is the place that can say what is missing. `<style>` is here only because its text is
+ * collected BEFOREHAND (see `stylesheetOf`); skipping it without reading it turned an Illustrator
+ * export black.
+ */
+const IGNORED = new Set([
+    "defs",
+    "title",
+    "desc",
+    "metadata",
+    "style",
+    "linearGradient",
+    "radialGradient",
+]);
+/** What each unsupported element should tell the user to do instead. */
+const HINTS = {
+    text: "Convert the text to outlines in your editor - a PDF cannot lay out SVG text.",
+    tspan: "Convert the text to outlines in your editor - a PDF cannot lay out SVG text.",
+    use: "Expand the <use> in your editor (Illustrator/Inkscape can flatten it).",
+    symbol: "Expand the <symbol> into plain shapes in your editor.",
+    filter: "Filters are pixel operations; rasterise that part to a PNG instead.",
+    mask: "Masks are pixel operations; flatten the artwork in your editor instead.",
+    clipPath: "Flatten the clip in your editor for now.",
+    image: "Place the bitmap with Image({ src }) instead of nesting it in the SVG.",
+    foreignObject: "Not renderable in a PDF; remove it.",
+};
+const attributesOf = (node) => node.attributes;
+/**
+ * The tag without its namespace prefix, or null when the prefix is a FOREIGN one.
+ *
+ * Editors write their own state into the file - Inkscape's `<sodipodi:namedview>`, Adobe's `<i:pgf>`,
+ * RDF licence blocks. None of it draws anything, so refusing it made 12 of 10,819 real files fail for
+ * no reason. `svg:` itself is just the SVG namespace spelled out, so `<svg:rect>` is a rect.
+ */
+function localName(tagName) {
+    const colon = tagName.indexOf(":");
+    if (colon === -1)
+        return tagName;
+    return tagName.slice(0, colon) === "svg" ? tagName.slice(colon + 1) : null;
+}
+/**
+ * The text of every `<style>` block in the document, wherever it sits - commonly inside `<defs>`,
+ * which the walk skips, so it has to be gathered in its own pass over the whole tree.
+ */
+function stylesheetOf(node, out = [], depth = 0) {
+    if (depth > MAX_DEPTH)
+        return out;
+    if (node.type === "element" && localName(node.tagName) === "style") {
+        for (const child of node.children ?? []) {
+            if (child.type === "text")
+                out.push(child.value);
+        }
+        return out;
+    }
+    for (const child of elements(node))
+        stylesheetOf(child, out, depth + 1);
+    return out;
+}
+/** The element children of a node; a text node is not one. */
+const elements = (node) => node.type === "element"
+    ? node.children.filter((child) => child.type === "element")
+    : [];
+/**
+ * Reads the root `<svg>` and returns the matrix that maps its user space onto `target`, plus the
+ * intrinsic size. The `viewBox` scales UNIFORMLY and centres - SVG's default `preserveAspectRatio`
+ * ("xMidYMid meet"). Choosing the target box is the caller's job, so `BoxFit` keeps meaning the same
+ * thing it means for a bitmap.
+ */
+function rootMapping(root, target) {
+    const attributes = attributesOf(root);
+    const box = String(attributes["viewBox"] ?? "")
+        .trim()
+        .split(/[\s,]+/)
+        .map(Number);
+    const hasBox = box.length === 4 && box.every((n) => Number.isFinite(n)) && box[2] > 0 && box[3] > 0;
+    const declaredW = Number(attributes["width"]);
+    const declaredH = Number(attributes["height"]);
+    const size = {
+        width: Number.isFinite(declaredW) && declaredW > 0 ? declaredW : hasBox ? box[2] : target.width,
+        height: Number.isFinite(declaredH) && declaredH > 0 ? declaredH : hasBox ? box[3] : target.height,
+    };
+    // We always scale uniformly and centre, which is SVG's default "xMidYMid meet". Any other value
+    // moves or crops the drawing, so it is named rather than quietly ignored.
+    const par = String(attributes["preserveAspectRatio"] ?? "").trim();
+    if (par !== "" && !/^xMidYMid(\s+meet)?$/.test(par)) {
+        throw new SvgUnsupportedError(`preserveAspectRatio="${par}"`, 'Only the default "xMidYMid meet" is honoured. Size the drawing through width/height instead.');
+    }
+    const [vx, vy, vw, vh] = hasBox ? box : [0, 0, size.width, size.height];
+    const scale = Math.min(target.width / vw, target.height / vh);
+    const dx = target.x + (target.width - vw * scale) / 2;
+    const dy = target.y + (target.height - vh * scale) / 2;
+    // Place, then scale, then bring the viewBox origin to zero.
+    return {
+        matrix: multiply([scale, 0, 0, scale, dx, dy], [1, 0, 0, 1, -vx, -vy]),
+        size,
+    };
+}
+/**
+ * Attributes that CHANGE the picture and that we cannot honour. Ignoring one does not lose a detail -
+ * it draws something the file did not describe: a drop-shadow logo as a hard silhouette. `clip-path`
+ * used to be listed here; it is resolved now, which is the honest version of the same rule.
+ */
+const REFUSED_ATTRIBUTES = {
+    mask: "Masks are pixel operations; flatten the artwork in your editor instead.",
+    filter: "Filters are pixel operations; rasterise that part to a PNG instead.",
+};
+function refuseAttributes(tagName, read) {
+    for (const [name, hint] of Object.entries(REFUSED_ATTRIBUTES)) {
+        const value = read(name);
+        // `none` is the explicit absence of one, which is nothing to refuse.
+        if (value !== undefined && value.trim() !== "none") {
+            throw new SvgUnsupportedError(`"${name}" on <${tagName}>`, hint);
+        }
+    }
+}
+/**
+ * The `<clipPath>` definitions, by id. Their children are flattened into ONE command list, because a
+ * clip is a single path in PDF - which is also what SVG means: several children clip to their union.
+ *
+ * A child's own `transform` is baked into the coordinates rather than left in the graphics state: a
+ * clip is set from the path in the CURRENT space, so there is no state to put it in.
+ */
+function clipPathsOf(node, into = new Map(), depth = 0) {
+    if (depth > MAX_DEPTH)
+        return into;
+    if (node.type === "element" && localName(node.tagName) === "clipPath") {
+        const attributes = attributesOf(node);
+        const id = attributes["id"] === undefined ? undefined : String(attributes["id"]);
+        if (id !== undefined) {
+            // `objectBoundingBox` units scale the clip to each user's bounding box - a different geometry,
+            // not a harder one, and nothing in the corpus used it. Named rather than silently mistaken.
+            if (String(attributes["clipPathUnits"] ?? "userSpaceOnUse") !== "userSpaceOnUse") {
+                throw new SvgUnsupportedError('clipPathUnits="objectBoundingBox"', "Only userSpaceOnUse is resolved. Flatten the clip in your editor.");
+            }
+            const own = attributes["transform"]
+                ? parseTransform(String(attributes["transform"]))
+                : IDENTITY;
+            const commands = [];
+            let fillRule;
+            for (const child of elements(node)) {
+                const childAttributes = attributesOf(child);
+                const shape = shapeOf(localName(child.tagName) ?? "", childAttributes);
+                if (!shape)
+                    continue;
+                const childTransform = childAttributes["transform"]
+                    ? parseTransform(String(childAttributes["transform"]))
+                    : IDENTITY;
+                const matrix = multiply(own, childTransform);
+                commands.push(...(isIdentity(matrix) ? shape : transformCommands(shape, matrix)));
+                // SVG spells the clip's winding rule `clip-rule`; it sits on the child, not the clipPath.
+                if (String(childAttributes["clip-rule"] ?? "") === "evenodd")
+                    fillRule = "evenodd";
+            }
+            into.set(id, { commands, fillRule });
+        }
+        return into;
+    }
+    for (const child of elements(node))
+        clipPathsOf(child, into, depth + 1);
+    return into;
+}
+/** The shape's own `fill-opacity`/`opacity` multiply into the gradient's, exactly as they do into a
+ *  solid colour's alpha. */
+const gradientWithAlpha = (gradient, alpha) => alpha >= 1 ? gradient : { ...gradient, alpha: (gradient.alpha ?? 1) * alpha };
+/** A referenced gradient, or a named error - SVG says an unresolvable paint reference is invalid. */
+function gradientDef(defs, id) {
+    const def = defs.get(id);
+    if (!def) {
+        throw new SvgUnsupportedError(`fill="url(#${id})" - no gradient with that id in this file`, "It may be a <pattern>, which is not supported, or a broken reference.");
+    }
+    return def;
+}
+/** The id inside a `url(#id)` reference, or null if the value is not one. */
+function referenceId(value) {
+    return /^url\(\s*#([^)\s]+)\s*\)$/.exec(value.trim())?.[1] ?? null;
+}
+/**
+ * How deep the element tree may nest. The walk is recursive, so a pathological file - generated,
+ * corrupt, or hostile - would otherwise blow the call stack with a raw `RangeError` instead of an
+ * error the caller can act on. Real drawings nest a couple of dozen deep at most.
+ */
+const MAX_DEPTH = 256;
+function walk(node, parentStyle, rules, clips, gradients, out, depth = 0) {
+    if (depth > MAX_DEPTH) {
+        throw new SvgParseError(`the SVG nests more than ${MAX_DEPTH} levels deep - it is not a drawing.`);
+    }
+    const tagName = localName(node.tagName);
+    if (tagName === null || IGNORED.has(tagName))
+        return;
+    // A clipPath's own children are geometry for the clip, never ink.
+    if (tagName === "clipPath")
+        return;
+    const attributes = attributesOf(node);
+    const css = declarationsFor(rules, tagName, {
+        class: attributes["class"],
+        id: attributes["id"],
+    });
+    // Everything below reads through the cascade, not the raw attributes: `filter="url(#f)"` and
+    // `style="filter:url(#f)"` are the same instruction, and a `<style>` rule can set either.
+    const read = cascadedReader(attributes, css);
+    refuseAttributes(tagName, read);
+    const style = resolveStyle(parentStyle, attributes, css);
+    const transform = attributes["transform"]
+        ? parseTransform(String(attributes["transform"]))
+        : IDENTITY;
+    const wrapped = !isIdentity(transform);
+    if (wrapped)
+        out.push({ type: "transform-push", matrix: transform });
+    // The clip is pushed INSIDE the element's own transform, because that is the space its `url(#id)`
+    // reference is written in - the same rule SVG states for userSpaceOnUse.
+    const clipValue = read("clip-path") ?? "";
+    const clipId = clipValue.trim() === "none" ? null : referenceId(clipValue);
+    const clip = clipId === null ? undefined : clips.get(clipId);
+    if (clipId !== null && clip === undefined) {
+        // Per SVG a reference to a missing clipPath makes the element invalid, so silently drawing it
+        // unclipped would be the one thing we must not do.
+        throw new SvgUnsupportedError(`clip-path="${clipValue}" - no <clipPath id="${clipId}"> in this file`, "The reference is broken; remove it or add the definition.");
+    }
+    if (clip) {
+        out.push({ type: "clip-path-push", commands: clip.commands, fillRule: clip.fillRule });
+    }
+    if (tagName === "svg") {
+        // A nested <svg> establishes its own viewport: x/y/width/height plus a viewBox, and it clips.
+        // Walking it as a plain group would place and scale its children wrong, silently. None of the
+        // 10,819 files measured contains one, so it is named rather than built.
+        throw new SvgUnsupportedError("a nested <svg> element", "It establishes its own viewport. Flatten it into the outer drawing in your editor.");
+    }
+    if (tagName === "g") {
+        for (const child of elements(node))
+            walk(child, style, rules, clips, gradients, out, depth + 1);
+    }
+    else {
+        const commands = shapeOf(tagName, attributes);
+        if (commands === null) {
+            throw new SvgUnsupportedError(`the SVG element <${tagName}>`, HINTS[tagName] ?? "It is not part of the supported subset yet.");
+        }
+        // A shape with neither fill nor stroke, or with no geometry, paints nothing - and an empty Path
+        // node would only cost bytes.
+        if (commands.length > 0 && (style.fill || style.stroke)) {
+            // A gradient is resolved HERE too, and for the same reason: in its default units its anchors
+            // are fractions of the SHAPE's bounding box, which only exists at this point.
+            const shapeAlpha = style.fillOpacity * style.opacity;
+            const fill = isPaintRef(style.fill)
+                ? gradientWithAlpha(resolveSvgGradient(gradientDef(gradients, style.fill.ref), gradients, commands), shapeAlpha)
+                : style.fill && paintAlpha(style.fill, shapeAlpha);
+            // The opacities are applied HERE, once, on the shape that paints - see `paintAlpha`.
+            out.push({
+                type: "path",
+                commands,
+                fill,
+                fillRule: style.fillRule,
+                stroke: style.stroke && {
+                    ...style.stroke,
+                    color: paintAlpha(style.stroke.color, style.strokeOpacity * style.opacity),
+                },
+            });
+        }
+    }
+    if (clip)
+        out.push({ type: "clip-pop" });
+    if (wrapped)
+        out.push({ type: "transform-pop" });
+}
+/** Parses `source` and returns the root element, rejecting anything that is not an SVG document. */
+function rootOf(source) {
+    // A file named .svg is not necessarily SVG - the corpus turned up build-cache blobs with that
+    // extension. Say so here rather than let the parser die on the binary with a TypeError.
+    if (!/<svg[\s>]/i.test(source)) {
+        throw new SvgParseError(
+        // oxlint-disable-next-line no-control-regex -- spotting control bytes is the whole point here.
+        /[\u0000-\u0008\u000E-\u001F]/.test(source.slice(0, 200))
+            ? "this is not an SVG file - it starts with binary data."
+            : "no <svg> element found - is this really an SVG file?");
+    }
+    const roots = parseXml(source);
+    const root = roots.find((node) => localName(node.tagName) === "svg");
+    if (!root)
+        throw new SvgParseError("no root <svg> element - is this really an SVG file?");
+    return root;
+}
+/** The intrinsic size, for sizing an `<Image>` that gives only one dimension (or none). */
+export function svgSize(source) {
+    return rootMapping(rootOf(source), { x: 0, y: 0, width: 1, height: 1 }).size;
+}
+/**
+ * An SVG document as display-list nodes, placed in `target`. Coordinates stay in the SVG's own user
+ * space and the mapping rides in the graphics state, so a stroke scales with the drawing - which is
+ * what SVG specifies and what a flattened implementation gets wrong.
+ */
+export function svgToIr(source, target) {
+    const root = rootOf(source);
+    const { matrix } = rootMapping(root, target);
+    // The outermost <svg> is a VIEWPORT: it clips to itself (CSS `overflow: hidden` on the root svg).
+    // Without this a shape that pokes past the viewBox - a stroke on the edge, a rounded cap - bleeds
+    // into whatever sits beside the drawing in the layout. Measured against headless Chrome, which
+    // clips exactly here.
+    const out = [
+        { type: "clip-push", x: target.x, y: target.y, width: target.width, height: target.height },
+        { type: "transform-push", matrix },
+    ];
+    const rules = parseStylesheet(stylesheetOf(root).join("\n"));
+    const clips = clipPathsOf(root);
+    const gradients = gradientsOf(root);
+    // The root <svg> carries presentation attributes of its own, and 778 of 10,819 real files put
+    // `fill="none"` there - the Figma export default. Skipping them filled every shape that has no
+    // fill of its own with BLACK, which covered the drawing underneath.
+    const rootAttributes = attributesOf(root);
+    const rootCss = declarationsFor(rules, "svg", {
+        class: rootAttributes["class"],
+        id: rootAttributes["id"],
+    });
+    // The root is held to the same rule as its children: a filter or mask on it changes the picture.
+    refuseAttributes("svg", cascadedReader(rootAttributes, rootCss));
+    const rootStyle = resolveStyle(ROOT_STYLE, rootAttributes, rootCss);
+    for (const child of elements(root))
+        walk(child, rootStyle, rules, clips, gradients, out, 1);
+    out.push({ type: "transform-pop" }, { type: "clip-pop" });
+    return out;
+}

package/dist/svg/shapes.d.ts

@@ -0,0 +1,6 @@
+import type { PathCommand } from "../ir/display-list.js";
+import type { Attributes } from "./style.js";
+/** `d` through svgpath, then the remaining segment kinds mapped onto the IR's m/l/c/z. */
+export declare function pathData(d: string): PathCommand[];
+/** The geometry of one shape element, or null if the tag is not a shape. */
+export declare function shapeOf(tagName: string, attributes: Attributes): PathCommand[] | null;

package/dist/svg/shapes.js

@@ -0,0 +1,177 @@
+import svgpath from "svgpath";
+import { quadToCubic } from "../vector/path.js";
+import { SvgParseError } from "./errors.js";
+import { length } from "./units.js";
+/**
+ * Every drawable SVG shape becomes one list of path commands, so the rest of the pipeline knows about
+ * exactly one kind of geometry. A rect is a path, a circle is four arcs, `<path>` is a path already.
+ *
+ * The `d` grammar - relative coordinates, the `S`/`T` shorthands, and elliptical arcs - is handled by
+ * `svgpath`: `.abs().unshort().unarc()` leaves only M/L/H/V/C/Q/Z. Arcs are the reason: converting one
+ * to Béziers is the SVG spec's own appendix, and a subtly wrong version looks ALMOST right.
+ */
+const num = (attributes, name, fallback = 0) => length(attributes[name], `the "${name}" attribute`, fallback);
+/** Four cubic arcs approximating a full ellipse. The constant is the standard circle-to-Bézier one. */
+const KAPPA = 0.5522847498307936;
+function ellipse(cx, cy, rx, ry) {
+    if (rx <= 0 || ry <= 0)
+        return [];
+    const [ox, oy] = [rx * KAPPA, ry * KAPPA];
+    return [
+        { op: "m", x: cx - rx, y: cy },
+        { op: "c", x1: cx - rx, y1: cy - oy, x2: cx - ox, y2: cy - ry, x: cx, y: cy - ry },
+        { op: "c", x1: cx + ox, y1: cy - ry, x2: cx + rx, y2: cy - oy, x: cx + rx, y: cy },
+        { op: "c", x1: cx + rx, y1: cy + oy, x2: cx + ox, y2: cy + ry, x: cx, y: cy + ry },
+        { op: "c", x1: cx - ox, y1: cy + ry, x2: cx - rx, y2: cy + oy, x: cx - rx, y: cy },
+        { op: "z" },
+    ];
+}
+function rect(attributes) {
+    const [x, y] = [num(attributes, "x"), num(attributes, "y")];
+    const [w, h] = [num(attributes, "width"), num(attributes, "height")];
+    if (w <= 0 || h <= 0)
+        return [];
+    // An `rx` alone implies the same `ry`, and vice versa; both clamp to half the side.
+    const rxRaw = attributes["rx"] !== undefined ? num(attributes, "rx") : num(attributes, "ry");
+    const ryRaw = attributes["ry"] !== undefined ? num(attributes, "ry") : rxRaw;
+    const rx = Math.min(rxRaw, w / 2);
+    const ry = Math.min(ryRaw, h / 2);
+    if (rx <= 0 || ry <= 0) {
+        return [
+            { op: "m", x, y },
+            { op: "l", x: x + w, y },
+            { op: "l", x: x + w, y: y + h },
+            { op: "l", x, y: y + h },
+            { op: "z" },
+        ];
+    }
+    const [ox, oy] = [rx * KAPPA, ry * KAPPA];
+    return [
+        { op: "m", x: x + rx, y },
+        { op: "l", x: x + w - rx, y },
+        { op: "c", x1: x + w - rx + ox, y1: y, x2: x + w, y2: y + ry - oy, x: x + w, y: y + ry },
+        { op: "l", x: x + w, y: y + h - ry },
+        {
+            op: "c",
+            x1: x + w,
+            y1: y + h - ry + oy,
+            x2: x + w - rx + ox,
+            y2: y + h,
+            x: x + w - rx,
+            y: y + h,
+        },
+        { op: "l", x: x + rx, y: y + h },
+        { op: "c", x1: x + rx - ox, y1: y + h, x2: x, y2: y + h - ry + oy, x, y: y + h - ry },
+        { op: "l", x, y: y + ry },
+        { op: "c", x1: x, y1: y + ry - oy, x2: x + rx - ox, y2: y, x: x + rx, y },
+        { op: "z" },
+    ];
+}
+function points(value) {
+    const found = String(value ?? "").match(/[+-]?(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?/g);
+    const out = [];
+    for (let i = 0; found && i + 1 < found.length; i += 2) {
+        out.push([Number(found[i]), Number(found[i + 1])]);
+    }
+    return out;
+}
+function polyline(value, close) {
+    const list = points(value);
+    if (list.length === 0)
+        return [];
+    const out = [{ op: "m", x: list[0][0], y: list[0][1] }];
+    for (const [x, y] of list.slice(1))
+        out.push({ op: "l", x, y });
+    if (close)
+        out.push({ op: "z" });
+    return out;
+}
+/** `d` through svgpath, then the remaining segment kinds mapped onto the IR's m/l/c/z. */
+export function pathData(d) {
+    const out = [];
+    let [cx, cy] = [0, 0];
+    let [startX, startY] = [0, 0];
+    try {
+        const parsed = svgpath(d);
+        // svgpath REPORTS a malformed `d` on the instance instead of throwing, so an unchecked call
+        // quietly yields an empty path - the shape simply disappears.
+        // Its bundled types omit `err`, though it IS the API: svgpath never throws on malformed input,
+        // it records the reason and yields no segments - so the shape would just disappear.
+        const err = parsed.err;
+        if (err)
+            throw new SvgParseError(`path data could not be read: ${err}`);
+        parsed
+            .abs()
+            .unshort()
+            .unarc()
+            .iterate((segment) => {
+            const [op, ...a] = segment;
+            switch (op) {
+                case "M":
+                    [cx, cy] = [a[0], a[1]];
+                    [startX, startY] = [cx, cy];
+                    out.push({ op: "m", x: cx, y: cy });
+                    break;
+                case "L":
+                    [cx, cy] = [a[0], a[1]];
+                    out.push({ op: "l", x: cx, y: cy });
+                    break;
+                case "H":
+                    cx = a[0];
+                    out.push({ op: "l", x: cx, y: cy });
+                    break;
+                case "V":
+                    cy = a[0];
+                    out.push({ op: "l", x: cx, y: cy });
+                    break;
+                case "C":
+                    out.push({ op: "c", x1: a[0], y1: a[1], x2: a[2], y2: a[3], x: a[4], y: a[5] });
+                    [cx, cy] = [a[4], a[5]];
+                    break;
+                case "Q":
+                    // PDF has no quadratic operator; the same conversion a TrueType outline needs.
+                    out.push(quadToCubic(cx, cy, a[0], a[1], a[2], a[3]));
+                    [cx, cy] = [a[2], a[3]];
+                    break;
+                case "Z":
+                    out.push({ op: "z" });
+                    [cx, cy] = [startX, startY];
+                    break;
+                default:
+                    throw new SvgParseError(`path data: unexpected segment "${op}"`);
+            }
+        });
+    }
+    catch (error) {
+        if (error instanceof SvgParseError)
+            throw error;
+        throw new SvgParseError(`path data could not be read: ${error.message}`);
+    }
+    return out;
+}
+/** The geometry of one shape element, or null if the tag is not a shape. */
+export function shapeOf(tagName, attributes) {
+    switch (tagName) {
+        case "path":
+            return attributes["d"] ? pathData(String(attributes["d"])) : [];
+        case "rect":
+            return rect(attributes);
+        case "circle": {
+            const r = num(attributes, "r");
+            return ellipse(num(attributes, "cx"), num(attributes, "cy"), r, r);
+        }
+        case "ellipse":
+            return ellipse(num(attributes, "cx"), num(attributes, "cy"), num(attributes, "rx"), num(attributes, "ry"));
+        case "line":
+            return [
+                { op: "m", x: num(attributes, "x1"), y: num(attributes, "y1") },
+                { op: "l", x: num(attributes, "x2"), y: num(attributes, "y2") },
+            ];
+        case "polyline":
+            return polyline(attributes["points"], false);
+        case "polygon":
+            return polyline(attributes["points"], true);
+        default:
+            return null;
+    }
+}

package/dist/svg/style.d.ts

@@ -0,0 +1,61 @@
+import { Color } from "../common/color.js";
+import type { StrokeStyle } from "../ir/display-list.js";
+/**
+ * The presentation style of one element, resolved against its parent's.
+ *
+ * SVG styles two ways at once: presentation ATTRIBUTES (`fill="red"`) and a CSS `style=""` bag, with
+ * the style bag winning. Most of them INHERIT, which is what lets a logo set `fill` once on the root
+ * `<g>`. A `<style>` block with class selectors is a third way and is not resolved yet - it is a
+ * NAMED error, not a silent loss, because that is exactly the case that leaves a logo blank.
+ */
+/** A paint is a colour, or a `url(#id)` reference that only the SHAPE can resolve - a gradient in
+ *  the default `objectBoundingBox` units is positioned on the bounding box of the thing it fills. */
+export type PaintRef = {
+    ref: string;
+};
+export type SvgPaint = Color | PaintRef;
+export declare const isPaintRef: (paint: SvgPaint | undefined) => paint is PaintRef;
+export interface SvgStyle {
+    /** Absent = `fill="none"`. The RAW paint - see `paintAlpha` for why the opacity is not in it. */
+    fill?: SvgPaint;
+    fillRule: "nonzero" | "evenodd";
+    stroke?: StrokeStyle;
+    /** `currentColor` resolves to this; set by the `color` attribute, black at the root. */
+    color: Color;
+    /**
+     * `fill-opacity` / `stroke-opacity` (both inherit) and the accumulated `opacity` of this element
+     * and its ancestors. They are kept OUT of the colours and applied once, at the leaf that paints:
+     * folding them in at every level would multiply a group's opacity in again for each generation.
+     */
+    fillOpacity: number;
+    strokeOpacity: number;
+    opacity: number;
+}
+/** The colour a shape actually paints with: its raw colour, times the opacities that reached it. */
+export declare function paintAlpha(color: Color, opacity: number): Color;
+export declare const ROOT_STYLE: SvgStyle;
+/** Raw attributes, exactly as written. Our own XML reader never coerces them (`svg-parser` did,
+ *  turning `id="58310095e0"` into a number). */
+export type Attributes = Record<string, string | undefined>;
+/**
+ * Reads a property from all three sources, in CSS order: a presentation attribute is the weakest, a
+ * matching `<style>` rule beats it, and the inline `style=""` bag beats both.
+ *
+ * Exported because anything that INSPECTS a property has to see the same value the style resolver
+ * would - `filter="url(#f)"` and `style="filter:url(#f)"` are the same instruction, and checking only
+ * the attribute lets the second one through unnoticed.
+ */
+export declare function cascadedReader(attributes: Attributes, css?: Record<string, string>): (name: string) => string | undefined;
+/**
+ * A colour, with the value quoted in the message. `toColor` throws a bare `Unknown color: "x"`, which
+ * inside a 900-element logo says nothing about WHERE - and a malformed file reaches here with pieces
+ * of its own markup as the value, so the raw error is actively misleading.
+ */
+export declare function svgColor(value: string): Color;
+/**
+ * Resolves one element's style against its parent's. Everything SVG inherits is inherited; `opacity`
+ * is the exception - it applies to the element itself, so it is MULTIPLIED down and folded into the
+ * paint of each leaf. That differs from a browser for a `<g opacity>` whose children OVERLAP (a real
+ * group needs one transparency group), and is the one approximation in this file.
+ */
+export declare function resolveStyle(parent: SvgStyle, attributes: Attributes, css?: Record<string, string>): SvgStyle;