在markdown单元格中内联svg图像

Question

我的问题与出版自备笔记本的愿望有关

我的笔记本中有一个Markdown单元格,它引用了一个外部图像文件

so far

![](example.svg "Example")

so good

是否可以内联MD单元格中的文件内容？

Answer 1

此方法不需要互联网连接......

1. base64编码<svg>标记(例如,在base64encode.org上粘贴svg )
2. 对base64编码的字符串进行URL编码(例如,在urlencoder.org上粘贴base64字符串)
3. 将结果字符串放入 ![alt text](data:image/svg+xml,<paste_your_svg_string_here> "title")

结果将是一个类似于以下的字符串,可以插入Jupyter Notebook Markdown单元格...

![svg image](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22red%22%20/%3E%3C/svg%3E%0A)

Answer 2

是的，可以在 jupyter notebook 中包含 SVG 图像。

1. 使用降价语法：

![Alt text](https://mirrors.creativecommons.org/presskit/logos/cc.logo.svg)

2. 使用 HTML：

<img style="float: right;" src="https://mirrors.creativecommons.org/presskit/logos/cc.logo.svg">

我在 Jupyter Notebook Server 版本 4.3.1 上尝试了这些选项

Answer 3

如果有人感兴趣，这里就是我分享一个自备笔记本的方法。

我半生半熟的解决方案是拆分Markdown单元并插入
display(HTML(open('example.svg').read()))
替换Markdown指令的代码单元![](example.svg "Example")。

由于文件内容存储在输出单元格中，因此可以使用nbviewer之类的服务（具有所有局限性）以自包含的方式共享保存的笔记本。如果有人选择下载我的笔记本，他们也会下载我的SVG代码，不是吗？

OTOH，如果我共享使用Microsoft Azure笔记本之类的服务（至少在当前的2017年春季，“预览”版本允许任何具有Microsoft帐户的人与我的笔记本进行交互），任何试图运行该代码单元的人都会受到伤害—但是，可以使用Markdown image伪指令指向通过HTTP服务的文件来实现跨主机解决方案。但是这种交叉托管是我一开始要避免的事情...不要问我为什么：-（...

Answer 4

我想从我收到的答案和评论中提炼出一些智慧。Shammel Lee的答案是最接近可接受的答案，这个答案背后的想法是正确的，但是太多的细节让我觉得我无法接受。

\n

\n

1. 求助于外部网站，我确实要发布笔记本，但我的文件和我的数字身份的其他详细信息不关任何人的事（尽可能:)，特别是当 Python 标准库完全可以胜任这项任务。

   \n
\n

2. 对 SVG 字符串进行 uu 编码通常是不必要的步骤。

   \n
\n

3. 正如Aristide的评论中所述，非 uuencoded 字符串的标头与 uuencoded 字符串标头之间缺少区别。

   \n
\n

\n

我编写了一个 Python 脚本，它将引用的 SVG 内容以及标题等复制到剪贴板

\n

$ python3 svg2clip figure03.svg\n

\n

这样您就可以将所需的内容粘贴（Ctrl-V）到 Markdown 单元格中。

\n

from sys import argv\nfrom urllib import parse\nfrom subprocess import PIPE, Popen, TimeoutExpired\n\nsvg = open(argv[1]).read()\ninlined = (\'![svg image](data:image/svg+xml,\' +\n           parse.quote(svg) +\n           \')\'\n           ).encode(\'utf8\')\np = Popen(["xclip", "-selection", "clipboard"],\n          stdin=PIPE, stdout=PIPE)\ntry:\n    p.communicate(inlined, timeout=0.020)\nexcept TimeoutExpired:\n    pass\n

\n\n

PS1 \xe2\x80\x94 如果有人知道如何以更简单的方式终止命令执行，请评论...
\nPS2 \xe2\x80\x94 该脚本在 Linux 上运行，xclip通常存在或可以轻松安装，但是事实上类似的实用程序也适用于不同的环境，只需修改Popen第一个参数即可。

\n