Skip to content
This repository was archived by the owner on Apr 6, 2023. It is now read-only.

SVG parsing faulty #125

Open
coolum001 opened this issue Aug 3, 2020 · 0 comments
Open

SVG parsing faulty #125

coolum001 opened this issue Aug 3, 2020 · 0 comments

Comments

@coolum001
Copy link

Hi

First: Thank you for this plugin: I find it very useful

Second:

I am trying to include SVG images created by graphviz in a Notebook to be rendered in Pelican, using the %%svg cell magic

The cell input I am using as an example:

%%svg
<svg width="62pt" height="116pt"
 viewBox="0.00 0.00 62.00 116.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 112)">
<title>%3</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-112 58,-112 58,4 -4,4"/>
<!-- a -->
<g id="node1" class="node"><title>a</title>
<ellipse fill="none" stroke="black" cx="27" cy="-90" rx="27" ry="18"/>
<text text-anchor="middle" x="27" y="-86.3" font-family="Times New Roman,serif" font-size="14.00">a</text>
</g>
<!-- b -->
<g id="node2" class="node"><title>b</title>
<ellipse fill="none" stroke="black" cx="27" cy="-18" rx="27" ry="18"/>
<text text-anchor="middle" x="27" y="-14.3" font-family="Times New Roman,serif" font-size="14.00">b</text>
</g>
<!-- a&#45;&gt;b -->
<g id="edge1" class="edge"><title>a&#45;&gt;b</title>
<path fill="none" stroke="black" d="M27,-71.6966C27,-63.9827 27,-54.7125 27,-46.1124"/>
<polygon fill="black" stroke="black" points="30.5001,-46.1043 27,-36.1043 23.5001,-46.1044 30.5001,-46.1043"/>
</g>
</g>
</svg>

This is rendered as expected in my Jupyter Lab notebook, and is generated by the simplest graphviz digraph (via dot)

digraph { a->b }

The following is a snip from the output HTML file created by Pelican (with plugin).

<div class="output_svg output_subarea ">
<svg height="116pt" viewbox="0.00 0.00 62.00 116.00" width="62pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g class="graph" id="graph0" transform="scale(1 1) rotate(0) translate(4 112)">
<title>%3
<polygon fill="white" points="-4,4 -4,-112 58,-112 58,4 -4,4" stroke="none" />
<!-- a -->
<g class="node" id="node1"><title>a
<ellipse cx="27" cy="-90" fill="none" rx="27" ry="18" stroke="black" />
<text font-family="Times New Roman,serif" font-size="14.00" text-anchor="middle" x="27" y="-86.3">a</text>
</g>
<!-- b -->
<g class="node" id="node2"><title>b
<ellipse cx="27" cy="-18" fill="none" rx="27" ry="18" stroke="black" />
<text font-family="Times New Roman,serif" font-size="14.00" text-anchor="middle" x="27" y="-14.3">b</text>
</g>

You will notice that the <title> tags are not closed, which means the svg image is not shown. Manually editing the HTML file to close the <title> tags works fine. Note that the <title> tags are closed in the input svg.

Maybe there is special processing for <title> tag, assuming it is HTML, and not recognising that an SVG <title> tag is different?

I am running JupyterLab 1.2.4, Pelican 3.7.1, the plugin was downloaded at 2 Aug 2019

Happy to supply more info if needed
Don

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant