✨ Export image-filled strokes to WASM SVG as linked images (#11559)

Closes #11384

Skia's SVG backend drops save_layer+SrcIn, so image strokes are re-emitted
as a linked <image> clipped to an opaque stroke silhouette (filled outline,
clip-rule evenodd). Open-path caps join the silhouette and grow the image
dest by cap_bounds_margin so markers stay textured.

render-wasm/src/render/svg/document.rs

@@ -136,13 +136,17 @@ impl SvgLayerCanvas {
     }
 
     /// Finalizes a fragment canvas as a `<clipPath>` def.
+    ///
+    /// Rewrite fill-rule to clip-rule: clipPaths ignore fill-rule, so evenodd
+    /// stroke rings would otherwise fill solid.
     pub(super) fn finish_clip_path_fragment(&mut self, id: &str, canvas: skia::svg::Canvas) {
         let data = canvas.end();
         let doc = String::from_utf8_lossy(data.as_bytes());
         let inner = extract_inner_svg(&doc);
         let prefix = format!("f{}_", self.frag_no);
         self.frag_no += 1;
-        let geometry = sanitize_skia_svg_fragment(&remap_ids(inner, &prefix));
+        let geometry = sanitize_skia_svg_fragment(&remap_ids(inner, &prefix))
+            .replace("fill-rule=", "clip-rule=");
         self.defs.push_str(&format!(
             "<clipPath id=\"{id}\" clipPathUnits=\"userSpaceOnUse\">{geometry}</clipPath>"
         ));

render-wasm/src/render/svg/fixtures.rs

@@ -378,6 +378,24 @@ fn stroke_with_style(
     stroke
 }
 
+fn image_stroke(kind: StrokeKind, style: StrokeStyle, width: f32, image_id: Uuid) -> Stroke {
+    let mut stroke = match kind {
+        StrokeKind::Inner => Stroke::new_inner_stroke(width, style, None, None, None, None),
+        StrokeKind::Outer => Stroke::new_outer_stroke(width, style, None, None, None, None),
+        StrokeKind::Center => Stroke::new_center_stroke(width, style, None, None, None, None),
+    };
+    stroke.fill = test_image_fill(image_id);
+    stroke
+}
+
+pub(super) fn image_solid_stroke(kind: StrokeKind, width: f32, image_id: Uuid) -> Stroke {
+    image_stroke(kind, StrokeStyle::Solid, width, image_id)
+}
+
+pub(super) fn image_dotted_stroke(kind: StrokeKind, width: f32, image_id: Uuid) -> Stroke {
+    image_stroke(kind, StrokeStyle::Dotted, width, image_id)
+}
+
 /// Text with a linked image fill (register URL via `render_with`).
 pub(super) fn add_image_text(
     pool: &mut ShapesPool,

render-wasm/src/render/svg/frames.rs

@@ -1,11 +1,9 @@
 use crate::error::Result;
-use crate::render::shape_renderer::ShapeRenderer;
-use crate::render::vector::VectorRenderer;
 use crate::shapes::{Shape, Stroke};
 use crate::state::ShapesPoolRef;
 
 use super::document::{effect_attrs, SvgLayerCanvas};
-use super::images::emit_fills;
+use super::images::{emit_fills, emit_strokes};
 use super::render_tree;
 use crate::render::RenderResources;
 
@@ -16,8 +14,6 @@ pub(super) fn render_frame(
     tree: ShapesPoolRef,
     scale: f32,
 ) -> Result<()> {
-    let matrix = element.centered_transform();
-
     let effects = effect_attrs(element);
     if let Some(attrs) = &effects {
         builder.open_group(attrs);
@@ -51,12 +47,7 @@ pub(super) fn render_frame(
     // Strokes over children (frame space), outside the content clip.
     let visible_strokes: Vec<&Stroke> = element.visible_strokes().collect();
     if !visible_strokes.is_empty() {
-        let canvas = builder.canvas();
+        emit_strokes(builder, shared, element, &visible_strokes, scale)?;
-        canvas.save();
-        canvas.concat(&matrix);
-        let mut renderer = VectorRenderer::new(canvas, shared, scale, false);
-        renderer.draw_strokes(element, &visible_strokes)?;
-        canvas.restore();
     }
 
     if effects.is_some() {

render-wasm/src/render/svg/images.rs

@@ -1,12 +1,14 @@
 use crate::error::Result;
+use crate::math::Rect as MathRect;
+use crate::render::get_dest_rect;
+use crate::render::get_image_dest_rect;
 use crate::render::shape_renderer::ShapeRenderer;
-use crate::render::vector::VectorRenderer;
+use crate::render::vector::{paint_svg_stroke_silhouette, VectorRenderer};
-use crate::shapes::{Fill, ImageFill, Shape};
+use crate::shapes::{Fill, ImageFill, Shape, Stroke};
 use crate::state::ShapesPoolRef;
 
 use super::document::SvgLayerCanvas;
-use crate::math::Rect as MathRect;
+use crate::render::RenderResources;
-use crate::render::{get_image_dest_rect, RenderResources};
 
 /// Emits fills bottom -> top for SVG export.
 ///
@@ -69,6 +71,94 @@ fn emit_image_fill(
     Ok(())
 }
 
+/// Emits strokes bottom -> top for SVG export.
+///
+/// Image strokes with a registered URL become a linked `<image>` clipped to the
+/// stroke silhouette (Skia drops the GPU save_layer + SrcIn path). Other strokes
+/// go through [`VectorRenderer`].
+pub(super) fn emit_strokes(
+    builder: &mut SvgLayerCanvas,
+    shared: &mut RenderResources,
+    shape: &Shape,
+    strokes: &[&Stroke],
+    scale: f32,
+) -> Result<()> {
+    if strokes.is_empty() {
+        return Ok(());
+    }
+
+    let matrix = shape.centered_transform();
+    // strokes[0] is topmost; draw bottom -> top.
+    for stroke in strokes.iter().rev() {
+        match &stroke.fill {
+            Fill::Image(image_fill) if shared.images.source_url(&image_fill.id()).is_some() => {
+                emit_image_stroke(builder, shared, shape, stroke, image_fill, scale)?;
+            }
+            _ => {
+                let canvas = builder.canvas();
+                canvas.save();
+                canvas.concat(&matrix);
+                let mut renderer = VectorRenderer::new(canvas, shared, scale, false);
+                renderer.draw_strokes(shape, std::slice::from_ref(stroke))?;
+                canvas.restore();
+            }
+        }
+    }
+    Ok(())
+}
+
+/// Linked `<image>` clipped to the stroke outline (opaque filled path).
+fn emit_image_stroke(
+    builder: &mut SvgLayerCanvas,
+    shared: &RenderResources,
+    shape: &Shape,
+    stroke: &Stroke,
+    image_fill: &ImageFill,
+    scale: f32,
+) -> Result<()> {
+    let Some(url) = shared.images.source_url(&image_fill.id()) else {
+        return Ok(());
+    };
+
+    let clip_id = builder.unique("imgstrokeclip");
+    let canvas = builder.new_fragment();
+    {
+        let cv: &skia_safe::Canvas = &canvas;
+        cv.save();
+        cv.concat(&shape.centered_transform());
+        if !paint_svg_stroke_silhouette(cv, shape, stroke, scale) {
+            cv.restore();
+            return Ok(());
+        }
+        cv.restore();
+    }
+    builder.finish_clip_path_fragment(&clip_id, canvas);
+
+    let href = xml_escape_attr(url);
+    let dest = image_stroke_dest_rect(shape, stroke);
+    emit_linked_image_element(builder, shape, image_fill, dest, &href, &clip_id);
+    Ok(())
+}
+
+/// Where to place the linked image for an image-filled stroke.
+///
+/// Starts from the same dest as the GPU path (`selrect` + `stroke.delta()`), then
+/// grows on open paths so marker caps are still covered by the `<image>`.
+fn image_stroke_dest_rect(shape: &Shape, stroke: &Stroke) -> MathRect {
+    let mut dest = get_dest_rect(&shape.selrect(), stroke.delta());
+    if !shape.is_open() {
+        return dest;
+    }
+    let cap_margin = stroke.cap_bounds_margin();
+    if cap_margin <= 0.0 {
+        return dest;
+    }
+    let mut with_caps = shape.selrect();
+    with_caps.inset((-cap_margin, -cap_margin));
+    dest.join(with_caps);
+    dest
+}
+
 /// Emits `<g clip-path>` + `<image href>` at `dest_rect`, under the page CTM.
 pub(super) fn emit_linked_image_element(
     builder: &mut SvgLayerCanvas,

render-wasm/src/render/svg/mod.rs

@@ -60,9 +60,9 @@ fn svg_page_bounds(shape: &Shape, tree: ShapesPoolRef, scale: f32) -> skia::Rect
 /// composed as native SVG `<g>` wrappers. Frame `clip content` uses a native
 /// `<clipPath>`.
 ///
-/// Special-case re-emission for shadows, layer blur, masks, text strokes, and
+/// Shadows, layer blur, masks, and text strokes still need dedicated SVG
-/// image strokes is intentionally out of scope for this cut. Solid Inner/Outer
+/// re-emission. Solid Inner/Outer and dotted/dashed strokes go out as filled
-/// and dotted/dashed strokes are emitted as filled outlines.
+/// outlines; image-filled strokes use a linked `<image>` clipped to the stroke.
 pub fn render_to_svg(
     shared: &mut RenderResources,
     id: &Uuid,
@@ -135,7 +135,7 @@ use groups::render_group;
 use text::render_text_fill;
 
 use document::effect_attrs;
-use images::emit_fills;
+use images::{emit_fills, emit_strokes};
 
 /// Renders `id`'s subtree to an SVG body, returning `(defs, body)`.
 fn render_body(
@@ -211,17 +211,22 @@ fn render_leaf(
             canvas.concat(&matrix);
             let mut renderer = VectorRenderer::new(canvas, shared, scale, false);
             renderer.draw_fill_inner_shadows(element)?;
+            canvas.restore();
 
             let visible_strokes: Vec<_> = element.visible_strokes().collect();
             if !visible_strokes.is_empty() {
-                renderer.draw_strokes(element, &visible_strokes)?;
+                emit_strokes(builder, shared, element, &visible_strokes, scale)?;
                 if !element.has_fills() {
+                    let canvas = builder.canvas();
+                    canvas.save();
+                    canvas.concat(&matrix);
+                    let mut renderer = VectorRenderer::new(canvas, shared, scale, false);
                     for stroke in &visible_strokes {
                         renderer.draw_stroke_inner_shadows(element, stroke)?;
                     }
+                    canvas.restore();
                 }
             }
-            canvas.restore();
         }
     }
 

render-wasm/src/render/svg/snapshots/render_wasm__render__svg__tests__exports_closed_path_with_dotted_outer_image_stroke.snap

@@ -0,0 +1,8 @@
+---
+source: src/render/svg/tests.rs
+expression: svg
+---
+<?xml version="1.0" encoding="utf-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="132" height="112" viewBox="0 0 132 112"><defs><clipPath id="imgstrokeclip0" clipPathUnits="userSpaceOnUse">
+	<path transform="translate(16 16)" d="M-8 0C-8 1.6422184 -7.538126 3.1422181 -6.6143785 4.5C-7.538126 5.8577819 -8 7.3577814 -8 9C-8 11.737486 -6.8878965 13.904153 -4.6636891 15.5C-6.8878965 17.095848 -8 19.262514 -8 22C-8 24.737486 -6.8878965 26.904152 -4.6636891 28.5C-6.8878965 30.095848 -8 32.262516 -8 35C-8 37.737484 -6.8878965 39.904152 -4.6636891 41.5C-6.8878965 43.095848 -8 45.262516 -8 48C-8 50.737484 -6.8878965 52.904152 -4.6636891 54.5C-6.8878965 56.095848 -8 58.262516 -8 61C-8 63.737488 -6.8878965 65.904152 -4.6636891 67.5C-6.8878965 69.095848 -8 71.262512 -8 74C-8 78.851593 -5.5850339 81.506355 -0.75510108 81.964279C0.26408672 85.988091 2.8491201 88 7 88C9.7374859 88 11.904153 86.887894 13.5 84.663689C15.095847 86.887894 17.262514 88 20 88C22.737486 88 24.904152 86.887894 26.5 84.663689C28.095848 86.887894 30.262514 88 33 88C35.737484 88 37.904152 86.887894 39.499996 84.663689C41.095844 86.887894 43.262512 88 45.999996 88C48.737484 88 50.904152 86.887894 52.499996 84.663689C54.095844 86.887894 56.262512 88 59 88C61.737484 88 63.904152 86.887894 65.5 84.663689C67.095848 86.887894 69.262512 88 72 88C74.737488 88 76.904152 86.887894 78.5 84.663689C80.095848 86.887894 82.262512 88 85 88C87.737488 88 89.904152 86.887894 91.5 84.663689C93.095848 86.887894 95.262512 88 98 88C103.33334 88 106 85.333336 106 80C106 78.368233 105.54349 76.876137 104.63046 75.52372C106.87682 73.929276 108 71.754707 108 69C108 66.262512 106.88789 64.095848 104.66369 62.5C106.88789 60.904152 108 58.737484 108 56C108 53.262516 106.88789 51.095848 104.66369 49.5C106.88789 47.904152 108 45.737484 108 43C108 40.262516 106.88789 38.095848 104.66369 36.5C106.88789 34.904152 108 32.737484 108 30C108 27.262514 106.88789 25.095848 104.66369 23.5C106.88789 21.904152 108 19.737486 108 17C108 14.262514 106.88789 12.095847 104.66369 10.5C106.88789 8.9041529 108 6.7374859 108 4C108 -1.3333335 105.33334 -4 100 -4C99.343742 -4 98.697281 -3.9204535 98.060608 -3.7613606C96.55526 -6.5871201 94.201721 -8 91 -8C88.262512 -8 86.095848 -6.8878965 84.5 -4.6636891C82.904152 -6.8878965 80.737488 -8 78 -8C75.262512 -8 73.095848 -6.8878965 71.5 -4.6636891C69.904152 -6.8878965 67.737488 -8 65 -8C62.262516 -8 60.095848 -6.8878965 58.5 -4.6636891C56.904152 -6.8878965 54.737484 -8 52 -8C49.262516 -8 47.095848 -6.8878965 45.5 -4.6636891C43.904152 -6.8878965 41.737484 -8 39 -8C36.262516 -8 34.095848 -6.8878965 32.5 -4.6636891C30.904152 -6.8878965 28.737486 -8 26 -8C23.262514 -8 21.095848 -6.8878965 19.5 -4.6636891C17.904152 -6.8878965 15.737486 -8 13 -8C10.262514 -8 8.0958471 -6.8878965 6.5 -4.6636891C4.9041519 -6.8878965 2.7374856 -8 0 -8C-5.3333335 -8 -8 -5.3333335 -8 0ZM100 0L0 0L0 80L100 80L100 0Z" clip-rule="evenodd"/>
+</clipPath></defs><g clip-path="url(#imgstrokeclip0)"><image href="images/test-fill.svg" x="-16" y="-16" width="132" height="112" preserveAspectRatio="xMidYMid slice" transform="matrix(1 0 0 1 16 16)"/></g></svg>

render-wasm/src/render/svg/snapshots/render_wasm__render__svg__tests__exports_closed_path_with_solid_outer_image_stroke.snap

@@ -0,0 +1,8 @@
+---
+source: src/render/svg/tests.rs
+expression: svg
+---
+<?xml version="1.0" encoding="utf-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="132" height="112" viewBox="0 0 132 112"><defs><clipPath id="imgstrokeclip0" clipPathUnits="userSpaceOnUse">
+	<path transform="translate(16 16)" d="M-8 -8L108 -8L108 88L-8 88L-8 -8ZM100 0L0 0L0 80L100 80L100 0Z" clip-rule="evenodd"/>
+</clipPath></defs><g clip-path="url(#imgstrokeclip0)"><image href="images/test-fill.svg" x="-16" y="-16" width="132" height="112" preserveAspectRatio="xMidYMid slice" transform="matrix(1 0 0 1 16 16)"/></g></svg>

render-wasm/src/render/svg/snapshots/render_wasm__render__svg__tests__exports_open_path_with_image_stroke_and_caps.snap

@@ -0,0 +1,10 @@
+---
+source: src/render/svg/tests.rs
+expression: svg
+---
+<?xml version="1.0" encoding="utf-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="344" height="294" viewBox="0 0 344 294"><defs><clipPath id="imgstrokeclip0" clipPathUnits="userSpaceOnUse">
+	<path transform="translate(102 102)" d="M146 -6L0 -6L0 6L134 6L134 84L0 84L0 96L146 96L146 -6Z" clip-rule="evenodd"/>
+	<path transform="translate(102 102)" d="M-24 0L24 48L24 -48L-24 0Z"/>
+	<ellipse transform="translate(102 102)" cx="0" cy="90" rx="24" ry="24"/>
+</clipPath></defs><g clip-path="url(#imgstrokeclip0)"><image href="images/test-fill.svg" x="-48" y="-48" width="236" height="186" preserveAspectRatio="xMidYMid slice" transform="matrix(1 0 0 1 102 102)"/></g></svg>

render-wasm/src/render/svg/snapshots/render_wasm__render__svg__tests__exports_open_path_with_solid_center_image_stroke.snap

@@ -0,0 +1,8 @@
+---
+source: src/render/svg/tests.rs
+expression: svg
+---
+<?xml version="1.0" encoding="utf-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="96" viewBox="0 0 116 96"><defs><clipPath id="imgstrokeclip0" clipPathUnits="userSpaceOnUse">
+	<path transform="translate(8 8)" d="M104 -4L0 -4L0 4L96 4L96 76L0 76L0 84L104 84L104 -4Z" clip-rule="evenodd"/>
+</clipPath></defs><g clip-path="url(#imgstrokeclip0)"><image href="images/test-fill.svg" x="-8" y="-8" width="116" height="96" preserveAspectRatio="xMidYMid slice" transform="matrix(1 0 0 1 8 8)"/></g></svg>

render-wasm/src/render/svg/snapshots/render_wasm__render__svg__tests__exports_rect_with_dotted_center_image_stroke.snap

@@ -0,0 +1,8 @@
+---
+source: src/render/svg/tests.rs
+expression: svg
+---
+<?xml version="1.0" encoding="utf-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="108" height="88" viewBox="0 0 108 88"><defs><clipPath id="imgstrokeclip0" clipPathUnits="userSpaceOnUse">
+	<path transform="translate(-6 -6)" d="M10 14C12.666667 14 14 12.666667 14 10C14 7.333333 12.666667 6 10 6C7.333333 6 6 7.333333 6 10C6 12.666667 7.333333 14 10 14ZM23 14C25.666666 14 27 12.666667 27 10C27 7.333333 25.666666 6 23 6C20.333334 6 19 7.333333 19 10C19 12.666667 20.333334 14 23 14ZM36 14C38.666668 14 40 12.666667 40 10C40 7.333333 38.666668 6 36 6C33.333332 6 32 7.333333 32 10C32 12.666667 33.333332 14 36 14ZM49 14C51.666668 14 53 12.666667 53 10C53 7.333333 51.666668 6 49 6C46.333332 6 45 7.333333 45 10C45 12.666667 46.333332 14 49 14ZM62 14C64.666664 14 66 12.666667 66 10C66 7.333333 64.666664 6 62 6C59.333332 6 58 7.333333 58 10C58 12.666667 59.333332 14 62 14ZM75 14C77.666664 14 79 12.666667 79 10C79 7.333333 77.666664 6 75 6C72.333336 6 71 7.333333 71 10C71 12.666667 72.333336 14 75 14ZM88 14C90.666664 14 92 12.666667 92 10C92 7.333333 90.666664 6 88 6C85.333336 6 84 7.333333 84 10C84 12.666667 85.333336 14 88 14ZM101 14C103.66666 14 105 12.666667 105 10C105 7.333333 103.66666 6 101 6C98.333336 6 97 7.333333 97 10C97 12.666667 98.333336 14 101 14ZM110 18C112.66666 18 114 16.666666 114 14C114 11.333333 112.66666 10 110 10C107.33334 10 106 11.333333 106 14C106 16.666666 107.33334 18 110 18ZM10 23C12.666667 23 14 21.666666 14 19C14 16.333334 12.666667 15 10 15C7.333333 15 6 16.333334 6 19C6 21.666666 7.333333 23 10 23ZM110 31C112.66666 31 114 29.666666 114 27C114 24.333334 112.66666 23 110 23C107.33334 23 106 24.333334 106 27C106 29.666666 107.33334 31 110 31ZM10 36C12.666667 36 14 34.666668 14 32C14 29.333334 12.666667 28 10 28C7.333333 28 6 29.333334 6 32C6 34.666668 7.333333 36 10 36ZM110 44C112.66666 44 114 42.666668 114 40C114 37.333332 112.66666 36 110 36C107.33334 36 106 37.333332 106 40C106 42.666668 107.33334 44 110 44ZM10 49C12.666667 49 14 47.666668 14 45C14 42.333332 12.666667 41 10 41C7.333333 41 6 42.333332 6 45C6 47.666668 7.333333 49 10 49ZM110 57C112.66666 57 114 55.666668 114 53C114 50.333332 112.66666 49 110 49C107.33334 49 106 50.333332 106 53C106 55.666668 107.33334 57 110 57ZM10 62C12.666667 62 14 60.666668 14 58C14 55.333332 12.666667 54 10 54C7.333333 54 6 55.333332 6 58C6 60.666668 7.333333 62 10 62ZM110 70C112.66666 70 114 68.666664 114 66C114 63.333332 112.66666 62 110 62C107.33334 62 106 63.333332 106 66C106 68.666664 107.33334 70 110 70ZM10 75C12.666667 75 14 73.666664 14 71C14 68.333336 12.666667 67 10 67C7.333333 67 6 68.333336 6 71C6 73.666664 7.333333 75 10 75ZM110 83C112.66666 83 114 81.666664 114 79C114 76.333336 112.66666 75 110 75C107.33334 75 106 76.333336 106 79C106 81.666664 107.33334 83 110 83ZM10 88C12.666667 88 14 86.666664 14 84C14 81.333336 12.666667 80 10 80C7.333333 80 6 81.333336 6 84C6 86.666664 7.333333 88 10 88ZM17 94C19.666666 94 21 92.666664 21 90C21 87.333336 19.666666 86 17 86C14.333333 86 13 87.333336 13 90C13 92.666664 14.333333 94 17 94ZM30 94C32.666668 94 34 92.666664 34 90C34 87.333336 32.666668 86 30 86C27.333334 86 26 87.333336 26 90C26 92.666664 27.333334 94 30 94ZM43 94C45.666668 94 47 92.666664 47 90C47 87.333336 45.666668 86 43 86C40.333332 86 39 87.333336 39 90C39 92.666664 40.333332 94 43 94ZM55.999996 94C58.666664 94 59.999996 92.666664 59.999996 90C59.999996 87.333336 58.666664 86 55.999996 86C53.333328 86 51.999996 87.333336 51.999996 90C51.999996 92.666664 53.333328 94 55.999996 94ZM69 94C71.666664 94 73 92.666664 73 90C73 87.333336 71.666664 86 69 86C66.333336 86 65 87.333336 65 90C65 92.666664 66.333336 94 69 94ZM82 94C84.666664 94 86 92.666664 86 90C86 87.333336 84.666664 86 82 86C79.333336 86 78 87.333336 78 90C78 92.666664 79.333336 94 82 94ZM95 94C97.666664 94 99 92.666664 99 90C99 87.333336 97.666664 86 95 86C92.333336 86 91 87.333336 91 90C91 92.666664 92.333336 94 95 94ZM108 94C110.66666 94 112 92.666664 112 90C112 87.333336 110.66666 86 108 86C105.33334 86 104 87.333336 104 90C104 92.666664 105.33334 94 108 94Z" clip-rule="evenodd"/>
+</clipPath></defs><g clip-path="url(#imgstrokeclip0)"><image href="images/test-fill.svg" x="2" y="2" width="116" height="96" preserveAspectRatio="xMidYMid slice" transform="matrix(1 0 0 1 -6 -6)"/></g></svg>

render-wasm/src/render/svg/snapshots/render_wasm__render__svg__tests__exports_rect_with_solid_center_image_stroke.snap

@@ -0,0 +1,8 @@
+---
+source: src/render/svg/tests.rs
+expression: svg
+---
+<?xml version="1.0" encoding="utf-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="108" height="88" viewBox="0 0 108 88"><defs><clipPath id="imgstrokeclip0" clipPathUnits="userSpaceOnUse">
+	<path transform="translate(-6 -6)" d="M114 6L6 6L6 94L114 94L114 6ZM14 86L14 14L106 14L106 86L14 86Z" clip-rule="evenodd"/>
+</clipPath></defs><g clip-path="url(#imgstrokeclip0)"><image href="images/test-fill.svg" x="2" y="2" width="116" height="96" preserveAspectRatio="xMidYMid slice" transform="matrix(1 0 0 1 -6 -6)"/></g></svg>

render-wasm/src/render/svg/snapshots/render_wasm__render__svg__tests__exports_rect_with_solid_inner_image_stroke.snap

@@ -0,0 +1,8 @@
+---
+source: src/render/svg/tests.rs
+expression: svg
+---
+<?xml version="1.0" encoding="utf-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="80" viewBox="0 0 100 80"><defs><clipPath id="imgstrokeclip0" clipPathUnits="userSpaceOnUse">
+	<path d="M100 0L0 0L0 80L100 80L100 0ZM10 10L10 70L90 70L90 10L10 10Z" clip-rule="evenodd"/>
+</clipPath></defs><g clip-path="url(#imgstrokeclip0)"><image href="images/test-fill.svg" x="0" y="0" width="100" height="80" preserveAspectRatio="xMidYMid slice" transform="matrix(1 0 0 1 0 0)"/></g></svg>

render-wasm/src/render/svg/snapshots/render_wasm__render__svg__tests__exports_rect_with_solid_outer_image_stroke.snap

@@ -0,0 +1,8 @@
+---
+source: src/render/svg/tests.rs
+expression: svg
+---
+<?xml version="1.0" encoding="utf-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="100" viewBox="0 0 120 100"><defs><clipPath id="imgstrokeclip0" clipPathUnits="userSpaceOnUse">
+	<path transform="translate(-10 -10)" d="M10 10L130 10L130 110L10 110L10 10ZM120 20L20 20L20 100L120 100L120 20Z" clip-rule="evenodd"/>
+</clipPath></defs><g clip-path="url(#imgstrokeclip0)"><image href="images/test-fill.svg" x="0" y="0" width="140" height="120" preserveAspectRatio="xMidYMid slice" transform="matrix(1 0 0 1 -10 -10)"/></g></svg>

render-wasm/src/render/svg/tests.rs

@@ -1257,3 +1257,239 @@ fn exports_image_fill_on_frame() {
     );
     insta::assert_snapshot!(svg);
 }
+
+fn assert_linked_image_stroke(svg: &str) {
+    assert!(
+        svg.contains("<image") && svg.contains(TEST_IMAGE_URL),
+        "image stroke must emit a linked <image>: {svg}"
+    );
+    assert!(
+        svg.contains("imgstrokeclip") && svg.contains("clip-path=\"url(#"),
+        "image stroke must clip to the stroke outline: {svg}"
+    );
+    assert!(
+        !svg.contains("data:image"),
+        "must not base64-embed the stroke image: {svg}"
+    );
+}
+
+fn assert_evenodd_stroke_clip(svg: &str) {
+    assert!(
+        svg.contains("clip-rule=\"evenodd\""),
+        "stroke clip must use clip-rule=evenodd: {svg}"
+    );
+    assert!(
+        !svg.contains("fill-rule=\"evenodd\""),
+        "clipPath should rewrite fill-rule to clip-rule: {svg}"
+    );
+}
+
+#[test]
+fn exports_rect_with_solid_center_image_stroke() {
+    let mut pool = ShapesPool::new();
+    let id = uid(1);
+    let image_id = uid(42);
+    add_stroked_rect(
+        &mut pool,
+        id,
+        Uuid::nil(),
+        (10.0, 10.0, 110.0, 90.0),
+        image_solid_stroke(StrokeKind::Center, 8.0, image_id),
+    );
+
+    let svg = render_with(&pool, id, |resources| {
+        resources
+            .images
+            .set_source_url(image_id, TEST_IMAGE_URL.to_string());
+    });
+
+    assert_linked_image_stroke(&svg);
+    assert_evenodd_stroke_clip(&svg);
+    insta::assert_snapshot!(svg);
+}
+
+#[test]
+fn exports_rect_with_solid_inner_image_stroke() {
+    let mut pool = ShapesPool::new();
+    let id = uid(1);
+    let image_id = uid(42);
+    add_stroked_rect(
+        &mut pool,
+        id,
+        Uuid::nil(),
+        (0.0, 0.0, 100.0, 80.0),
+        image_solid_stroke(StrokeKind::Inner, 10.0, image_id),
+    );
+
+    let svg = render_with(&pool, id, |resources| {
+        resources
+            .images
+            .set_source_url(image_id, TEST_IMAGE_URL.to_string());
+    });
+
+    assert_linked_image_stroke(&svg);
+    assert_evenodd_stroke_clip(&svg);
+    insta::assert_snapshot!(svg);
+}
+
+#[test]
+fn exports_rect_with_solid_outer_image_stroke() {
+    let mut pool = ShapesPool::new();
+    let id = uid(1);
+    let image_id = uid(42);
+    add_stroked_rect(
+        &mut pool,
+        id,
+        Uuid::nil(),
+        (20.0, 20.0, 120.0, 100.0),
+        image_solid_stroke(StrokeKind::Outer, 10.0, image_id),
+    );
+
+    let svg = render_with(&pool, id, |resources| {
+        resources
+            .images
+            .set_source_url(image_id, TEST_IMAGE_URL.to_string());
+    });
+
+    assert_linked_image_stroke(&svg);
+    assert_evenodd_stroke_clip(&svg);
+    insta::assert_snapshot!(svg);
+}
+
+#[test]
+fn exports_rect_with_dotted_center_image_stroke() {
+    let mut pool = ShapesPool::new();
+    let id = uid(1);
+    let image_id = uid(42);
+    add_stroked_rect(
+        &mut pool,
+        id,
+        Uuid::nil(),
+        (10.0, 10.0, 110.0, 90.0),
+        image_dotted_stroke(StrokeKind::Center, 8.0, image_id),
+    );
+
+    let svg = render_with(&pool, id, |resources| {
+        resources
+            .images
+            .set_source_url(image_id, TEST_IMAGE_URL.to_string());
+    });
+
+    assert_linked_image_stroke(&svg);
+    assert_evenodd_stroke_clip(&svg);
+    insta::assert_snapshot!(svg);
+}
+
+#[test]
+fn exports_closed_path_with_solid_outer_image_stroke() {
+    let mut pool = ShapesPool::new();
+    let id = uid(1);
+    let image_id = uid(42);
+    add_stroked_closed_path(
+        &mut pool,
+        id,
+        Uuid::nil(),
+        (0.0, 0.0, 100.0, 80.0),
+        image_solid_stroke(StrokeKind::Outer, 8.0, image_id),
+    );
+
+    let svg = render_with(&pool, id, |resources| {
+        resources
+            .images
+            .set_source_url(image_id, TEST_IMAGE_URL.to_string());
+    });
+
+    assert_linked_image_stroke(&svg);
+    assert_evenodd_stroke_clip(&svg);
+    insta::assert_snapshot!(svg);
+}
+
+#[test]
+fn exports_open_path_with_solid_center_image_stroke() {
+    let mut pool = ShapesPool::new();
+    let id = uid(1);
+    let image_id = uid(42);
+    add_stroked_open_path(
+        &mut pool,
+        id,
+        Uuid::nil(),
+        (0.0, 0.0, 100.0, 80.0),
+        image_solid_stroke(StrokeKind::Center, 8.0, image_id),
+    );
+
+    let svg = render_with(&pool, id, |resources| {
+        resources
+            .images
+            .set_source_url(image_id, TEST_IMAGE_URL.to_string());
+    });
+
+    assert_linked_image_stroke(&svg);
+    assert_evenodd_stroke_clip(&svg);
+    insta::assert_snapshot!(svg);
+}
+
+#[test]
+fn exports_open_path_with_image_stroke_and_caps() {
+    // Caps go into the clip silhouette with the outline. Image dest must grow
+    // past stroke.delta() so triangle/circle markers stay textured.
+    let mut pool = ShapesPool::new();
+    let id = uid(1);
+    let image_id = uid(42);
+    let mut stroke = image_solid_stroke(StrokeKind::Center, 12.0, image_id);
+    stroke.cap_start = Some(StrokeCap::TriangleArrow);
+    stroke.cap_end = Some(StrokeCap::CircleMarker);
+    add_stroked_open_path(&mut pool, id, Uuid::nil(), (0.0, 0.0, 140.0, 90.0), stroke);
+
+    let svg = render_with(&pool, id, |resources| {
+        resources
+            .images
+            .set_source_url(image_id, TEST_IMAGE_URL.to_string());
+    });
+
+    assert_linked_image_stroke(&svg);
+    assert_evenodd_stroke_clip(&svg);
+    let clip = svg
+        .split("<clipPath")
+        .nth(1)
+        .and_then(|s| s.split("</clipPath>").next())
+        .expect("imgstroke clipPath");
+    assert!(
+        clip.matches("<path ").count() >= 2
+            || clip.contains("<circle")
+            || clip.contains("<ellipse"),
+        "clip must include cap geometry besides the stroke outline: {svg}"
+    );
+    // TriangleArrow margin is width*4 = 48.
+    assert!(
+        svg.contains(r#"x="-48""#)
+            && svg.contains(r#"y="-48""#)
+            && svg.contains(r#"width="236""#)
+            && svg.contains(r#"height="186""#),
+        "image dest must cover cap margin (48), not only stroke.delta: {svg}"
+    );
+    insta::assert_snapshot!(svg);
+}
+
+#[test]
+fn exports_closed_path_with_dotted_outer_image_stroke() {
+    let mut pool = ShapesPool::new();
+    let id = uid(1);
+    let image_id = uid(42);
+    add_stroked_closed_path(
+        &mut pool,
+        id,
+        Uuid::nil(),
+        (0.0, 0.0, 100.0, 80.0),
+        image_dotted_stroke(StrokeKind::Outer, 8.0, image_id),
+    );
+
+    let svg = render_with(&pool, id, |resources| {
+        resources
+            .images
+            .set_source_url(image_id, TEST_IMAGE_URL.to_string());
+    });
+
+    assert_linked_image_stroke(&svg);
+    assert_evenodd_stroke_clip(&svg);
+    insta::assert_snapshot!(svg);
+}

render-wasm/src/render/vector.rs

@@ -1093,13 +1093,49 @@ fn draw_single_stroke(
     Ok(())
 }
 
+/// Shape path in local coords for SVG stroke outline expansion.
+fn svg_stroke_shape_path(shape: &Shape) -> Option<Path> {
+    match &shape.shape_type {
+        Type::Rect(r) => Some(Path::new(rect_segments_local(shape, r.corners))),
+        Type::Frame(f) => Some(Path::new(rect_segments_local(shape, f.corners))),
+        Type::Circle => Some(Path::new(circle_segments_local(shape))),
+        Type::Path(_) | Type::Bool(_) => {
+            let path = shape.shape_type.path()?;
+            let mut local = path.clone();
+            if let Some(t) = shape.to_path_transform() {
+                local.transform(&t);
+            }
+            Some(local)
+        }
+        Type::Text(_) | Type::SVGRaw(_) | Type::Group(_) => None,
+    }
+}
+
+fn svg_stroke_solid_outline(stroke: &Stroke, is_open: bool) -> Option<bool> {
+    let kind = stroke.render_kind(is_open);
+    match stroke.style {
+        StrokeStyle::Solid => match kind {
+            // Solid Center already serializes as a native SVG stroke.
+            StrokeKind::Center => None,
+            StrokeKind::Inner | StrokeKind::Outer => {
+                if is_open {
+                    None
+                } else {
+                    Some(true)
+                }
+            }
+        },
+        // PathEffects (path_1d / dash) do not survive SkSVGDevice; expand them.
+        StrokeStyle::Dotted | StrokeStyle::Dashed | StrokeStyle::Mixed => Some(false),
+    }
+}
+
 /// Draws a stroke as a filled path outline for SVG export.
 ///
 /// Handles solid Inner/Outer and all dotted/dashed/mixed alignments (including
 /// Center and open paths, which force Center). Returns `true` when handled.
 fn draw_svg_stroke_as_fill(canvas: &Canvas, shape: &Shape, stroke: &Stroke) -> bool {
     let is_open = shape.is_open();
-    let kind = stroke.render_kind(is_open);
 
     // Per-side rect/frame strokes already expand to an evenodd band in
     // `draw_stroke_on_rect`. `stroke_to_path` only knows a uniform width.
@@ -1109,41 +1145,12 @@ fn draw_svg_stroke_as_fill(canvas: &Canvas, shape: &Shape, stroke: &Stroke) -> b
         return false;
     }
 
-    let solid_outline = match stroke.style {
+    let Some(solid_outline) = svg_stroke_solid_outline(stroke, is_open) else {
-        StrokeStyle::Solid => match kind {
+        return false;
-            // Solid Center already serializes as a native SVG stroke.
-            StrokeKind::Center => return false,
-            StrokeKind::Inner | StrokeKind::Outer => {
-                if is_open {
-                    return false;
-                }
-                true
-            }
-        },
-        // PathEffects (path_1d / dash) do not survive SkSVGDevice; expand them.
-        StrokeStyle::Dotted | StrokeStyle::Dashed | StrokeStyle::Mixed => false,
     };
 
-    // Local (untransformed) geometry: the SVG leaf canvas already has
+    let Some(shape_path) = svg_stroke_shape_path(shape) else {
-    // `centered_transform`. Using `rect_segments` / `circle_segments` here
+        return false;
-    // would bake the same transform into the path and double-rotate.
-    // Path/Bool content is stored in parent space; `to_path_transform`
-    // undoes that so the outline matches `get_skia_path` (fills) under CTM.
-    let shape_path = match &shape.shape_type {
-        Type::Rect(r) => Path::new(rect_segments_local(shape, r.corners)),
-        Type::Frame(f) => Path::new(rect_segments_local(shape, f.corners)),
-        Type::Circle => Path::new(circle_segments_local(shape)),
-        Type::Path(_) | Type::Bool(_) => match shape.shape_type.path() {
-            Some(path) => {
-                let mut local = path.clone();
-                if let Some(t) = shape.to_path_transform() {
-                    local.transform(&t);
-                }
-                local
-            }
-            None => return false,
-        },
-        Type::Text(_) | Type::SVGRaw(_) | Type::Group(_) => return false,
     };
 
     let Some(outline) = stroke_to_path(
@@ -1166,18 +1173,88 @@ fn draw_svg_stroke_as_fill(canvas: &Canvas, shape: &Shape, stroke: &Stroke) -> b
     // where open-path caps are drawn. Overlay them here in local path space
     // (same as fills / the outline above under the leaf CTM).
     if is_open {
-        if let Some(cap_path) = transformed_skia_path(shape) {
+        paint_svg_stroke_caps(canvas, shape, stroke, false);
-            let cap_paint =
-                stroke.to_stroked_paint(true, &shape.selrect, shape.svg_attrs.as_ref(), true);
-            super::strokes::handle_stroke_caps(
-                &cap_path, stroke, canvas, true, &cap_paint, None, true,
-            );
-        }
     }
 
     true
 }
 
+/// Opaque stroke region for SVG clipPath silhouettes.
+///
+/// Expands every alignment (including solid Center) to a filled outline so we
+/// do not rely on save_layer + SrcIn. Returns false when there is nothing to draw.
+pub(super) fn paint_svg_stroke_silhouette(
+    canvas: &Canvas,
+    shape: &Shape,
+    stroke: &Stroke,
+    scale: f32,
+) -> bool {
+    let is_open = shape.is_open();
+
+    if stroke.per_side_widths().is_some()
+        && matches!(shape.shape_type, Type::Rect(_) | Type::Frame(_))
+    {
+        let corners = shape.shape_type.corners();
+        let mut paint = stroke.to_paint(&shape.selrect, shape.svg_attrs.as_ref(), true);
+        paint.set_shader(None);
+        paint.set_color(skia::Color::BLACK);
+        super::strokes::draw_stroke_on_rect(
+            canvas,
+            stroke,
+            &shape.selrect,
+            &corners,
+            &paint,
+            scale,
+            None,
+            None,
+            true,
+        );
+        return true;
+    }
+
+    let Some(shape_path) = svg_stroke_shape_path(shape) else {
+        return false;
+    };
+
+    // Expand Center too: a native stroke attribute cannot clip an image.
+    let solid_outline = matches!(stroke.style, StrokeStyle::Solid);
+    let Some(outline) = stroke_to_path(
+        stroke,
+        &shape_path,
+        None,
+        &shape.selrect,
+        shape.svg_attrs.as_ref(),
+        solid_outline,
+    ) else {
+        return false;
+    };
+
+    let mut paint = Paint::default();
+    paint.set_style(skia::PaintStyle::Fill);
+    paint.set_anti_alias(true);
+    paint.set_color(skia::Color::BLACK);
+    canvas.draw_path(&outline.to_skia_path(shape.svg_attrs.as_ref()), &paint);
+
+    if is_open {
+        paint_svg_stroke_caps(canvas, shape, stroke, true);
+    }
+
+    true
+}
+
+fn paint_svg_stroke_caps(canvas: &Canvas, shape: &Shape, stroke: &Stroke, opaque: bool) {
+    let Some(cap_path) = transformed_skia_path(shape) else {
+        return;
+    };
+    let mut cap_paint =
+        stroke.to_stroked_paint(true, &shape.selrect, shape.svg_attrs.as_ref(), true);
+    if opaque {
+        cap_paint.set_shader(None);
+        cap_paint.set_color(skia::Color::BLACK);
+    }
+    super::strokes::handle_stroke_caps(&cap_path, stroke, canvas, true, &cap_paint, None, true);
+}
+
 /// Draws a stroke's geometry by shape type, kind and dash style. Rect/Circle
 /// reuse the GPU stroke fns (dash/alignment parity); Path/Bool use double-width
 /// + clip/clear + caps. `opaque` forces black for an image-stroke silhouette.