Option to not wrap SVG images into <img> tag?

[liquidcarbon]

Hi, I work with a lot of SVG images generated in the outputs of Jupyter notebooks.
Quarto extracts the images from the output cells, saves them as individual SVG files and wraps them into <img> tags, which makes them lose native SVG functionality (such as the ability to have clickable hyperlinks in them - like the text in blue here).

Is there a way to keep SVGs as native SVGs?

[cscheid]

Can you share a full, minimal example? Thanks!

[liquidcarbon]

The input is this notebook.

Github says "don't support that file type" on trying upload ipynb, so I renamed it .ipynb.zip - just remove the .zip part, it's not a real zipped notebook.
2023-02-04-rdkitting.ipynb.zip

[liquidcarbon]

but maybe worth mentioning that it does the same thing to SVG files when you call them using Markdown ![]() syntax. The also get packed into <img>

[cscheid]

I see. This is coming from Pandoc, and it's the desired behavior most of the time.

I think the best way to do this is for you to solve it yourself with a Lua filter, where you'd search for the Image AST node, find the svg files you're interested in replacing, and then replacing the image with a RawBlock node that has the contents you're seeking. I haven't tested this, though, and it might have negative interactions with our crossref system, sadly, if your SVG references are in places where we expect a block with an image.

[liquidcarbon]

Uff, that's all new to me. Do you have some pointers?

[cscheid]

I apologize - it's definitely a bit of a learning curve. We have some pointers here: https://quarto.org/docs/extensions/filters.html#overview

Unfortunately, I don't think we want to add this feature to quarto ourselves, because it won't always work (the svg is interpreted in a different CSS context, etc). So the best solution really is a filter in the situations where it's needed, but you're right, it will require learning about Pandoc's filters and Lua.

[liquidcarbon]

Found a workaround:

class SneakySVG(str):
    """A string that is rendered as HTML code."""
    def show(self):
        from IPython.display import HTML
        return HTML(self)

Call like so from a notebook:

SneakySVG("""
<svg>

</svg>
""").show()

When you render the notebook, you get SVG right in your rendered page, and no separate _files folder with output files generated. Win!

And it even responds to additional styling you put into root /styles.css :D

[gly-git]

Hello,
First, thank you for the sharing.
I am facing the same need as liquidcarbon.
I have first followed the recommandation of cscheid and wrote a Lua filter to have "clickable" links in a SVG image. The problem I am facing with this approach is that the SVG image do not respects the specified layout (e.g. {.column-body}) of the page.
I have the same result with the workaround suggested by liquidcarbon.
Is there a way to apply the specified layout to a raw SVG ?