2017-05-23 3 views
9

ist Meine Frage an den Wunsch, im Zusammenhang enthielt ein Selbst veröffentlichen Notebookinlining svg Bild in einer Abschlag Zelle

ich einen Abschlag Zelle in einem Notebook von mir habe, die eine externe Bilddatei

so far 

![](example.svg "Example") 

so good 
verweisen

Kann der Dateiinhalt in der MD-Zelle eingebunden werden?

+0

Wenn Zellen HTML akzeptierten, konnte ich den Dateiinhalt einfach in die Zelle kopieren. - "%% html" -Zellenmagie ist keine plausible Lösung, da ich nicht garantieren kann, dass das Notebook, wenn es verteilt wird, auf die gleiche Erweiterung zugreifen kann, mit der ich die beschämend lange Eingangszelle verstecken würde. - Andere Möglichkeiten, die auf 'display()' basieren, sind jedoch mit einer Codezelle verbunden, die entweder eine externe Referenz oder den gesamten Dateiinhalt freilegt ... - Die hypothetische Markdown-Lösung spricht mich an, weil die gleiche Zelle entweder nicht gerendert ist (SVG Code sichtbar) oder gerendert (NUR das Bild ist sichtbar). – gboffi

Antwort

3

Wenn jemand interessiert ist, hier ist es, was ich getan habe, um ein in sich geschlossenes Notebook zu teilen.

Meine unausgegorene Lösung war die Markdown-Zelle und legen Sie eine Code-Zelle
display(HTML(open('example.svg').read()))
ersetzt die Richtlinie ![](example.svg "Example") Markdown zu spalten.

Da der Dateiinhalt in einer Ausgabezelle gespeichert wird, kann das gespeicherte Notizbuch in einer geschlossenen Weise mit einem Dienst wie nbviewer mit all seinen Einschränkungen geteilt werden. Wenn sich jemand dafür entscheidet, mein Notebook herunterzuladen, dann lädt es auch meinen SVG-Code herunter, nicht wahr?

OTOH, wenn ich einen Dienst wie Microsoft Azure Notebooks Aktie mit (das zumindest in dem aktuellen, Frühjahr 2017 „Vorschau“ Inkarnation jemanden mit einem Microsoft-Konto kann mit meinem Notebook zu interagieren) jeden, der versucht, um diesen Code ausführen Zelle wird verletzt - es ist jedoch möglich, eine Cross-gehostete Lösung zu implementieren, die die Markdown-Bild-Direktive verwendet, die auf eine Datei verweist, die über HTTP bedient wird. Aber dieses Kreuz-Hosting ist, was ich in der ersten Instanz zu vermeiden versuchte, ... fragen Sie mich nicht warum: -. (...

0

Markdown HTML erlaubt Versuchen Sie es direkt in die Markdown-Zelle eingefügt ...

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

Das funktioniert nicht mit dem aktuellen Jupyter Notebook-Code (anderes HTML, aber nicht SVG). – cco

2

Ja, es ist möglich, SVG-Bild in jupyter Notebook schließen

  1. mit Abschlag Syntax.

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

  1. HTML Mit:

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

Ich habe versucht, diese Optionen auf Jupyter Notebook Server Version 4.3.1

4

Diese Methode doesn benötige keine Internetverbindung ...

  1. base64-kodieren Sie die <svg> Markup (z. Paste Svg bei base64encode.org)
  2. URL-Codierung der Base64-codierte Zeichenfolge (z.Paste Base64-String an urlencoder.org)
  3. Setzen Sie die resultierende Zeichenfolge in ![alt text](data:image/svg+xml,<paste_your_svg_string_here> "title")

das Ergebnis eine Zeichenfolge ähnlich der folgenden sein würde, die in eine Jupyter Notebook Markdown-Zelle eingefügt werden kann ...

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

+1

Eine Antwort, die einfach zu beantworten ist, wie führe ich die Schritte durch, die Sie nur skizziert haben. – gboffi

+0

Eine akzeptable Antwort, meiner Meinung nach, Details, wie führe ich die Schritte durch, die Sie nur skizziert haben. – gboffi

+0

@gboffi Bitte markieren Sie die richtige Antwort, wenn dies Ihrem ursprünglichen Problem entspricht oder beraten Sie, wie Sie diese Antwort klarer machen können. Vielen Dank. –