Allow inlining SVG

[jordemort]

This adds an inline parameter, which defaults to false. When it is false, the plugin operates as it previously did. When it is true, instead of adding an image with a data URL, it adds a div and inlines the SVG into the document.

This probably still needs a test.

[jordemort]

A demo of inline SVGs is here: https://jordemort.dev/blog/remark-all-the-things/

[Airkro]

Thanks, I will merge this when I have time to add some test cases.

[jordemort]

I've run into some problems with the inlined SVGs. Some of them contain <style> tags, which then leak out and affect other elements in the document. I've been able to work around this using rehype-rewrite, but it is pretty complex:

https://gist.github.com/jordemort/def0bd5019607cc4047785b2dfa82268

Essentially, what I did was:

• Generate a random UUID for the SVG
• Add that UUID as a class to every element inside the SVG
• Rewrite any <style> tags to add :where(.${uuid} *) to each selector

Now I understand the benefits of stuffing things in an <img> tag :)

Anyway, that seems like a lot of logic to bundle up in this plugin, but if you are interested, I can try to integrate it. Up to you if you still want to merge this; maybe with a note that it is possibly dangerous and that folks should take care to rewrite the SVG?

[Airkro]

I tend to keep this plugin pure, just show the diagram with img URL / inline SVG or whatever. The post-processing of the image data is left to a custom function option, because the user may want to process the SVG in many different ways, for example, I originally planned to use svgo.

[Airkro]

@jordemort thank you for your opinion.

I publish remark-kroki@0.2.5 to offer 3 ways to embed SVG.

The object tag allows you interactivity with SVG, and has no style pollution (2 ways: SVG -> HTML, HTML -> SVG).

remarkKroki({ output: 'object-base64' })

[Airkro]

I will add a custom function option in the next version to allow users to edit SVG source code.

If you still want to use inline SVG, you can wait for that, to use your rewrite logic or svgo to avoid style pollution of inline SVG.

But even if you remove all