feat(exporter::svg): embed transparent html elements (#379)

* feat(exporter::svg): embed html elements

* dev: update example

contrib/templates/xhtml/lib.typ

@@ -0,0 +1,45 @@
+
+/// HTML extension
+#let xhtml(outer-width: 1024pt, outer-height: 768pt, inner-width: none, inner-height: none, content) = {
+  let t = content.func()
+  let content = if content.func() == raw {
+    content.text
+  } else {
+    content
+  }
+
+  let inner-width = if inner-width == none {
+    outer-width
+  } else {
+    inner-width
+  }
+
+    let inner-height = if inner-height == none {
+        outer-height
+    } else {
+        inner-height
+    }
+
+  let html-embed = {
+    "<svg viewBox=\"0 0 "
+    str(inner-width.pt())
+    " "
+    str(inner-height.pt())
+    "\""
+    " width=\""
+    str(outer-width.pt())
+    "\" height=\""
+    str(outer-height.pt())
+    "\" xmlns=\"http://www.w3.org/2000/svg\">"
+    "<foreignObject width=\""
+    str(inner-width.pt())
+    "\" height=\""
+    str(inner-height.pt())
+    "\">"
+    content
+    "</foreignObject>"
+    "</svg>"
+  }
+
+  image.decode(html-embed, alt: "!typst-inlined-svg")
+}

exporter/svg/src/backend/mod.rs

@@ -557,6 +557,13 @@ fn render_path(path: &ir::PathItem) -> SvgText {
 /// Render a [`ir::ImageItem`] into svg text.
 #[comemo::memoize]
 fn render_image_item(img: &ir::ImageItem) -> SvgText {
+    match &img.image.alt {
+        Some(t) if t.as_ref() == "!typst-inlined-svg" => {
+            return SvgText::Plain(String::from_utf8(img.image.data.clone()).unwrap())
+        }
+        _ => {}
+    }
+
     SvgText::Plain(render_image(&img.image, img.size, true, ""))
 }
 

fuzzers/corpora/visualize/video_00.typ

@@ -0,0 +1,23 @@
+
+#import "/contrib/templates/xhtml/lib.typ": xhtml
+
+#set page(height: auto, width: auto)
+
+= Multi-media in Typst
+
+This is a embed video.
+
+#xhtml(outer-width: 640pt, outer-height: 360pt, ```html
+<iframe
+  src="https://player.bilibili.com/player.html?aid=80433022&amp;bvid=BV1GJ411x7h7&amp;cid=137649199&amp;page=1&amp;danmaku=0&amp;autoplay=0"
+  scrolling="no"
+  border="0"
+  width="100%"
+  height="100%"
+  frameborder="no"
+  framespacing="0"
+  allowfullscreen="true"
+></iframe>
+```)
+
+That is a embed video.