Feature request: Enable svg elements with `video` embeds

[Nathan Jessurun]

Would it be at all possible to support video in the preview pane? Consider the following SVG image:

<svg xmlns="http://www.w3.org/2000/svg">
<foreignObject width="100%" height="100%">
    <video xmlns="http://www.w3.org/1999/xhtml" width="100%" height="100%" controls="" >
        <source src="<video-path>.mp4" type="video/mp4" />
    </video>
</foreignObject>
</svg>

typst-preview is happy to render the stand-in video viewer, but since the data is converted to an image, the video of course does not play:

It would be a tremendous utility for polylux slides to embed video content in this manner, as I am already using the browser slide preview to display the presentation. For this reason, it is acceptable that embeds will not work in the exported SVG or PDF -- especially since I can simply wrap the image in a link that refers to the original file.

One method is to add a vscode setting to specify the name of a label attached to video content:

#image.decode(svg-video)<video>

would then indicate the image should not be base64 but rather directly inserted.

Alternatively, is there any user-facing API to perform this sort of conversion independent from the core previewer? As far as I can tell, labels are not associated with object IDs in the browser preview, so there's no way to know from the user side where to make a replacement:

Thanks!

[Myriad-Dreamin]

Hi, typst.ts already supports that feature. It is here: https://github.com/Myriad-Dreamin/typst.ts/blob/5121d2e9c093c9ff24bd5ebb593bdea8e28c7d77/exporter/svg/src/lib.rs#L54-L55

/// Whether to enable inlined svg.
const ENABLE_INLINED_SVG: bool;

The inlined SVGs are those SVG elements directly put in the parent SVG. That means you can embed any HTML code in an inlined SVG.

See for a use case: https://github.com/Myriad-Dreamin/typst.ts/blob/main/fuzzers/corpora/visualize/video_00.typ

This is an embedded 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>
```)

However, this feature is disabled. The only blocking thing is that since I feel I don't have some practical idea to do sanitizing on HTML inputs for security consideration.

It would be appreciate if we can discuss and find a way on how to make it secure in this issue. @ntjess

[Nathan Jessurun]

Interesting, thanks for the information. I also see why it would be advantageous to keep this feature disabled until Typst natively supports HTML.

In the meantime, how do you feel about only allowing inline previews in the vscode extension, keeping them disabled in the compiler itself? They can be exposed via an experimental: enable inline SVG setting. I would prefer this option.
Advantages:

• No expectation of inline behavior in compiled documents
• Plays nice with the "slide mode" setting
• Since the flag is "experimental", and only shows effects during development and not on the static output, it can be deactivated without harming users once typst provides more HTML support
• You could color the typst preview status icon orange to indicate "enabled unsafe html" is active, thereby alerting users of the potential dangers if they don't sanitize their own images

Disadvantage:

• Everything that comes with unsanitized HTML, but at least restricted to users who intentionally accept the risk and have a visual warning of this
• Doesn't persist to SVG exports. But I consider this a partial advantage since it maintains similar outputs across all export formats.

---

Option 2: support an <typst-ts-inline-svg> label that, if attached to an object, allows even more scoped inlining.
Advantages:

• Even higher scoping capability
• A simple show image.where(format: svg) rule can attach this label automatically if every image should have this behavior

Disadvantages:

• Everything that comes with "magic" behavior
• Potentially harder to implement
• Each object can only have 1 label, so users who want a different label will have to wrap the image in a box or something
• Harder to undo/unsupport once typst enables HTML output

[Myriad-Dreamin]

@Enter-tainer

[Wenzhuo Liu]

@Enter-tainer

I think we can add a cli arg to control whether to enable ENABLE_INLINED_SVG. And in vscode we can use a config to control this. We can also add sufficient warn to tell user what's happening.