在降价单元格中内联 svg 图像答案

【问题标题】：inlining svg image in a markdown cell在降价单元格中内联 svg 图像
【发布时间】：2017-05-23 15:43:42
【问题描述】：

我的问题与出版独立笔记本的愿望有关

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

so far

![](example.svg "Example")

so good

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

【问题讨论】：

如果单元格接受 HTML，我可以简单地复制单元格内的文件内容。 — %%html 单元魔术不是一个合理的解决方案，因为我不能保证笔记本在分发时可以访问我用来隐藏令人尴尬的长输入单元格的相同 nbextension。 — 然而，基于display() 的其他可能性连接到公开外部引用或整个文件内容的代码单元... — 假设的 Markdown 解决方案对我很有吸引力，因为同一个单元要么未渲染（SVG 代码可见）或渲染（只有图像可见）。

标签： markdown jupyter-notebook jupyter

【解决方案1】：

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

base64 编码 <svg> 标记（例如，将 svg 粘贴到 base64encode.org）
对 base64 编码的字符串进行 URL 编码（例如，将 base64 字符串粘贴到 urlencoder.org）
将生成的字符串放入![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)

【讨论】：

一个可以接受的答案，在我看来，详细说明了我如何执行你只是勾画的步骤。
@gboffi 如果这满足您的原始问题，请标记为正确答案，或建议如何使此答案更清晰。谢谢。
无需 base64 编码 <svg> 标记即可为我工作。
这是 IMO 的最佳答案 :) 谢谢@shammel-lee
对于那些正在寻找一种方法来做到这一点而不求助于某些外部网站的人来说，来自 Python 的 urllib 有一个可以为你做这件事的函数；见this blog post。

【解决方案2】：

如果有人感兴趣，这就是我所做的分享一个独立的笔记本。

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

因为文件内容存储在输出单元格中，所以保存的笔记本可以使用nbviewer 之类的服务以自包含的方式共享，但有其所有限制。如果有人选择下载我的笔记本，他们在某种程度上也会下载我的 SVG 代码，不是吗？

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

【讨论】：

【解决方案3】：

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

使用降价语法：

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

使用 HTML：

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

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

【讨论】：