Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

inlining svg image in a markdown cell

Tags:

markdown

jupyter-notebook

jupyter

My question is related to the wish of publishing a self contained notebook

I have a Markdown cell in a notebook of mine that references an external image file

so far

![](example.svg "Example")

so good

Is it possible to inline the file content in the MD cell?

like image 515
gboffi Avatar asked May 23 '17 15:05

gboffi

People also ask

How do I insert an image in markdown cell?

For this, first, convert your cell to a markdown cell and then go to Edit -> Insert Image which will open up a dialog box asking you to locate the image from your computer.

How do you display an image in markdown in a Jupyter notebook?

first, change the type of the cell to -> markdown. Step 2: After that click edit in the jupyter notebook menu. after that click 'insert image'. Edit -> insert image.

How do you include code blocks within markdown cells?

Press Esc key, type m for markdown cell, press Enter key. The cursor is now in the markdown cell waiting for instructions. Type your code or paste a code block. If code is pasted, it will most likely need to become aligned below the tickmarks.

How do I edit markdown cells?

Just double click on the markdown cell. Edit what you want to and Run. It will reflect the changes. Save your notebook.

2 Answers

This method doesn't require an internet connection…

  1. base64-encode the <svg> markup (eg. paste svg at base64encode.org)
  2. URL-encode the base64-encoded string (eg. paste base64 string at urlencoder.org)
  3. Put the resulting string in ![alt text](data:image/svg+xml,<paste_your_svg_string_here> "title")

The result would be a string similar to the following that can be inserted into a Jupyter Notebook Markdown cell…

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

like image 145
Shammel Lee Avatar answered Sep 21 '22 22:09

Shammel Lee

Yes, It is possible to include SVG image in jupyter notebook.

  1. Using markdown syntax:

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

  1. Using HTML:

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

I tried these options on Jupyter Notebook Server version 4.3.1

like image 32
Satyam Zode Avatar answered Sep 21 '22 22:09

Satyam Zode
Sign in to Comment

Related questions

How to do cell vertical alignment in markdown/pandoc table?
Semantic tagging in Markdown
caption in the html output of knitr
Is there a markdown parser supported on Jekyll that plays nicely with mathjax?
Empty column header in table using github markdown?
Markdown: Problems with numbered list paragraphs containing code element
How can I automatically escape HTML content using Jekyll and Markdown?
how to insert image from url in markdown
Markdown Anchor Link With Same Name But Different Sections
Should i sanitize markdown?
In Textmate2, how do you disable the header-styles in Markdown documents?
Render output from markdown file inside .rst file
In Markdown, is there a way to stop images from being wrapped with <p> tags?
How to change fontface (bold/italics) for a cell in a kable table in rmarkdown?
Vertical bar symbol within a markdown table
What is the best way to store and display markdown-entered text?
Is it possible to include external files when using Jade’s :markdown filter?
How to add multiple classes to MarkDown using Jekyll?
Markdown with AngularJS directives
How to render triple backticks as inline code block in Markdown?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!