Standalone HTML as a means to "inline" SVG images (as opposed to <img> tag)?

[fuhrmanator]

In my book project, I use a custom (xkcd Script) font within my SVG images for a "handwritten" effect. It works in the PDF output, because the system that renders has the custom font installed as a TTF.

For the HTML output, however, I must link to the font in CSS. Unfortunately, SVG that is loaded within an IMG tag has security restrictions on CSS with fonts, so it's not working. There's also a way to embed the font in each SVG, but that makes them really much bigger and I don't have that much control over the SVG in the pipeline that generates them (PlantUML).

Apparently, inlining SVG in the HTML will solve my problem (I can declare with CSS the font-face in the HEAD of the HTML page and SVG inlined will find it). So, I found the standalone HTML options of Quarto, thinking that they would do the trick for me. I think I used this in the past when my PlantUML filters weren't producing images in the media_bag (which now works, so I turned off the feature).

I've tried embed-resources: true in the html part of the _quarto.yml, but it doesn't appear to change anything with my SVGs. They're still inside IMG tags. I have only tried previews (not render).

Is there a way to inline SVG images (produced by filters, of course) when rendering HTML?

I've seen the filter option (someone already wanted to do this with knitr), which I'm probably going to try I created and use if there are no other ways.

Edit: embed-resources: true changes the URLs of the IMG tags to be data: URLs, which effectively embeds the SVG without going to a file. What I'm looking for is that the actual SVG elements are in the place of the IMG tag.

[mcanouil]

You could use a post-render script (or a filter to reformat according to your needs), because I am not sure what you want is a thing right now in Pandoc.

See https://quarto.org/docs/projects/scripts.html#pre-and-post-render

[fuhrmanator]

It's true that the spirit of standalone is to make it a single (shareable) file. The filter I wrote (I linked to it in my question) works and is pretty short (but I don't convert all SVGs, only ones that are generated, that is, in the media bag).

[cscheid]

Just for clarification, embed-resources won't convert <img src="foo.svg"/> to <svg></svg> because they're actually semantically different (for example, in how javascript contexts work). So your filter is precisely the right solution for the problem.