SVG: images in data URIs

renderSVG draws <image> with data URIs: rasters are decoded first (the
decoders may be asynchronous; GIFs' first frame, the rest through
Image.decode), then passed to the synchronous renderer by href; SVGs
(gzipped too, via a new synchronous gunzip) render as nested documents.
Fitted like usvg: missing or auto width/height from the image,
preserveAspectRatio (clipped with slice), image-rendering; sampled like
tiny-skia (bicubic, nearest where only translated, padded edges), sharing
the pattern's sampler. An image's bounding box is its rectangle for
objectBoundingBox clips and masks. External files and URLs aren't loaded.
Nested SVG elements count towards MAX_INSTANCES (shared budget), each
href is collected once: 7 levels of 20 gzipped self-copies (1.28e9
elements) stop after 1.3 s.

resvg's image tests: 17/56 by the suite's threshold (was 0), 37/56 with
the frame's pixels ignored (tiny-skia rounds edges to quarter pixels,
the frame's 3.75 px strokes differ by more than 24); most others load
files. Patterns 32/33, markers 61/64, filters 71 unchanged; a test
checks PNG, WebP, GIF, JPEG and SVGZ data URIs pixel-exactly at 1:1.

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

Author: matmen

CHANGELOG.md

@@ -19,6 +19,13 @@
   `markerHeight`, `viewBox`, clipped unless `overflow` is visible; placed and oriented like resvg's (ported from usvg).
   Arcs are split into as many curves as resvg splits them into (more for large radii), which places the mid markers
   alike. 61 of resvg's 64 marker tests pass (the others have text or images), up from 11.
+- `Image.renderSVG()` draws images (`<image>`) in data URIs: PNG, JPEG, GIF (the first frame), WebP and the other
+  formats `Image.decode()` reads, and SVGs (also gzipped, and with their own embedded images). They're fitted like
+  resvg's: `width`/`height` from the image where they're missing or `auto`, `preserveAspectRatio` (clipped with
+  `slice`), `image-rendering`, sampled bicubically (the nearest pixel at their size). External files and URLs aren't
+  loaded. Elements of embedded SVGs count towards the limit of 100000 elements rendered through references. Of
+  resvg's 56 image tests, 17 pass the test suite's threshold, 37 without the frame around them, whose antialiasing
+  differs (tiny-skia rounds edges to quarter pixels); most of the others load files.
 - Optimized lossy WebP animations are smaller: like libwebp's, they leave out pixels that changed by up to a tolerance
   from the quality (3 per channel at quality 85, 1 at 100), and make unchanged pixels transparent only in whole 8x8
   blocks. Making each unchanged pixel transparent gave speckled alpha masks where most pixels change a little

README.md

@@ -54,7 +54,7 @@ encode as GIF, APNG or WebP.
 
 - [Text rendering](https://imagescript.matmen.dev/classes/Image.html#rendertext) with TrueType and OpenType fonts,
   in every script, with color emoji
-- [SVG rendering](https://imagescript.matmen.dev/classes/Image.html#rendersvg) (no text, images or filters)
+- [SVG rendering](https://imagescript.matmen.dev/classes/Image.html#rendersvg) (no text or filters)
 - [Resizing](https://imagescript.matmen.dev/classes/Image.html#resize),
   [cropping](https://imagescript.matmen.dev/classes/Image.html#crop),
   [rotating](https://imagescript.matmen.dev/classes/Image.html#rotate),

THIRD_PARTY_NOTICES.md

@@ -25,7 +25,7 @@ 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/svg.ts` (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), `tests/svgs/resvg` (test cases with resvg's renderings) | MIT (or Apache-2.0) |
+| [resvg](https://github.com/linebender/resvg) by the Resvg Authors | `src/render/svg.ts` (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) |
 | [Unicode Character Database](https://www.unicode.org/ucd/) | `src/render/unicode-data.ts` (character properties, generated by `scripts/unicode.js`) | Unicode License v3 |
 
 ## fflate, Fast CRC32 in JavaScript

src/codecs/zlib.ts

@@ -630,6 +630,23 @@ export function decompress(data: Uint8Array, limit: number): Uint8Array {
     return inflate(data.subarray(2), new u8(limit));
 }
 
+/**
+ * Decompresses a gzip stream (its first member) into at most limit bytes
+ */
+export function gunzip(data: Uint8Array, limit: number): Uint8Array {
+    if (data.length < 18 || data[0] !== 0x1f || data[1] !== 0x8b || data[2] !== 8) throw new Error('gzip: invalid header');
+    const flags = data[3];
+    let o = 10;
+    if (flags & 4) o += 2 + (data[o] | data[o + 1] << 8);
+    if (flags & 8) while (o < data.length && data[o++]);
+    if (flags & 16) while (o < data.length && data[o++]);
+    if (flags & 2) o += 2;
+    // (the size of the decompressed data, modulo 2^32, ends the stream)
+    const end = data.length - 4, size = (data[end] | data[end + 1] << 8 | data[end + 2] << 16 | data[end + 3] << 24) >>> 0;
+    if (o > end - 4 || size > limit) throw new Error('gzip: invalid or too large');
+    return inflate(data.subarray(o, end - 4), new u8(size));
+}
+
 // native zlib, accessed through feature detection with minimal local types instead of depending on DOM or Node type
 // definitions: node:zlib (Node, Bun and Deno expose it through process.getBuiltinModule, without an import) is the
 // fastest and honors compression levels; DecompressionStream is part of the web platform

src/image.ts

@@ -2,6 +2,7 @@ import * as png from './codecs/png.ts';
 import * as jpeg from './codecs/jpeg.ts';
 import * as tiff from './codecs/tiff.ts';
 import * as webp from './codecs/webp.ts';
+import * as gif from './codecs/gif.ts';
 import * as tga from './codecs/tga.ts';
 import * as bmp from './codecs/bmp.ts';
 import * as ico from './codecs/ico.ts';
@@ -2258,8 +2259,8 @@ export class Image {
 
     /**
      * Creates a new image from the given SVG
-     * Supports shapes, paths, transforms, use/symbol, CSS styles, gradients, strokes, clip paths, masks and opacity;
-     * text, images, filters and patterns are not rendered
+     * Supports shapes, paths, transforms, use/symbol, CSS styles, gradients, patterns, strokes, markers, clip paths,
+     * masks, opacity and images embedded as data URIs (PNG, JPEG, GIF, WebP, SVG); text and filters are not rendered
      * @param svg The SVG content
      * @param options See {@link SVGOptions}
      * @return The rendered SVG graphic
@@ -2283,7 +2284,26 @@ export class Image {
         if (mode !== Image.SVG_MODE_SCALE && size < 1)
             throw new RangeError('SVG size must be >= 1');
 
-        const {width, height, pixels} = svgRenderer.render(typeof svg === 'string' ? svg : view(svg), mode, size);
+        // the raster images it embeds are decoded first (decoding can be asynchronous), the SVG is rendered at once
+        const source = typeof svg === 'string' ? svg : view(svg);
+        const images = new Map<string, svgRenderer.RasterImage>();
+        for (const { href, data } of svgRenderer.embeddedImages(source)) {
+            if (images.has(href)) continue;
+            try {
+                if (ImageType.getType(data) === 'gif') {
+                    // (a GIF's first frame)
+                    const decoded = gif.decode(data, true);
+                    images.set(href, { width: decoded.width, height: decoded.height, pixels: gif.composite(decoded)[0].pixels });
+                } else {
+                    const image = await Image.decode(data);
+                    images.set(href, { width: image.width, height: image.height, pixels: image.bitmap });
+                }
+            } catch {
+                // (images that can't be decoded aren't drawn, like resvg's)
+            }
+        }
+
+        const {width, height, pixels} = svgRenderer.render(source, mode, size, images);
         const image = new Image(width, height);
         image.bitmap.set(pixels);