ipython: problems rendering an SVG?

In a local branch, I seem to have run into a possible rendering problem with the notebook. The branch is:

https://github.com/jonathan-taylor/ipython/tree/Rdevice

The last cell of docs/notebooks/examples/rmagic_extension.ipynb is mangled in my browser but when I extract the svg from the .ipynb file and view it with chrome it looks fine.

I used the following script to extract the svg data from the notebook:

import simplejson
r = simplejson.load(open('docs/examples/notebooks/rmagic_extension.ipynb'))
svgcell = r.values()[1][0]['cells'][-2]
svgdata = svgcell['outputs'][0]
raw_svg = '\n'.join(svgdata['svg'] )
file('last_plot.svg','w').write(raw_svg)

About this issue

Original URL
State: closed
Created 12 years ago
Comments: 33 (32 by maintainers)

Links to this issue

python - SVG rendering issues using iPython inline plots - Stack Overflow

Commits related to this issue

display: scope SVG's style elements so they do not leak When multiple SVG figures are inlined in the same dom, they share the same css namespace. This patch, scopes each SVG's style CSS rules so they... — committed to pablooliveira/ipython by pablooliveira 11 years ago
outputarea.js: Wrap inline SVGs inside an iframe When multiple inline SVGs are included in a single document, they share the same parse tree. Therefore, style collisions and use id collisions can occ... — committed to pablooliveira/ipython by pablooliveira 11 years ago
outputarea.js: Wrap inline SVGs inside an iframe When multiple inline SVGs are included in a single document, they share the same parse tree. Therefore, style collisions and use id collisions can occ... — committed to mattvonrocketstein/ipython by pablooliveira 11 years ago
Fixes #5 This biggest issue here is that the vanilla notebooks treated SVGs as images, such that the IDs used in their generation were not treated as unique. Therefore, when painted onto the DOM, sin... — committed to betteridiot/seqlogo by betteridiot 5 years ago
SVG: work around Notebook issues. Work around https://github.com/ipython/ipython/issues/1866 in Jupyter Notebook by prepending a unique slug to the id fields within the SVG. This also requires updat... — committed to ProjectDrawdown/solutions by DentonGentry 5 years ago

Most upvoted comments

Yes, @minrk is right: most of the time SVGs are treated as images so the programs producing SVGs do not need to produce unique ids. Even Inkscape may produce SVGs with colliding ids.

This means that, right now, SVG support in IPython notebook is broken in most non-trivial usages. While one could debate that it’s upstream responsibility to generate unique ids [*], I do not think that is a pragmatic solution in the mean time.

[*] I’m not sure it’s upstream responsibility to guarantee a clean namespace (btw, non trivial problem, would you use UUID ?) but the application that inlines multiple contents.

pablooliveira on Sep 24, 2013

Actually, I realized #4236 does not fix the initial issue (rendering https://github.com/jonathan-taylor/ipython/tree/Rdevice). My reduced test case is too simple and possibly exhibits a different problem. Something else is going on with the original example, but I have no clue for the moment.

EDIT:

It seems the initial issue in https://github.com/jonathan-taylor/ipython/tree/Rdevice is not due to style leaks, but to xlink:href reused identifiers.

The SVG spec allows to reuse elements defined inside a <defs> section by inserting a <use> element (http://www.w3.org/TR/SVG/struct.html#UseElement).

The use element references the origin element thanks to a xlink:href attribute. For example:

 <defs>
    <rect id="MyRect" width="60" height="10"/>
  </defs>
  ...
  <use x="20" y="10" xlink:href="#MyRect" />

The problem in the rmagic_extension.ipynb notebook is that different SVG figures are redefining the same ids. Therefore the xlink:href has multiple targets.

Making the ids and xlink:href unique (for example prepending a unique hash) solves the issue.

Nevertheless this is getting hairy, maybe wrapping the svg in an img/iframe/object is the best option for now ?

pablooliveira on Sep 20, 2013