內聯SVG圖像

我的問題是有關發佈一個自包含筆記本內聯SVG圖像

我在我的筆記本電腦，引用外部圖像文件的降價細胞的心願

so far 

![](example.svg "Example") 

so good

是否可以內聯MD細胞中的文件內容？

來源

2017-05-23 gboffi

如果單元格接受HTML，我可以簡單地複製單元格內的文件內容。 - '%% html' cell magic不是一個合理的解決方案，因爲我不能保證筆記本在分佈時可以訪問我用來隱藏長尷尬的輸入單元的相同nbextension。 - 然而，基於display（）的其他可能性連接到暴露外部引用或整個文件內容的代碼單元...... - 假設的Markdown解決方案對我很有吸引力，因爲同一單元格是未渲染的（SVG代碼可見）或渲染（只有圖像可見）。 – gboffi

如果有人有興趣，這裏是我已經做了共享一個自包含的筆記本。

我半生不熟的解決辦法是分割降價細胞，並插入一個代碼細胞
display(HTML(open('example.svg').read()))
更換降價指令![](example.svg "Example")。

由於文件內容存儲在輸出單元中，因此可以使用像nbviewer這樣的服務以自帶的方式共享保存的筆記本及其所有的限制。如果有人選擇下載我的筆記本，他們也可以下載我的SVG代碼，不是嗎？

OTOH，如果我同意使用像Microsoft Azure Notebooks服務（即，至少在目前，春天2017年，「預覽」化身允許用微軟帳戶與我的筆記本電腦進行交互的人）任何人試圖運行代碼單元格會受到傷害 - 但是可以使用指向通過HTTP提供的文件的Markdown圖像指令來實現跨託管解決方案。但是，這種跨主機是什麼，我試圖避免在一審......不要問我爲什麼： - （...

來源

2017-06-01 08:03:58 gboffi

降價允許HTML嘗試在降價電池直接將其插入...

<svg height="100" width="100"> 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
</svg>

來源

2017-06-02 05:00:53

這不適用於當前的Jupyter筆記本電腦代碼（其他的HTML代碼，但不支持SVG）。 – cco

是的，它可以包括在jupyter筆記本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筆記本服務器版本4.3.1

來源

2017-06-02 08:02:47

此方法沒有按這些選項不需要互聯網連接...

base64編碼<svg>標記（例如，粘貼svg在base64encode.org）
URL編碼base64編碼的字符串（例如，在urlencoder.org粘貼的base64字符串）
將得到的字符串中![alt text](data:image/svg+xml,<paste_your_svg_string_here> "title")

其結果將是類似於可以插入一個Jupyter筆記本降價電池下面的字符串...

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

來源

2017-06-02 08:12:03

一個可以接受的答案詳細信息我如何執行您僅僅勾勒出的步驟。 – gboffi

在我看來，一個可以接受的答案是詳細說明如何執行您僅僅勾勒出的步驟。 – gboffi

@gboffi如果這可以滿足您的原始問題或建議如何使此答案更清楚，請將其標記爲正確答案。謝謝。 –

回答

相關問題