web-dev-qa-db-ja.com

マークダウンセルにsvg画像をインライン化

私の質問は、自己完結型のノートブックを公開したいという願いに関連しています

私のノートブックには、外部画像ファイルを参照するマークダウンセルがあります

so far

![](example.svg "Example")

so good

MDセルにファイルの内容をインライン化することは可能ですか？

markdownjupyter-notebookjupyter
12
gboffi

この方法はインターネット接続を必要としません…

  1. base64 -_<svg>_マークアップをエンコードします（例：svgを base64encode.org に貼り付けます）
  2. Base64でエンコードされた文字列をURLエンコードします（例：base64文字列を rlencoder.org に貼り付けます）
  3. 結果の文字列を![alt text](data:image/svg+xml,<paste_your_svg_string_here> "title")に入れます

結果は、Jupyter NotebookMarkdownセルに挿入できる次のような文字列になります…

![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)

8
Shammel Lee

誰かが興味を持っているなら、これは私が自己完結型のノートブックを共有するためにしたことです。

私の半ば焼けた解決策は、Markdownセルを分割してコードセルを挿入することでした
display(HTML(open('example.svg').read()))
Markdownディレクティブの置き換え![](example.svg "Example")。

ファイルの内容は出力セルに保存されるため、保存されたノートブックは、 nbviewer のようなサービスを使用して、すべての制限付きで、自己完結型の方法で共有できます。誰かが私のノートブックをダウンロードすることを選択した場合、彼らは私のSVGコードもダウンロードしますね。

OTOH、 Microsoft Azure Notebooks （少なくとも現在の2017年春には "プレビュー"のようなサービスを使用して共有する場合-）インカネーションにより、Microsoftアカウントを持っている人は誰でも私のノートブックと対話できます）そのコードセルを実行しようとすると誰もが傷つきます—ただし、HTTPを介して提供されるファイルを指すMarkdownイメージディレクティブを使用して、クロスホストソリューションを実装することは可能です。しかし、このクロスホスティングは私が最初に避けようとしていたものです...理由を聞かないでください：-（...

5
gboffi

はい、jupyterノートブックにSVG画像を含めることは可能です。

  1. マークダウン構文を使用：

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

  1. HTMLを使用：

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

Jupyter NotebookServerバージョン4.3.1でこれらのオプションを試しました

4
Satyam Zode