SVG: mix-blend-mode, isolation, transform-origin, paint-order, context paints

mix-blend-mode (16 modes and plus-lighter) and isolation, with the blend
modes of feBlend moved to src/render/blend.ts; transform-origin on elements,
clip paths, gradients and patterns; paint-order; context-fill and
context-stroke in markers and <use>; shape-rendering crispEdges and
optimizeSpeed; the root's background-color.

Fixes: zero length dashes at the start of a path, square caps of zero length
dashes along the path, fallback colors for objectBoundingBox paints on shapes
without a bounding box, display: none in group bounding boxes,
overflow="inherit", path data ending at invalid characters.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Lfv41PqHEGbU7SLg5onpG1

Author: matmen

CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## 3.9.0
+
+### Features
+
+- `Image.renderSVG()` blends elements with `mix-blend-mode` (all 16 modes and `plus-lighter`, in CSS) and isolates
+  groups with `isolation: isolate`, like resvg (the blend modes are the ones feBlend already used). All of resvg's 21
+  mix-blend-mode and 2 isolation tests pass, up from 4 and 1.
+- `Image.renderSVG()` applies `transform-origin` (keywords, lengths and percentages) to transforms of elements, clip
+  paths, gradients and patterns; the root's transform turns around the center of its viewport, like resvg's. 21 of
+  resvg's 23 transform-origin tests pass (the others have text), up from 3.
+- `Image.renderSVG()` paints in the order of `paint-order` (fill, stroke and markers). 12 of resvg's 14 tests pass (the
+  others have text), up from 6.
+- `Image.renderSVG()` paints with `context-fill` and `context-stroke`: inside markers the paint of the shape they're on,
+  inside `<use>` that of the element, in their coordinates and bounding boxes (gradients and patterns too). 13 of
+  resvg's 16 tests pass, up from 2.
+- `Image.renderSVG()` draws shapes without antialiasing for `shape-rendering: crispEdges` and `optimizeSpeed`, and fills
+  the root's viewBox with its `background-color` (in CSS).
+
+### Fixes
+
+- `Image.renderSVG()`: zero length dashes (`stroke-dasharray="0 40"`) at the start of a path get caps too, and square
+  ones are turned along the path.
+- `Image.renderSVG()`: shapes without a bounding box (horizontal and vertical lines and curves) painted with an
+  `objectBoundingBox` gradient or pattern use its fallback color, and curves along an axis no longer count as having
+  one.
+- `Image.renderSVG()`: elements with `display: none` don't count towards the bounding boxes of groups (clip paths,
+  masks, gradients and filters in `objectBoundingBox` units).
+- `Image.renderSVG()`: `overflow="inherit"` on markers and nested viewports takes the parent's value.
+- `Image.renderSVG()`: path data ends at the first character that isn't part of it, instead of skipping it.
+
 ## 3.8.1
 
 ### Performance

THIRD_PARTY_NOTICES.md

@@ -25,8 +25,8 @@ following projects, under their own licenses. Each derived file says so in its h
 | [Pillow](https://github.com/python-pillow/Pillow) | `src/util/resample.ts` (filter coefficients, box, bilinear and bicubic filters) | MIT-CMU |
 | [HarfBuzz](https://github.com/harfbuzz/harfbuzz) | `src/render/buffer.ts`, `src/render/layout.ts`, `src/render/shape.ts`, `src/render/shapers/*` (OpenType shaping: buffer, GSUB/GPOS, normalization, fallback positioning, the script shapers and syllable grammars), `scripts/unicode.js` (shaping category tables) | Old MIT |
 | [Universal Shaping Engine data](https://github.com/harfbuzz/harfbuzz/tree/main/src/ms-use) by Microsoft | `scripts/ms-use` (category overrides, invalid vowel sequences), the tables generated from them in `src/render/unicode-data.ts` | MIT |
-| [resvg](https://github.com/linebender/resvg) by the Resvg Authors | `src/render/filter.ts` (the filter effects: regions, inputs, color spaces, box blur (based on [fastblur](https://github.com/fschutt/fastblur)), IIR blur, offset, flood, composite, merge, drop shadow, color matrix, component transfer, tile, morphology, convolution), `src/render/svg.ts` (the filters' attributes like usvg; how patterns are rendered and their reference cycles broken, following resvg and usvg; the markers' placement and orientation, ported from usvg; as many cubics per arc as kurbo makes for usvg; how images are fitted, clipped and sampled), `tests/svgs/resvg` (test cases with resvg's renderings) | MIT (or Apache-2.0) |
-| [tiny-skia](https://github.com/linebender/tiny-skia) by Yevhenii Reizner (from [Skia](https://skia.org) by Google) | `src/render/filter.ts` (feBlend's blend modes) | BSD-3-Clause |
+| [resvg](https://github.com/linebender/resvg) by the Resvg Authors | `src/render/filter.ts` (the filter effects: regions, inputs, color spaces, box blur (based on [fastblur](https://github.com/fschutt/fastblur)), IIR blur, offset, flood, composite, merge, drop shadow, color matrix, component transfer, tile, morphology, convolution), `src/render/svg.ts` (the filters' attributes like usvg; how patterns are rendered and their reference cycles broken, following resvg and usvg; the markers' placement and orientation, ported from usvg; as many cubics per arc as kurbo makes for usvg; how images are fitted, clipped and sampled; transform-origin, paint-order, context-fill and context-stroke, mix-blend-mode and isolation, following usvg), `tests/svgs/resvg` (test cases with resvg's renderings) | MIT (or Apache-2.0) |
+| [tiny-skia](https://github.com/linebender/tiny-skia) by Yevhenii Reizner (from [Skia](https://skia.org) by Google) | `src/render/blend.ts` (the blend modes of feBlend and mix-blend-mode) | BSD-3-Clause |
 | [gaussianiir](http://www.getreuer.info/home/gaussianiir) by Pascal Getreuer | `src/render/filter.ts` (the IIR blur for small deviations, through resvg) | BSD-2-Clause (Simplified BSD) |
 | [Unicode Character Database](https://www.unicode.org/ucd/) | `src/render/unicode-data.ts` (character properties, generated by `scripts/unicode.js`) | Unicode License v3 |
 

src/image.ts

@@ -2284,8 +2284,8 @@ export class Image {
     /**
      * Creates a new image from the given SVG
      * Supports shapes, paths, transforms, use/symbol, CSS styles, gradients, patterns, strokes, markers, clip paths,
-     * masks, opacity, filters (all primitives and the filter functions) and images embedded as data URIs (PNG, JPEG,
-     * GIF, WebP, SVG); text is not rendered
+     * masks, opacity, blend modes, filters (all primitives and the filter functions) and images embedded as data URIs
+     * (PNG, JPEG, GIF, WebP, SVG); text is not rendered
      * @param svg The SVG content
      * @param options See {@link SVGOptions}
      * @return The rendered SVG graphic

src/render/blend.ts

@@ -0,0 +1,96 @@
+/*!
+ * Blend modes on premultiplied colors, ported from tiny-skia (https://github.com/linebender/tiny-skia,
+ * src/pipeline/highp.rs; Copyright 2011 Google Inc., 2020 Yevhenii Reizner, BSD-3-Clause License, itself from Skia).
+ * See THIRD_PARTY_NOTICES.md
+ */
+
+/** the modes of feBlend and mix-blend-mode (plus-lighter only exists for mix-blend-mode) */
+export const BLEND_MODES = new Set(['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light',
+    'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'plus-lighter']);
+
+const inv = (v: number): number => 1 - v;
+const lum = (r: number, g: number, b: number): number => r * 0.3 + g * 0.59 + b * 0.11;
+const sat = (r: number, g: number, b: number): number => Math.max(r, g, b) - Math.min(r, g, b);
+
+function setSat(c: number[], value: number): void {
+    const mn = Math.min(c[0], c[1], c[2]), mx = Math.max(c[0], c[1], c[2]), range = mx - mn;
+    for (let k = 0; k < 3; k++) c[k] = range === 0 ? 0 : (c[k] - mn) * value / range;
+}
+
+function setLum(c: number[], l: number): void {
+    const diff = l - lum(c[0], c[1], c[2]);
+    for (let k = 0; k < 3; k++) c[k] += diff;
+}
+
+function clipColor(c: number[], a: number): void {
+    const mn = Math.min(c[0], c[1], c[2]), mx = Math.max(c[0], c[1], c[2]), l = lum(c[0], c[1], c[2]);
+    for (let k = 0; k < 3; k++) {
+        let v = c[k];
+        if (!(mx >= 0)) v = l + (v - l) * l / (l - mn);
+        if (mx > a) v = l + (v - l) * (a - l) / (mx - l);
+        c[k] = Math.max(v, 0);
+    }
+}
+
+function separable(mode: string, sc: number, dc: number, sa: number, da: number): number {
+    switch (mode) {
+        case 'multiply': return sc * inv(da) + dc * inv(sa) + sc * dc;
+        case 'screen': return sc + dc - sc * dc;
+        case 'darken': return sc + dc - Math.max(sc * da, dc * sa);
+        case 'lighten': return sc + dc - Math.min(sc * da, dc * sa);
+        case 'difference': return sc + dc - 2 * Math.min(sc * da, dc * sa);
+        case 'exclusion': return sc + dc - 2 * sc * dc;
+        case 'color-burn':
+            return dc === da ? dc + sc * inv(da) : sc === 0 ? dc * inv(sa) : sa * (da - Math.min(da, (da - dc) * sa / sc)) + sc * inv(da) + dc * inv(sa);
+        case 'color-dodge':
+            return dc === 0 ? sc * inv(da) : sc === sa ? sc + dc * inv(sa) : sa * Math.min(da, dc * sa / (sa - sc)) + sc * inv(da) + dc * inv(sa);
+        case 'hard-light':
+            return sc * inv(da) + dc * inv(sa) + (2 * sc <= sa ? 2 * sc * dc : sa * da - 2 * (da - dc) * (sa - sc));
+        case 'overlay':
+            return sc * inv(da) + dc * inv(sa) + (2 * dc <= da ? 2 * sc * dc : sa * da - 2 * (da - dc) * (sa - sc));
+        case 'soft-light': {
+            const m = da > 0 ? dc / da : 0, s2 = 2 * sc, m4 = 4 * m;
+            const darkSrc = dc * (sa + (s2 - sa) * (1 - m));
+            const darkDst = (m4 * m4 + m4) * (m - 1) + 7 * m;
+            const liteDst = Math.sqrt(m) - m;
+            const liteSrc = dc * sa + da * (s2 - sa) * (4 * dc <= da ? darkDst : liteDst);
+            return sc * inv(da) + dc * inv(sa) + (s2 <= sa ? darkSrc : liteSrc);
+        }
+        case 'plus-lighter': return Math.min(sc + dc, 1);
+        default: return sc + dc * inv(sa);
+    }
+}
+
+const c = [0, 0, 0];
+
+/** blends the premultiplied source (r, g, b, a) over the destination d[i..i + 3] in place (values 0-1, unclamped) */
+export function blendPixel(mode: string, r: number, g: number, b: number, a: number, d: ArrayLike<number> & { [i: number]: number }, i: number): void {
+    const dr = d[i], dg = d[i + 1], db = d[i + 2], da = d[i + 3];
+    if (mode === 'hue' || mode === 'saturation' || mode === 'color' || mode === 'luminosity') {
+        if (mode === 'hue') {
+            c[0] = r * a; c[1] = g * a; c[2] = b * a;
+            setSat(c, sat(dr, dg, db) * a);
+            setLum(c, lum(dr, dg, db) * a);
+        } else if (mode === 'saturation') {
+            c[0] = dr * a; c[1] = dg * a; c[2] = db * a;
+            setSat(c, sat(r, g, b) * da);
+            setLum(c, lum(dr, dg, db) * a);
+        } else if (mode === 'color') {
+            c[0] = r * da; c[1] = g * da; c[2] = b * da;
+            setLum(c, lum(dr, dg, db) * a);
+        } else {
+            c[0] = dr * a; c[1] = dg * a; c[2] = db * a;
+            setLum(c, lum(r, g, b) * da);
+        }
+        clipColor(c, a * da);
+        d[i] = r * inv(da) + dr * inv(a) + c[0];
+        d[i + 1] = g * inv(da) + dg * inv(a) + c[1];
+        d[i + 2] = b * inv(da) + db * inv(a) + c[2];
+        d[i + 3] = a + da - a * da;
+    } else {
+        d[i] = separable(mode, r, dr, a, da);
+        d[i + 1] = separable(mode, g, dg, a, da);
+        d[i + 2] = separable(mode, b, db, a, da);
+        d[i + 3] = mode === 'plus-lighter' ? Math.min(a + da, 1) : da * inv(a) + a;
+    }
+}

src/render/filter.ts

@@ -3,13 +3,13 @@
  * crates/resvg/src/filter: mod.rs, box_blur.rs (itself based on https://github.com/fschutt/fastblur), iir_blur.rs,
  * color_matrix.rs, component_transfer.rs, composite.rs, morphology.rs, convolve_matrix.rs, turbulence.rs (itself from
  * the reference implementation in the SVG 1.1 specification), lighting.rs, displacement_map.rs; Copyright 2017 the Resvg
- * Authors, MIT License) and the blend modes of tiny-skia (https://github.com/linebender/tiny-skia,
- * src/pipeline/highp.rs; Copyright 2011 Google Inc., 2020 Yevhenii Reizner, BSD-3-Clause License,
- * itself from Skia). The IIR blur
+ * Authors, MIT License). The IIR blur
  * follows Pascal Getreuer's gaussianiir (http://www.getreuer.info/home/gaussianiir; Simplified BSD License), an
  * implementation of Alvarez and Mazorra's fast Gaussian convolution. See THIRD_PARTY_NOTICES.md
  */
 
+import { blendPixel } from './blend.ts';
+
 /** premultiplied RGBA pixels */
 export interface Pixmap {
     width: number;
@@ -643,80 +643,13 @@ function transfer(f: Exclude<Transfer, null>, value: number): number {
     return u8(clamp(0, v, 1) * 255);
 }
 
-// feBlend's modes, like tiny-skia's (premultiplied, the source over the destination)
+// feBlend's modes (the source over the destination)
 function blend(dst: Pixmap, src: Pixmap, mode: string): void {
     const s = src.data, d = dst.data;
-    const inv = (v: number): number => 1 - v;
-    const lum = (r: number, g: number, b: number): number => r * 0.3 + g * 0.59 + b * 0.11;
-    const sat = (r: number, g: number, b: number): number => Math.max(r, g, b) - Math.min(r, g, b);
-    const setSat = (c: number[], value: number): void => {
-        const mn = Math.min(c[0], c[1], c[2]), mx = Math.max(c[0], c[1], c[2]), range = mx - mn;
-        for (let k = 0; k < 3; k++) c[k] = range === 0 ? 0 : (c[k] - mn) * value / range;
-    };
-    const setLum = (c: number[], l: number): void => {
-        const diff = l - lum(c[0], c[1], c[2]);
-        for (let k = 0; k < 3; k++) c[k] += diff;
-    };
-    const clipColor = (c: number[], a: number): void => {
-        const mn = Math.min(c[0], c[1], c[2]), mx = Math.max(c[0], c[1], c[2]), l = lum(c[0], c[1], c[2]);
-        for (let k = 0; k < 3; k++) {
-            let v = c[k];
-            if (!(mx >= 0)) v = l + (v - l) * l / (l - mn);
-            if (mx > a) v = l + (v - l) * (a - l) / (mx - l);
-            c[k] = Math.max(v, 0);
-        }
-    };
-    const separable = (sc: number, dc: number, sa: number, da: number): number => {
-        switch (mode) {
-            case 'multiply': return sc * inv(da) + dc * inv(sa) + sc * dc;
-            case 'screen': return sc + dc - sc * dc;
-            case 'darken': return sc + dc - Math.max(sc * da, dc * sa);
-            case 'lighten': return sc + dc - Math.min(sc * da, dc * sa);
-            case 'difference': return sc + dc - 2 * Math.min(sc * da, dc * sa);
-            case 'exclusion': return sc + dc - 2 * sc * dc;
-            case 'color-burn':
-                return dc === da ? dc + sc * inv(da) : sc === 0 ? dc * inv(sa) : sa * (da - Math.min(da, (da - dc) * sa / sc)) + sc * inv(da) + dc * inv(sa);
-            case 'color-dodge':
-                return dc === 0 ? sc * inv(da) : sc === sa ? sc + dc * inv(sa) : sa * Math.min(da, dc * sa / (sa - sc)) + sc * inv(da) + dc * inv(sa);
-            case 'hard-light':
-                return sc * inv(da) + dc * inv(sa) + (2 * sc <= sa ? 2 * sc * dc : sa * da - 2 * (da - dc) * (sa - sc));
-            case 'overlay':
-                return sc * inv(da) + dc * inv(sa) + (2 * dc <= da ? 2 * sc * dc : sa * da - 2 * (da - dc) * (sa - sc));
-            case 'soft-light': {
-                const m = da > 0 ? dc / da : 0, s2 = 2 * sc, m4 = 4 * m;
-                const darkSrc = dc * (sa + (s2 - sa) * (1 - m));
-                const darkDst = (m4 * m4 + m4) * (m - 1) + 7 * m;
-                const liteDst = Math.sqrt(m) - m;
-                const liteSrc = dc * sa + da * (s2 - sa) * (4 * dc <= da ? darkDst : liteDst);
-                return sc * inv(da) + dc * inv(sa) + (s2 <= sa ? darkSrc : liteSrc);
-            }
-            default: return sc + dc * inv(sa);
-        }
-    };
-    const c = [0, 0, 0];
+    const out = [0, 0, 0, 0];
     for (let i = 0; i < d.length; i += 4) {
-        const r = s[i] / 255, g = s[i + 1] / 255, b = s[i + 2] / 255, a = s[i + 3] / 255;
-        const dr = d[i] / 255, dg = d[i + 1] / 255, db = d[i + 2] / 255, da = d[i + 3] / 255;
-        let out: number[];
-        if (mode === 'hue' || mode === 'saturation' || mode === 'color' || mode === 'luminosity') {
-            if (mode === 'hue') {
-                c[0] = r * a; c[1] = g * a; c[2] = b * a;
-                setSat(c, sat(dr, dg, db) * a);
-                setLum(c, lum(dr, dg, db) * a);
-            } else if (mode === 'saturation') {
-                c[0] = dr * a; c[1] = dg * a; c[2] = db * a;
-                setSat(c, sat(r, g, b) * da);
-                setLum(c, lum(dr, dg, db) * a);
-            } else if (mode === 'color') {
-                c[0] = r * da; c[1] = g * da; c[2] = b * da;
-                setLum(c, lum(dr, dg, db) * a);
-            } else {
-                c[0] = dr * a; c[1] = dg * a; c[2] = db * a;
-                setLum(c, lum(r, g, b) * da);
-            }
-            clipColor(c, a * da);
-            out = [r * inv(da) + dr * inv(a) + c[0], g * inv(da) + dg * inv(a) + c[1], b * inv(da) + db * inv(a) + c[2], a + da - a * da];
-        } else out = [separable(r, dr, a, da), separable(g, dg, a, da), separable(b, db, a, da), da * inv(a) + a];
+        for (let k = 0; k < 4; k++) out[k] = d[i + k] / 255;
+        blendPixel(mode, s[i] / 255, s[i + 1] / 255, s[i + 2] / 255, s[i + 3] / 255, out, 0);
         for (let k = 0; k < 4; k++) d[i + k] = u8(clamp(0, out[k], 1) * 255 + 0.5);
     }
 }