search

blockdiag / seqdiag

Apache License 2.0
68 stars 14 forks source link

Simple seqdiag generates invalid SVG XML #21

Open tk0miya opened 6 years ago

tk0miya commented 6 years ago

With blockdiag_html_image_format = 'SVG', I added a simple seqdiag to my RST file:

#!rst
.. _checkout:

==================
API Order Checkout
==================

.. seqdiag::

   seqdiag {
     seqdiag -> "sequence-diagrams" [label = "generates"];
     seqdiag --> "is very easy!";
   }

This generates the following invalid SVG XML: 

#!html
<head>
    <meta charset="utf-8">
    <title>API Order Checkout</title>
</head>
<body><div class="section" id="api-order-checkout">
<span id="checkout"></span><h1 class="text-heading-primary">API Order Checkout<a class="headerlink" href="#api-order-checkout" title="Permalink to this headline">¶</a></h1>
<div><svg height="259" viewbox="0 0 640 259" width="640" xmlns="http://www.w3.org/2000/svg" xmlns="xmlns">
<defs id="defs_block">
<filter height="1.504" id="filter_blur" inkspace="inkspace">
<fegaussianblur id="feGaussianBlur3780" inkspace="inkspace">
</fegaussianblur></filter>
</defs>
<title>blockdiag</title>
<desc>
<rect fill="rgb(0,0,0)" height="96" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="8" x="127" y="141">
</rect><rect fill="rgb(0,0,0)" height="96" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="8" x="319" y="141">
</rect><rect fill="rgb(0,0,0)" height="46" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="8" x="511" y="191">
</rect><rect fill="rgb(0,0,0)" height="40" stroke="rgb(0,0,0)" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="128" x="67" y="46">
</rect><rect fill="rgb(0,0,0)" height="40" stroke="rgb(0,0,0)" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="128" x="259" y="46">
</rect><rect fill="rgb(0,0,0)" height="40" stroke="rgb(0,0,0)" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="128" x="451" y="46">
<path d="M 128 80 L 128 247" fill="none" stroke="rgb(0,0,0)" stroke-dasharray="8 4">
</path></rect><rect fill="moccasin" height="96" stroke="rgb(0,0,0)" width="8" x="124" y="135">
<path d="M 320 80 L 320 247" fill="none" stroke="rgb(0,0,0)" stroke-dasharray="8 4">
</path></rect><rect fill="moccasin" height="96" stroke="rgb(0,0,0)" width="8" x="316" y="135">
<path d="M 512 80 L 512 247" fill="none" stroke="rgb(0,0,0)" stroke-dasharray="8 4">
</path></rect><rect fill="moccasin" height="46" stroke="rgb(0,0,0)" width="8" x="508" y="185">
</rect><rect fill="rgb(255,255,255)" height="40" stroke="rgb(0,0,0)" width="128" x="64" y="40">
<text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textlength="42" x="128" y="66">seqdiag</text>
</rect><rect fill="rgb(255,255,255)" height="40" stroke="rgb(0,0,0)" width="128" x="256" y="40">
<text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textlength="102" x="320" y="66">sequence-diagrams</text>
</rect><rect fill="rgb(255,255,255)" height="40" stroke="rgb(0,0,0)" width="128" x="448" y="40">
<text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textlength="78" x="512" y="66">is very easy!</text>
<path d="M 136 135 L 312 135" fill="none" stroke="rgb(0,0,0)">
<polygon fill="rgb(0,0,0)" points="304,131 312,135 304,139" stroke="rgb(0,0,0)">
</polygon></path><path d="M 136 185 L 504 185" fill="none" stroke="rgb(0,0,0)" stroke-dasharray="4">
<polygon fill="rgb(0,0,0)" points="496,181 504,185 496,189" stroke="rgb(0,0,0)">
<text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textlength="54" x="167" y="133">generates</text>
</polygon></path></rect></desc></svg>
</div>

Note the invalid SVG tag has two xmlns attributes, one of them invalid: xmlns="http://www.w3.org/2000/svg" xmlns="xmlns".

This results in errors on the page and an SVG that doesn't display.

For various architectural reasons, PNG isn't an option for us, so this is blocking our ability to use seqdiag.

Versions: Pygments==2.2.0 Sphinx==1.4.9 blockdiag==1.5.3 seqdiag==0.9.5 sphinxcontrib-seqdiag==0.8.5 sphinxcontrib-blockdiag==1.5.5

tk0miya commented 6 years ago

From Takeshi KOMIYA on 2012-04-18 02:02:31+00:00

Fix #21; add default fontpaths to debian/wheezy

→ <>

tk0miya commented 6 years ago

From Takeshi KOMIYA on 2012-04-18 02:08:17+00:00

I added new paths to ipagp.ttf and more new truetype fonts (vl-gothic). I did not accept your patches because some truetype fonts do not support standard characters (ASCII, Japanese, and others), so the globbing strategy will be disappointed users at any environments.

If you have any more good ideas for detecting truetype fonts, suggest it for me :-)

tk0miya commented 6 years ago

From Miguel García on 2017-06-11 08:30:55+00:00

This may be a problem within sphinxcontrib-seqdiag, because testing it with seqdiag only it doesn't happen.

The test:

#!python

from seqdiag import parser, builder, drawer

diagram_definition = u"""
seqdiag {
     seqdiag -> "sequence-diagrams" [label = "generates"];
     seqdiag --> "is very easy!";
   }
"""
tree = parser.parse_string(diagram_definition)
diagram = builder.ScreenNodeBuilder.build(tree)
draw = drawer.DiagramDraw('SVG', diagram, filename="diagram.svg")
draw.draw()
draw.save()

The result:

#!svg

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg viewBox="0 0 640 259" xmlns="http://www.w3.org/2000/svg" xmlns:inkspace="http://www.inkscape.org/namespaces/inkscape" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs id="defs_block">
    <filter height="1.504" id="filter_blur" inkspace:collect="always" width="1.1575" x="-0.07875" y="-0.252">
      <feGaussianBlur id="feGaussianBlur3780" inkspace:collect="always" stdDeviation="4.2" />
    </filter>
  </defs>
  <title>blockdiag</title>
  <desc />
  <rect fill="rgb(0,0,0)" height="96" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="8" x="127" y="141" />
  <rect fill="rgb(0,0,0)" height="96" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="8" x="319" y="141" />
  <rect fill="rgb(0,0,0)" height="46" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="8" x="511" y="191" />
  <path d="M 75 46 L 187 46 A8,8 0 0 1 195 54 L 195 78 A8,8 0 0 1 187 86 L 75 86 A8,8 0 0 1 67 78 L 67 54 A8,8 0 0 1 75 46" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" />
  <path d="M 267 46 L 379 46 A8,8 0 0 1 387 54 L 387 78 A8,8 0 0 1 379 86 L 267 86 A8,8 0 0 1 259 78 L 259 54 A8,8 0 0 1 267 46" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" />
  <path d="M 459 46 L 571 46 A8,8 0 0 1 579 54 L 579 78 A8,8 0 0 1 571 86 L 459 86 A8,8 0 0 1 451 78 L 451 54 A8,8 0 0 1 459 46" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" />
  <path d="M 128 80 L 128 247" fill="none" stroke="rgb(0,0,0)" stroke-dasharray="8 4" />
  <rect fill="moccasin" height="96" stroke="rgb(0,0,0)" width="8" x="124" y="135" />
  <path d="M 320 80 L 320 247" fill="none" stroke="rgb(0,0,0)" stroke-dasharray="8 4" />
  <rect fill="moccasin" height="96" stroke="rgb(0,0,0)" width="8" x="316" y="135" />
  <path d="M 512 80 L 512 247" fill="none" stroke="rgb(0,0,0)" stroke-dasharray="8 4" />
  <rect fill="moccasin" height="46" stroke="rgb(0,0,0)" width="8" x="508" y="185" />
  <path d="M 72 40 L 184 40 A8,8 0 0 1 192 48 L 192 72 A8,8 0 0 1 184 80 L 72 80 A8,8 0 0 1 64 72 L 64 48 A8,8 0 0 1 72 40" fill="#ececff" stroke="rgb(0,0,0)" />
  <text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textLength="42" x="128.0" y="66">seqdiag</text>
  <path d="M 264 40 L 376 40 A8,8 0 0 1 384 48 L 384 72 A8,8 0 0 1 376 80 L 264 80 A8,8 0 0 1 256 72 L 256 48 A8,8 0 0 1 264 40" fill="#ececff" stroke="rgb(0,0,0)" />
  <text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textLength="102" x="320.0" y="66">sequence-diagrams</text>
  <path d="M 456 40 L 568 40 A8,8 0 0 1 576 48 L 576 72 A8,8 0 0 1 568 80 L 456 80 A8,8 0 0 1 448 72 L 448 48 A8,8 0 0 1 456 40" fill="#ececff" stroke="rgb(0,0,0)" />
  <text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textLength="78" x="512.0" y="66">is very easy!</text>
  <path d="M 136 135 L 312 135" fill="none" stroke="rgb(0,0,0)" />
  <polygon fill="rgb(0,0,0)" points="304,131 312,135 304,139" stroke="rgb(0,0,0)" />
  <path d="M 136 185 L 504 185" fill="none" stroke="rgb(0,0,0)" stroke-dasharray="4" />
  <polygon fill="rgb(0,0,0)" points="496,181 504,185 496,189" stroke="rgb(0,0,0)" />
  <text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textLength="54" x="167.0" y="133">generates</text>
</svg>

Anyways, validating it against https://validator.w3.org/check, it says there are two errors, attached as image.