# SVG in jupyter conversion with nbconvert fails

**URL:** <https://discourse.jupyter.org/t/svg-in-jupyter-conversion-with-nbconvert-fails/2724>\
**Category:** General\
**Created:** [November 22, 2019, 10:40am UTC](https://discourse.jupyter.org/t/svg-in-jupyter-conversion-with-nbconvert-fails/2724 "2019-11-22T10:40:32Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![dietercastel](https://avatars.discourse-cdn.com/v4/letter/d/f6c823/32.png) [@dietercastel](https://discourse.jupyter.org/u/dietercastel)\
**Post date:** [November 22, 2019, 10:40am UTC](https://discourse.jupyter.org/t/svg-in-jupyter-conversion-with-nbconvert-fails/2724/1 "2019-11-22T10:40:32Z")

</div>

Hi all,

I’m using juypter for a school assignment (deadline coming monday) and the conversion to pdf is not working as expected. I have some programatically generated svgs that I would like to be in the pdf but somehow LaTeX/nbconvert is choking on it. I found another lost soul with similar problems on the stackoverflow below.

> <https://stackoverflow.com/questions/54501799/nbconvert-a-ipynb-with-svg-images-to-pdf>

Is there a simple fix for this? As a last resort converting the SVGs to some other format (e.g. PNG) but that removes all the nice vectorized features that come with SVGs.

```
(/usr/local/texlive/2019/texmf-dist/tex/generic/oberdiek/se-ascii-print.def)
Overfull \hbox (156.02196pt too wide) in paragraph at lines 587--587
[]\TU/lmtt/m/n/10.95 gplot(sg,locs_x,locs_y,nodefillc[]=[]nodefillc,nodelabel[]
=[]latexedLabels,nodesize[]=[]nodesize,edgelabel[]=[]edgelabel)|  
[1] [2] [3] [4] [5] [6] [7]

! LaTeX Error: Cannot determine size of graphic in full3_8.svg (no BoundingBox)
.

See the LaTeX manual or LaTeX Companion for explanation.
Type H <return> for immediate help.
 ...                                              
                                                  
l.707 \includegraphics{full3_8.svg}
```

---

<div class="post-metadata">

**Author:** ![jasongrout](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/jasongrout/32/371_2.png) [@jasongrout](https://discourse.jupyter.org/u/jasongrout)\
**Post date:** [November 22, 2019, 3:56pm UTC](https://discourse.jupyter.org/t/svg-in-jupyter-conversion-with-nbconvert-fails/2724/2 "2019-11-22T15:56:03Z")

</div>

If I recall correctly, pdflatex understands png, jpg, and pdf files.

There is an [`svg` Latex package](http://texdoc.net/texmf-dist/doc/latex/svg/svg.pdf) that automatically uses Inkscape to convert the image as the Latex is compiling, which might be useful, but that would require I think having inkscape installed and somehow getting that command changed to `\includesvg{...}`, as well as including the `svg` package.

---

<div class="post-metadata">

**Author:** ![parmentelat](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/parmentelat/32/813_2.png) [@parmentelat](https://discourse.jupyter.org/u/parmentelat)\
**Post date:** [May 25, 2020, 3:34pm UTC](https://discourse.jupyter.org/t/svg-in-jupyter-conversion-with-nbconvert-fails/2724/3 "2020-05-25T15:34:02Z")

</div>

in case it helps, I have spent some time today trying to do this in an attempt to assess what could be doable

it appeared that

- one needs to run `latex` with the `--shell-escape` option to allow the spawning of an external program

- installing `inkscape` is not straightforward - on my macOS at least;  
I used `brew install cask inkscape` but then had to manually add `/Applications/Inkscape.app//Contents/MacOS` to my PATH

- as of today I could see `includesvg` fail to work properly; it calls `inkscape` with a `-z` option that is not supported; [indeed as per this link](https://wiki.inkscape.org/wiki/index.php/Release_notes/1.0#Command_Line) the command line interface of inkscape has changed with release 1.0 that just went out at the beginning of May 2020

I also tried another angle using `cairosvg` that is a Python library that looked lighter and so, I hoped, simpler to put into place; I was thinking that if we went for this approach we could have nbconvert do the pre-processing itself, it’d be so much simpler

however, trying the 2 angles manually showed that none of them works out too well for me today; I have a handful of svg drawings - that I happen to have produced under jupyterlab thanks to the very nice drawio extension - and all of them had at least one text object wrongly converted, whether I use inkscape or cairosvg

it is a pity, it is so much nicer to create svg pictures for insertion…

---

<div class="post-metadata">

**Author:** ![betatim](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/betatim/32/10_2.png) [@betatim](https://discourse.jupyter.org/u/betatim)\
**Post date:** [May 25, 2020, 5:35pm UTC](https://discourse.jupyter.org/t/svg-in-jupyter-conversion-with-nbconvert-fails/2724/4 "2020-05-25T17:35:36Z")

</div>

I’d like to give this a try to see what [https://github.com/betatim/notebook-as-pdf](https://github.com/betatim/notebook-as-pdf) does. Do you have a notebook that includes SVGs/will generate some?

---

<div class="post-metadata">

**Author:** ![parmentelat](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/parmentelat/32/813_2.png) [@parmentelat](https://discourse.jupyter.org/u/parmentelat)\
**Post date:** [May 25, 2020, 6:45pm UTC](https://discourse.jupyter.org/t/svg-in-jupyter-conversion-with-nbconvert-fails/2724/5 "2020-05-25T18:45:40Z")

</div>

it could be that the way I create these svg’s - again this specifically is through jupyterlab-drawio v0.7.0 - is the problem

I’ve been digging a little more on my side; I have tried a handful of other svg2png tools, several online, and all of them produce the same kind of artefact

My problem is the discourse instance here does not allow me to upload .svg files  
Is this something that can be tweaked ?  
otherwise I’ll come up with some means to publish that svg

the notebook would just have one markdown cell that does `![](f-string.svg)`

* * *

in the meanwhile here are screenshots that show the svg and it’s typical png output (all tools seem to produce a similar output, so…)

- this is the svg showed under macSVG (background is transparent)  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/jupyter/original/2X/f/f1e6ce128030126020e7359c6aaf2e1fe7c4913c.png)
- this is the png output from `cairosvg`; again it is typical of what I could produce by other means  
 ![f-string](https://canada1.discourse-cdn.com/flex031/uploads/jupyter/original/2X/7/7682f8b780154d02db1b4e453553ed23e2b06855.png)

Clearly fonts seem to be the problem

---

<div class="post-metadata">

**Author:** ![parmentelat](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/parmentelat/32/813_2.png) [@parmentelat](https://discourse.jupyter.org/u/parmentelat)\
**Post date:** [May 25, 2020, 8:32pm UTC](https://discourse.jupyter.org/t/svg-in-jupyter-conversion-with-nbconvert-fails/2724/6 "2020-05-25T20:32:34Z")

</div>

follow-up

I have redone the svg from scratch using macSVG, my specific problem has vanished; using `cairosvg` allowed me to create a quite satisfactory `png` that I can include through `includegraphics`

on the other hand a visual inspection of the initial svg, produced through `jupyterlab-drawio`, revealed structural differences between the various text elements, and the one causing problem was indeed materialized in a `<font>...</font>` element instead of a `\<text\>…\</text\>’ tag for the 2 other texts that were properly translated in the png

So, bottom line for me at this point is :

- I’ll refrain from using that extension too much; macSVG may be less convenient in certain respects but gives me great control over the produced svg, while drawio somehow has ended up with something quite messy - not that I have great expertise in using that extension either

- this being now out of the way, it would be my recommendation that `nbconvert --to latex` implements the following logic when an image is included: when the included file has an .svg extension, use cairosvg to produce a png - with some kind of twisted name like _thestem_\_nbcsvg.png - overwrite it if it is older than the target svg, and embed that through `includegraphics`  
this in order to avoid (1) convoluted installations and (2) the error-prone necessity to later call latex with the right option

Now, I have absolutely no knowledge of the internals of nbconvert, so I may just as well be missing something entirely, of course

---

<div class="post-metadata">

**Author:** ![betatim](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/betatim/32/10_2.png) [@betatim](https://discourse.jupyter.org/u/betatim)\
**Post date:** [May 25, 2020, 8:46pm UTC](https://discourse.jupyter.org/t/svg-in-jupyter-conversion-with-nbconvert-fails/2724/7 "2020-05-25T20:46:38Z")

</div>

> [@parmentelat](#):
>
> My problem is the discourse instance here does not allow me to upload .svg files  
> Is this something that can be tweaked ?

A quick look around the admin interface and google didn’t find anything :-/

---

<div class="post-metadata">

**Author:** ![parmentelat](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/parmentelat/32/813_2.png) [@parmentelat](https://discourse.jupyter.org/u/parmentelat)\
**Post date:** [May 25, 2020, 9:06pm UTC](https://discourse.jupyter.org/t/svg-in-jupyter-conversion-with-nbconvert-fails/2724/8 "2020-05-25T21:06:29Z")

</div>

here’s where I can tweak that on my own instance (sorry it’s in French but hopefully it will still help)

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/jupyter/original/2X/c/c546851b089c9c40678c2879abc2bb52445c3934.png)

not to worry too much though, given my latest post

---

<div class="post-metadata">

**Author:** ![betatim](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/betatim/32/10_2.png) [@betatim](https://discourse.jupyter.org/u/betatim)\
**Post date:** [May 26, 2020, 5:41am UTC](https://discourse.jupyter.org/t/svg-in-jupyter-conversion-with-nbconvert-fails/2724/9 "2020-05-26T05:41:52Z")

</div>

cc @choldgraf or @consideRatio who are real admins

---

<div class="post-metadata">

**Author:** ![consideRatio](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/consideratio/32/1033_2.png) [@consideRatio](https://discourse.jupyter.org/u/consideRatio)\
**Post date:** [May 26, 2020, 6:02am UTC](https://discourse.jupyter.org/t/svg-in-jupyter-conversion-with-nbconvert-fails/2724/10 "2020-05-26T06:02:47Z")

</div>

.svg added! Thanks for the clear pointer @parmentelat!

---

<div class="post-metadata">

**Author:** ![parmentelat](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/parmentelat/32/813_2.png) [@parmentelat](https://discourse.jupyter.org/u/parmentelat)\
**Post date:** [May 26, 2020, 7:57am UTC](https://discourse.jupyter.org/t/svg-in-jupyter-conversion-with-nbconvert-fails/2724/11 "2020-05-26T07:57:09Z")

</div>

so, here’s stuff to reproduce

- the broken svg; again this is produced using jupyterlab-drawio, which admittedly is not the right tool for that, obviously; it does not show up properly in this discourse context either, but in a jupyter classic environment it displays fine (unless I screwed up something while writing this…)

![f-string-broken](https://canada1.discourse-cdn.com/flex031/uploads/jupyter/original/2X/c/c096827116e53ded3f40c089f0c119dc763a6a99.svg)

- the same, redone under macSVG, taking care of using a minimal set of svg tags  
 ![f-string-ok](https://canada1.discourse-cdn.com/flex031/uploads/jupyter/original/2X/f/f1b45882341ffd003b591ac4758b9d1ef12a9659.svg)

- the .ipynb and .py extensions being still unallowed, I can’t upload a notebook, but one single markdown cell that does

```auto
![](f-string.svg)

```

will do the trick

---

<div class="post-metadata">

**Author:** ![mgeier](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/mgeier/32/1192_2.png) [@mgeier](https://discourse.jupyter.org/u/mgeier)\
**Post date:** [May 26, 2020, 4:46pm UTC](https://discourse.jupyter.org/t/svg-in-jupyter-conversion-with-nbconvert-fails/2724/12 "2020-05-26T16:46:25Z")

</div>

@parmentelat The SVG you uploaded here only contains three rects and a few transforms, no trace of any text:

```
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="811px" height="71px" version="1.1">
  <defs/>
  <g transform="translate(0.5,0.5)">
    <rect x="575" y="0" width="20" height="60" fill="#9ac7bf" stroke="#000000" pointer-events="none"/>
    <rect x="480" y="0" width="20" height="60" fill="#9ac7bf" stroke="#000000" pointer-events="none"/>
    <rect x="240" y="0" width="20" height="60" fill="#9ac7bf" stroke="#000000" pointer-events="none"/>
    <g transform="translate(92.5,6.5)"/>
    <g transform="translate(330.5,53.5)"/>
    <g transform="translate(522.5,53.5)"/>
  </g>
</svg>

```

But back to the original topic about SVG conversion: I’ve made good experiences with the tool `rsvg-convert` from [https://gitlab.gnome.org/GNOME/librsvg](https://gitlab.gnome.org/GNOME/librsvg). It can be installed with `conda`: [https://anaconda.org/conda-forge/librsvg](https://anaconda.org/conda-forge/librsvg).

That’s also what I’m recommending to use with my Sphinx extension `nbsphinx`, see [https://nbsphinx.readthedocs.io/en/0.7.0/markdown-cells.html#SVG-support-for-LaTeX](https://nbsphinx.readthedocs.io/en/0.7.0/markdown-cells.html#SVG-support-for-LaTeX).

---

<div class="post-metadata">

**Author:** ![parmentelat](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/parmentelat/32/813_2.png) [@parmentelat](https://discourse.jupyter.org/u/parmentelat)\
**Post date:** [May 26, 2020, 6:12pm UTC](https://discourse.jupyter.org/t/svg-in-jupyter-conversion-with-nbconvert-fails/2724/13 "2020-05-26T18:12:19Z")

</div>

@mgeier  
first time around, my file did not look quite the same as on my laptop, but I thought it was some rendering artefact, so thanks for double checking, the thing is, my svg gets sanitized somehow when getting uploaded on discourse;  
I suggest we just forget about this then, as my problem had much more to do with the way I produced that svg

Since you seem to have experience with a few different options (inkscape, imagemagick, rsvgconverter), have you gathered insights as to which of those should be the first candidate for being supported in nbconvert, in terms of their power/limitations in one dimension, and of installation pain in another ? had you given cairosvg a try ?

thanks !

---

<div class="post-metadata">

**Author:** ![mgeier](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/mgeier/32/1192_2.png) [@mgeier](https://discourse.jupyter.org/u/mgeier)\
**Post date:** [May 26, 2020, 7:30pm UTC](https://discourse.jupyter.org/t/svg-in-jupyter-conversion-with-nbconvert-fails/2724/14 "2020-05-26T19:30:59Z")

</div>

> [@parmentelat](#):
>
> in terms of their power/limitations

I would definitely _not_ recommend ImageMagick, because it will create bitmap images, which should only be a last resort.

Other than that, I didn’t do any thorough tests. I have mostly used `rsvg-convert` and haven’t found any output errors.

> [@parmentelat](#):
>
> of installation pain

I’m a Linux user, so installing any of this stuff is super easy.

I guess Inkscape is quite a huge application, so it might be strange to install it just for a simple conversion task. `librsvg` seems more fitting for that.

Previously, it might have been difficult to install `librsvg` on Windows, but  
I [asked nicely for a `conda` package for Windows](https://github.com/conda-forge/librsvg-feedstock/issues/40), and somebody created it. I haven’t tested it of course, but I assume it works.

> [@parmentelat](#):
>
> had you given cairosvg a try ?

No. I have only tested converters which already had an existing Sphinx extension.

---

<div class="post-metadata">

**Author:** ![mgeier](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/mgeier/32/1192_2.png) [@mgeier](https://discourse.jupyter.org/u/mgeier)\
**Post date:** [May 26, 2020, 7:35pm UTC](https://discourse.jupyter.org/t/svg-in-jupyter-conversion-with-nbconvert-fails/2724/15 "2020-05-26T19:35:46Z")

</div>

PS: There is already an `nbconvert` issue about that topic: [https://github.com/jupyter/nbconvert/issues/745](https://github.com/jupyter/nbconvert/issues/745).