@react-native-gpui/svg 15.15.0-alpha.0 → 15.15.0-alpha.1

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to `@react-native-gpui/svg` are listed here. Each version's section becomes the notes of its GitHub release.
 
+## 15.15.0-alpha.1 - 2026-11-12
+
+- A drawing is looked up by a structural hash of its props, children, frame size and scale, so a render that finds it builds no document string. Before, every render built and escaped the whole SVG document just to hash it, even when the raster was cached.
+- The rasters are kept in one cache shared by every node, bounded by bytes (64 MB; `RN_GPUI_SVG_CACHE_MB` sets another) and dropping the image used longest ago first. It held weak references before, so an icon that left the screen was rasterised again when it came back, and the same icon in two places was drawn twice.
+- A drawing that is not cached is rasterised on a background thread when it is large (over about 48 CSS pixels square at a scale of 2) or has a filter, or when its node already shows an image (a theme switch). The node keeps showing its previous image until the new one is ready, then is built again; a node with nothing to show yet draws nothing until then. A small icon whose node has no image is still drawn at once, so a row that scrolls in has its icon on the first frame. Several nodes asking for the same drawing share one rasterisation.
+- The four coverage samples of a drawing are rasterised side by side (a small one, under 128 by 128 pixels, one after the other, because starting a thread costs more than a sample) and combined in a fixed order, so the pixels are the same as when they were drawn one after the other (a test compares them in both ways). A 230 point illustration with drop shadows takes 30 ms to rasterise instead of 120, and now off the main thread.
+- `RN_GPUI_SVG_TRACE=1` logs each rasterisation with the time of every sample, and `RN_GPUI_SVG_SYNC=1` draws everything on the main thread, for measuring.
+- An SVG is drawn with the same antialiasing as Chrome: once per coverage sample at the window's scale, without antialiasing, with the four sample positions Chrome uses, and averaged. An icon's edge now takes the same five coverage steps (0, 1/4, 1/2, 3/4, 1) at the same pixels, so the Material star at 16 points differs from Chrome in 5 of 1024 pixels instead of 112, and over 80 icons in 124,480 pixels in 1,288 instead of 7,250. Needs `image` and `smallvec` in the crate.
+- An SVG is placed at a whole CSS pixel, as Chrome places an inline SVG: a 15 point icon centred in a 20 point button, which lays out at 2.5, is drawn at 3 instead of half a point to the left. That half point was the bulk of the edge pixels that differed from the web app (97 of 1,600 in a toolbar arrow, 2 now).
+- An element's `transform` is applied: react-native-svg sends it as a six number `matrix`, which was only read when it had sixteen, so every rotated or scaled shape was drawn untransformed.
+- Filters are drawn: `filter` on a shape or group, `<filter>` and the `feBlend`, `feColorMatrix`, `feComposite`, `feFlood`, `feGaussianBlur`, `feMerge` and `feOffset` primitives reach the renderer, with `sRGB` colour interpolation. An illustration with rotated cards and drop shadows at 230 points differs from Chrome in 249 of 211,600 pixels by more than 8 levels instead of 14,817.
+- Asks core for each node's subtree, which core now hands a component renderer only when it reads it.
+
 ## 15.15.0-alpha.0 - 2026-11-01
 
 - First release, for `react-native-svg` 15.15.x.

package/README.md

@@ -1,6 +1,6 @@
 # @react-native-gpui/svg
 
-Desktop support for [`react-native-svg`](https://github.com/software-mansion/react-native-svg): SVG elements drawn by the desktop renderer.
+Adapter for [`react-native-svg`](https://github.com/software-mansion/react-native-svg) (MIT): draws SVG elements with the desktop renderer.
 
 Part of [react-native-gpui](https://github.com/streetwriters/react-native-gpui), React Native for macOS, Windows and Linux.
 
@@ -14,6 +14,16 @@ npm install react-native-svg@15.15.x @react-native-gpui/svg
 
 Keep using `react-native-svg` as you do on iOS and Android; its JavaScript API is unchanged. Autolinking builds the desktop side when the app is built.
 
+## What is drawn
+
+Shapes, paths, text, gradients, masks, clip paths, symbols, patterns and markers, with the transform of each element (react-native-svg sends it as a six number matrix). Filters are drawn too: `filter` on a shape or group and the `feBlend`, `feColorMatrix`, `feComposite`, `feFlood`, `feGaussianBlur`, `feMerge` and `feOffset` primitives, always with sRGB colour interpolation. An icon is drawn with the same antialiasing as Chrome and placed at a whole CSS pixel, as Chrome places an inline SVG.
+
+Limits: `overflow="visible"` is not honoured (the drawing is clipped to the SVG's frame), the other filter primitives such as `feDropShadow` and `feMorphology` are not passed to the renderer, and a blurred shadow comes out about one level lighter than Chrome's for each shadow that overlaps another.
+
+## Cost
+
+A drawing is cached by a hash of what it is made of, so drawing it again costs a hash and a lookup. The cache is shared by every node and holds up to 64 MB of images (`RN_GPUI_SVG_CACHE_MB` changes that). A drawing that is not cached yet is rasterised on a background thread when it is large or filtered, and the node shows its previous image, if it has one, until the new one is ready; a small icon with nothing yet to show is drawn at once. `RN_GPUI_SVG_TRACE=1` logs each rasterisation and `RN_GPUI_SVG_SYNC=1` draws on the main thread, to measure.
+
 ## Documentation
 
 [Supported libraries](https://streetwriters.github.io/react-native-gpui/docs/supported-libraries)

package/desktop/Cargo.toml

@@ -8,3 +8,6 @@ react-native-gpui = { version = "0.1" }
 rn-gpui-sys = { version = "0.1" }
 gpui = { version = "0.2" }
 serde_json = "1"
+# The same versions gpui is built with, for the averaged image it draws.
+image = { version = "0.25", default-features = false }
+smallvec = "1"

package/desktop/cpp/GpuiSvgModule.cpp

@@ -5,6 +5,7 @@
 
 #include <folly/json.h>
 #include <string>
+#include <type_traits>
 #include <vector>
 
 namespace rngpui {
@@ -12,26 +13,27 @@ using namespace facebook::react;
 
 namespace {
 constexpr const char* kSvgComponents[] = {
-    "RNSVGSvgView",
-    "RNSVGCircle",
-    "RNSVGEllipse",
-    "RNSVGLine",
-    "RNSVGPath",
-    "RNSVGRect",
-    "RNSVGGroup",
-    "RNSVGDefs",
-    "RNSVGClipPath",
-    "RNSVGLinearGradient",
-    "RNSVGRadialGradient",
-    "RNSVGText",
-    "RNSVGTSpan",
+    "RNSVGSvgView",        "RNSVGCircle",         "RNSVGEllipse",
+    "RNSVGLine",           "RNSVGPath",           "RNSVGRect",
+    "RNSVGGroup",          "RNSVGDefs",           "RNSVGClipPath",
+    "RNSVGLinearGradient", "RNSVGRadialGradient", "RNSVGText",
+    "RNSVGTSpan",          "RNSVGFilter",         "RNSVGFeBlend",
+    "RNSVGFeColorMatrix",  "RNSVGFeComposite",    "RNSVGFeFlood",
+    "RNSVGFeGaussianBlur", "RNSVGFeMerge",        "RNSVGFeOffset",
 };
 
 template <typename T>
+  requires(!std::is_enum_v<T>)
 folly::dynamic svgJsonValue(const T& value) {
   return value;
 }
 
+template <typename T>
+  requires std::is_enum_v<T>
+folly::dynamic svgJsonValue(const T& value) {
+  return toString(value);
+}
+
 folly::dynamic svgJsonValue(const Float& value) {
   return value;
 }
@@ -98,6 +100,33 @@ folly::dynamic svgPropsJson(const T& props) {
   RN_GPUI_COPY_SVG_PROP(offset);
   RN_GPUI_COPY_SVG_PROP(stopColor);
   RN_GPUI_COPY_SVG_PROP(stopOpacity);
+  if constexpr (requires { props.filter; }) {
+    if constexpr (std::is_same_v<
+                      std::remove_cvref_t<decltype(props.filter)>,
+                      std::string>)
+      result["filter"] = props.filter;
+  }
+  RN_GPUI_COPY_SVG_PROP(filterUnits);
+  RN_GPUI_COPY_SVG_PROP(primitiveUnits);
+  RN_GPUI_COPY_SVG_PROP(result);
+  RN_GPUI_COPY_SVG_PROP(in1);
+  RN_GPUI_COPY_SVG_PROP(in2);
+  RN_GPUI_COPY_SVG_PROP(mode);
+  RN_GPUI_COPY_SVG_PROP(type);
+  RN_GPUI_COPY_SVG_PROP(values);
+  RN_GPUI_COPY_SVG_PROP(operator1);
+  RN_GPUI_COPY_SVG_PROP(k1);
+  RN_GPUI_COPY_SVG_PROP(k2);
+  RN_GPUI_COPY_SVG_PROP(k3);
+  RN_GPUI_COPY_SVG_PROP(k4);
+  RN_GPUI_COPY_SVG_PROP(dx);
+  RN_GPUI_COPY_SVG_PROP(dy);
+  RN_GPUI_COPY_SVG_PROP(edgeMode);
+  RN_GPUI_COPY_SVG_PROP(floodColor);
+  RN_GPUI_COPY_SVG_PROP(floodOpacity);
+  RN_GPUI_COPY_SVG_PROP(stdDeviationX);
+  RN_GPUI_COPY_SVG_PROP(stdDeviationY);
+  RN_GPUI_COPY_SVG_PROP(nodes);
 #undef RN_GPUI_COPY_SVG_PROP
   return result;
 }
@@ -121,6 +150,14 @@ folly::dynamic svgPropsJson(const std::string& component, const Props& props) {
   RN_GPUI_SVG_PROPS("RNSVGRadialGradient", RNSVGRadialGradientProps)
   RN_GPUI_SVG_PROPS("RNSVGText", RNSVGTextProps)
   RN_GPUI_SVG_PROPS("RNSVGTSpan", RNSVGTSpanProps)
+  RN_GPUI_SVG_PROPS("RNSVGFilter", RNSVGFilterProps)
+  RN_GPUI_SVG_PROPS("RNSVGFeBlend", RNSVGFeBlendProps)
+  RN_GPUI_SVG_PROPS("RNSVGFeColorMatrix", RNSVGFeColorMatrixProps)
+  RN_GPUI_SVG_PROPS("RNSVGFeComposite", RNSVGFeCompositeProps)
+  RN_GPUI_SVG_PROPS("RNSVGFeFlood", RNSVGFeFloodProps)
+  RN_GPUI_SVG_PROPS("RNSVGFeGaussianBlur", RNSVGFeGaussianBlurProps)
+  RN_GPUI_SVG_PROPS("RNSVGFeMerge", RNSVGFeMergeProps)
+  RN_GPUI_SVG_PROPS("RNSVGFeOffset", RNSVGFeOffsetProps)
 #undef RN_GPUI_SVG_PROPS
   return folly::dynamic::object();
 }

package/desktop/src/cache.rs

@@ -0,0 +1,156 @@
+//! The rasters, kept by key in a cache bounded by bytes.
+//!
+//! One cache for every node, so identical icons share one image. It holds the
+//! images strongly: an icon that scrolls off the screen is still here when it
+//! comes back. When the total passes the limit the image used longest ago goes
+//! first. The limit is 64 MB; `RN_GPUI_SVG_CACHE_MB` sets another.
+
+use crate::key::Key;
+use std::collections::HashMap;
+use std::sync::{Arc, Mutex, OnceLock};
+
+pub const DEFAULT_LIMIT_BYTES: usize = 64 * 1024 * 1024;
+
+struct Entry {
+    image: Arc<gpui::RenderImage>,
+    bytes: usize,
+    used: u64,
+}
+
+pub struct Cache {
+    limit: usize,
+    bytes: usize,
+    clock: u64,
+    entries: HashMap<Key, Entry>,
+}
+
+fn size_of(image: &gpui::RenderImage) -> usize {
+    let size = image.size(0);
+    size.width.0.max(0) as usize * size.height.0.max(0) as usize * 4
+}
+
+impl Cache {
+    pub fn new(limit: usize) -> Self {
+        Self {
+            limit,
+            bytes: 0,
+            clock: 0,
+            entries: HashMap::new(),
+        }
+    }
+
+    pub fn get(&mut self, key: &Key) -> Option<Arc<gpui::RenderImage>> {
+        self.clock += 1;
+        let clock = self.clock;
+        let entry = self.entries.get_mut(key)?;
+        entry.used = clock;
+        Some(entry.image.clone())
+    }
+
+    pub fn insert(&mut self, key: Key, image: Arc<gpui::RenderImage>) {
+        self.clock += 1;
+        let bytes = size_of(&image);
+        if let Some(old) = self.entries.insert(
+            key,
+            Entry {
+                image,
+                bytes,
+                used: self.clock,
+            },
+        ) {
+            self.bytes -= old.bytes;
+        }
+        self.bytes += bytes;
+        // The newest image stays even when it alone is over the limit.
+        while self.bytes > self.limit && self.entries.len() > 1 {
+            let Some(oldest) = self
+                .entries
+                .iter()
+                .min_by_key(|(_, entry)| entry.used)
+                .map(|(key, _)| *key)
+            else {
+                break;
+            };
+            if let Some(removed) = self.entries.remove(&oldest) {
+                self.bytes -= removed.bytes;
+            }
+        }
+    }
+
+    pub fn bytes(&self) -> usize {
+        self.bytes
+    }
+
+    pub fn len(&self) -> usize {
+        self.entries.len()
+    }
+}
+
+pub fn global() -> &'static Mutex<Cache> {
+    static CACHE: OnceLock<Mutex<Cache>> = OnceLock::new();
+    CACHE.get_or_init(|| {
+        let limit = std::env::var("RN_GPUI_SVG_CACHE_MB")
+            .ok()
+            .and_then(|value| value.parse::<usize>().ok())
+            .map_or(DEFAULT_LIMIT_BYTES, |megabytes| megabytes * 1024 * 1024);
+        Mutex::new(Cache::new(limit))
+    })
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn image(side: u32) -> Arc<gpui::RenderImage> {
+        let buffer =
+            image::ImageBuffer::from_raw(side, side, vec![0u8; (side * side * 4) as usize])
+                .expect("a buffer");
+        Arc::new(gpui::RenderImage::new(smallvec::SmallVec::from_const([
+            image::Frame::new(buffer),
+        ])))
+    }
+
+    fn key(n: u64) -> Key {
+        crate::key::test_key(n)
+    }
+
+    #[test]
+    fn it_returns_what_it_was_given_and_counts_bytes() {
+        let mut cache = Cache::new(1 << 20);
+        let a = image(10);
+        cache.insert(key(1), a.clone());
+        assert!(Arc::ptr_eq(&cache.get(&key(1)).unwrap(), &a));
+        assert!(cache.get(&key(2)).is_none());
+        assert_eq!(cache.bytes(), 400);
+        // Replacing a key does not count its old image twice.
+        cache.insert(key(1), image(20));
+        assert_eq!(cache.bytes(), 1600);
+        assert_eq!(cache.len(), 1);
+    }
+
+    #[test]
+    fn it_stays_within_its_limit_and_drops_the_image_used_longest_ago() {
+        // Three 10 by 10 images are 1200 bytes; the limit holds two.
+        let mut cache = Cache::new(900);
+        cache.insert(key(1), image(10));
+        cache.insert(key(2), image(10));
+        // Using the first makes the second the oldest.
+        assert!(cache.get(&key(1)).is_some());
+        cache.insert(key(3), image(10));
+        assert!(cache.bytes() <= 900);
+        assert!(cache.get(&key(1)).is_some());
+        assert!(cache.get(&key(2)).is_none());
+        assert!(cache.get(&key(3)).is_some());
+    }
+
+    #[test]
+    fn one_image_over_the_limit_is_still_kept() {
+        let mut cache = Cache::new(100);
+        cache.insert(key(1), image(10));
+        assert_eq!(cache.len(), 1);
+        assert!(cache.get(&key(1)).is_some());
+        cache.insert(key(2), image(10));
+        assert_eq!(cache.len(), 1);
+        assert!(cache.get(&key(2)).is_some());
+    }
+}

package/desktop/src/key.rs

@@ -0,0 +1,173 @@
+//! The cache key of a drawing: what decides its pixels, hashed in place.
+//!
+//! The document string is the expensive part of a render, so a lookup never
+//! builds it: the key is a structural hash of the node, its props and its
+//! children (the resolved colours are props), the frame's size and the scale.
+//! A position is not part of it, so identical icons at different places share
+//! one raster.
+
+use react_native_gpui::extensions::ComponentNode;
+use rn_gpui_sys::ffi::RectF;
+use serde_json::Value;
+use std::collections::hash_map::DefaultHasher;
+use std::hash::Hasher;
+
+/// Two independent 64 bit hashes of the same input.
+#[derive(Clone, Copy, Debug, PartialEq, Eq, Hash)]
+pub struct Key(u64, u64);
+
+struct Pair(DefaultHasher, DefaultHasher);
+
+impl Hasher for Pair {
+    fn write(&mut self, bytes: &[u8]) {
+        self.0.write(bytes);
+        self.1.write(bytes);
+    }
+
+    fn finish(&self) -> u64 {
+        self.0.finish()
+    }
+}
+
+fn hash_value(input: &Value, hasher: &mut Pair) {
+    match input {
+        Value::Null => hasher.write_u8(0),
+        Value::Bool(flag) => {
+            hasher.write_u8(1);
+            hasher.write_u8(u8::from(*flag));
+        }
+        Value::Number(number) => {
+            hasher.write_u8(2);
+            hasher.write_u64(number.as_f64().unwrap_or(f64::NAN).to_bits());
+        }
+        Value::String(text) => {
+            hasher.write_u8(3);
+            hasher.write_usize(text.len());
+            hasher.write(text.as_bytes());
+        }
+        Value::Array(items) => {
+            hasher.write_u8(4);
+            hasher.write_usize(items.len());
+            for item in items {
+                hash_value(item, hasher);
+            }
+        }
+        Value::Object(entries) => {
+            hasher.write_u8(5);
+            hasher.write_usize(entries.len());
+            for (name, entry) in entries {
+                hasher.write_usize(name.len());
+                hasher.write(name.as_bytes());
+                hash_value(entry, hasher);
+            }
+        }
+    }
+}
+
+fn node(node: &ComponentNode, hasher: &mut Pair) {
+    hasher.write_usize(node.component.len());
+    hasher.write(node.component.as_bytes());
+    hash_value(&node.props, hasher);
+    hasher.write_usize(node.children.len());
+    for child in &node.children {
+        self::node(child, hasher);
+    }
+}
+
+pub fn node_key(root: &ComponentNode, frame: RectF, scale: f32) -> Key {
+    let mut hasher = Pair(DefaultHasher::new(), DefaultHasher::new());
+    hasher.1.write_u8(0x5a);
+    node(root, &mut hasher);
+    hasher.write_u32(frame.w.to_bits());
+    hasher.write_u32(frame.h.to_bits());
+    hasher.write_u32(scale.to_bits());
+    Key(hasher.0.finish(), hasher.1.finish())
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use serde_json::json;
+    use std::sync::Arc;
+
+    fn shape(props: Value) -> ComponentNode {
+        ComponentNode {
+            component: "RNSVGPath".into(),
+            tag: 1,
+            frame: RectF {
+                x: 0.0,
+                y: 0.0,
+                w: 10.0,
+                h: 10.0,
+            },
+            scale: (1.0, 1.0),
+            props: Arc::new(props),
+            parent: None,
+            children: Vec::new(),
+        }
+    }
+
+    fn svg(color: u32, d: &str) -> ComponentNode {
+        let mut root = shape(json!({"color": color, "vbWidth": 24, "vbHeight": 24}));
+        root.component = "RNSVGSvgView".into();
+        root.children.push(shape(
+            json!({"d": d, "fill": {"type": 0, "payload": color}}),
+        ));
+        root
+    }
+
+    const FRAME: RectF = RectF {
+        x: 0.0,
+        y: 0.0,
+        w: 16.0,
+        h: 16.0,
+    };
+
+    #[test]
+    fn the_same_drawing_has_the_same_key_wherever_it_is() {
+        let a = node_key(&svg(0xff112233, "M0 0L1 1"), FRAME, 2.0);
+        let mut moved = svg(0xff112233, "M0 0L1 1");
+        moved.frame.x = 99.0;
+        moved.tag = 7;
+        assert_eq!(a, node_key(&moved, RectF { x: 40.0, ..FRAME }, 2.0));
+        assert_eq!(a, node_key(&svg(0xff112233, "M0 0L1 1"), FRAME, 2.0));
+    }
+
+    #[test]
+    fn anything_that_changes_the_pixels_changes_the_key() {
+        let base = node_key(&svg(0xff112233, "M0 0L1 1"), FRAME, 2.0);
+        // A colour, a path, a child, the size and the scale each make a new key.
+        assert_ne!(base, node_key(&svg(0xff112234, "M0 0L1 1"), FRAME, 2.0));
+        assert_ne!(base, node_key(&svg(0xff112233, "M0 0L1 2"), FRAME, 2.0));
+        let mut more = svg(0xff112233, "M0 0L1 1");
+        more.children.push(shape(json!({"d": "M1 1"})));
+        assert_ne!(base, node_key(&more, FRAME, 2.0));
+        assert_ne!(
+            base,
+            node_key(
+                &svg(0xff112233, "M0 0L1 1"),
+                RectF { w: 17.0, ..FRAME },
+                2.0
+            )
+        );
+        assert_ne!(base, node_key(&svg(0xff112233, "M0 0L1 1"), FRAME, 1.0));
+    }
+
+    #[test]
+    fn values_of_different_kinds_do_not_collide() {
+        let flag = node_key(&shape(json!({"a": true})), FRAME, 1.0);
+        let text = node_key(&shape(json!({"a": "true"})), FRAME, 1.0);
+        let number = node_key(&shape(json!({"a": 1})), FRAME, 1.0);
+        assert_ne!(flag, text);
+        assert_ne!(flag, number);
+        assert_ne!(
+            node_key(&shape(json!({"ab": "c"})), FRAME, 1.0),
+            node_key(&shape(json!({"a": "bc"})), FRAME, 1.0)
+        );
+    }
+}
+
+#[cfg(test)]
+pub fn test_key(n: u64) -> Key {
+    Key(n, n)
+}