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

SVG parsing faulty #125

@coolum001

Description

@coolum001

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions