SVG Export Problem

[k-zen]

When exporting/downloading a TensorBoard graph in SVG I get the following incomplete file. If it's any help, the data in the graph I'm trying to export corresponds to scalar values generated using TensorBoardX.

Info:

• TensorBoard 1.12.2
• TensorFlow 1.12.0
• macOS 10.14.3
• Python 3.6.6
• Chrome 72.0.3626.109

[nfelt]

Can you include a screenshot of the chart as you see it in TensorBoard, and if possible the event files that you're loading that data from?

@stephanwlee any ideas?

Repasting the contents of your SVG file for ease of reference, with newlines inserted between tags for readability:

<svg viewBox="0 0 844.8828125 400" xmlns="http://www.w3.org/2000/svg">
<g>
<g>
<g>
<g>
<g>
<line x1="58.515625" y1="377" x2="53.515625" y2="377" style="visibility: inherit;" fill="rgb(0, 0, 0)" stroke="rgb(204, 204, 204)" stroke-width="1px">
</line>
<line x1="58.515625" y1="342.72727272727275" x2="53.515625" y2="342.72727272727275" style="visibility: inherit;" fill="rgb(0, 0, 0)" stroke="rgb(204, 204, 204)" stroke-width="1px">
</line>
<line x1="58.515625" y1="308.45454545454544" x2="53.515625" y2="308.45454545454544" style="visibility: inherit;" fill="rgb(0, 0, 0)" stroke="rgb(204, 204, 204)" stroke-width="1px">
</line>
<line x1="58.515625" y1="274.1818181818182" x2="53.515625" y2="274.1818181818182" style="visibility: inherit;" fill="rgb(0, 0, 0)" stroke="rgb(204, 204, 204)" stroke-width="1px">
</line>
<line x1="58.515625" y1="239.9090909090909" x2="53.515625" y2="239.9090909090909" style="visibility: inherit;" fill="rgb(0, 0, 0)" stroke="rgb(204, 204, 204)" stroke-width="1px">
</line>
<line x1="58.515625" y1="205.63636363636365" x2="53.515625" y2="205.63636363636365" style="visibility: inherit;" fill="rgb(0, 0, 0)" stroke="rgb(204, 204, 204)" stroke-width="1px">
</line>
<line x1="58.515625" y1="171.36363636363637" x2="53.515625" y2="171.36363636363637" style="visibility: inherit;" fill="rgb(0, 0, 0)" stroke="rgb(204, 204, 204)" stroke-width="1px">
</line>
<line x1="58.515625" y1="137.0909090909091" x2="53.515625" y2="137.0909090909091" style="visibility: inherit;" fill="rgb(0, 0, 0)" stroke="rgb(204, 204, 204)" stroke-width="1px">
</line>
<line x1="58.515625" y1="102.81818181818181" x2="53.515625" y2="102.81818181818181" style="visibility: inherit;" fill="rgb(0, 0, 0)" stroke="rgb(204, 204, 204)" stroke-width="1px">
</line>
<line x1="58.515625" y1="68.5454545454545" x2="53.515625" y2="68.5454545454545" style="visibility: inherit;" fill="rgb(0, 0, 0)" stroke="rgb(204, 204, 204)" stroke-width="1px">
</line>
<line x1="58.515625" y1="34.27272727272731" x2="53.515625" y2="34.27272727272731" style="visibility: inherit;" fill="rgb(0, 0, 0)" stroke="rgb(204, 204, 204)" stroke-width="1px">
</line>
<line x1="58.515625" y1="0" x2="53.515625" y2="0" style="visibility: inherit;" fill="rgb(0, 0, 0)" stroke="rgb(204, 204, 204)" stroke-width="1px">
</line>
</g>
<g transform="translate(48.515625, 0)">
<text x="0" y="377" dx="0em" dy="0.3em" style="text-anchor: end; visibility: hidden; font-family: &quot;Helvetica Neue&quot;, sans-serif; font-size: 12px; font-weight: 200;" fill="rgb(50, 49, 63)" stroke="none" stroke-width="1px">-10.0</text>
<text x="0" y="342.72727272727275" dx="0em" dy="0.3em" style="text-anchor: end; visibility: inherit; font-family: &quot;Helvetica Neue&quot;, sans-serif; font-size: 12px; font-weight: 200;" fill="rgb(50, 49, 63)" stroke="none" stroke-width="1px">0.00</text>
<text x="0" y="308.45454545454544" dx="0em" dy="0.3em" style="text-anchor: end; visibility: inherit; font-family: &quot;Helvetica Neue&quot;, sans-serif; font-size: 12px; font-weight: 200;" fill="rgb(50, 49, 63)" stroke="none" stroke-width="1px">10.0</text>
<text x="0" y="274.1818181818182" dx="0em" dy="0.3em" style="text-anchor: end; visibility: inherit; font-family: &quot;Helvetica Neue&quot;, sans-serif; font-size: 12px; font-weight: 200;" fill="rgb(50, 49, 63)" stroke="none" stroke-width="1px">20.0</text>
<text x="0" y="239.9090909090909" dx="0em" dy="0.3em" style="text-anchor: end; visibility: inherit; font-family: &quot;Helvetica Neue&quot;, sans-serif; font-size: 12px; font-weight: 200;" fill="rgb(50, 49, 63)" stroke="none" stroke-width="1px">30.0</text>
<text x="0" y="205.63636363636365" dx="0em" dy="0.3em" style="text-anchor: end; visibility: inherit; font-family: &quot;Helvetica Neue&quot;, sans-serif; font-size: 12px; font-weight: 200;" fill="rgb(50, 49, 63)" stroke="none" stroke-width="1px">40.0</text>
<text x="0" y="171.36363636363637" dx="0em" dy="0.3em" style="text-anchor: end; visibility: inherit; font-family: &quot;Helvetica Neue&quot;, sans-serif; font-size: 12px; font-weight: 200;" fill="rgb(50, 49, 63)" stroke="none" stroke-width="1px">50.0</text>
<text x="0" y="137.0909090909091" dx="0em" dy="0.3em" style="text-anchor: end; visibility: inherit; font-family: &quot;Helvetica Neue&quot;, sans-serif; font-size: 12px; font-weight: 200;" fill="rgb(50, 49, 63)" stroke="none" stroke-width="1px">60.0</text>
<text x="0" y="102.81818181818181" dx="0em" dy="0.3em" style="text-anchor: end; visibility: inherit; font-family: &quot;Helvetica Neue&quot;, sans-serif; font-size: 12px; font-weight: 200;" fill="rgb(50, 49, 63)" stroke="none" stroke-width="1px">70.0</text>
<text x="0" y="68.5454545454545" dx="0em" dy="0.3em" style="text-anchor: end; visibility: inherit; font-family: &quot;Helvetica Neue&quot;, sans-serif; font-size: 12px; font-weight: 200;" fill="rgb(50, 49, 63)" stroke="none" stroke-width="1px">80.0</text>
<text x="0" y="34.27272727272731" dx="0em" dy="0.3em" style="text-anchor: end; visibility: inherit; font-family: &quot;Helvetica Neue&quot;, sans-serif; font-size: 12px; font-weight: 200;" fill="rgb(50, 49, 63)" stroke="none" stroke-width="1px">90.0</text>
<text x="0" y="0" dx="0em" dy="0.3em" style="text-anchor: end; visibility: hidden; font-family: &quot;Helvetica Neue&quot;, sans-serif; font-size: 12px; font-weight: 200;" fill="rgb(50, 49, 63)" stroke="none" stroke-width="1px">100</text>
</g>
<line x1="58.515625" y1="0" x2="58.515625" y2="377" fill="rgb(0, 0, 0)" stroke="rgb(204, 204, 204)" stroke-width="1px">
</line>
</g>
</g>
<g transform="translate(58, 0)" clip-path="url(

[wchargin]

It is interesting that in both your example and this comment on
#1446, the file is clipped at the first instance of url(, even
though these prefixes have different lengths: 5525 bytes in this issue,
4481 bytes for that one.

Both on macOS, though the other poster is on Safari.

[k-zen]

Can you include a screenshot of the chart as you see it in TensorBoard, and if possible the event files that you're loading that data from?

Sure!

Screenshot of TensorBoard when exporting to SVG:

Data file generated by TensorBoardX:
events.out.tfevents.1550871135.lucy.zip

[Flowerfan]

I got the same problem if the tensorboard is launched from remote host, the svg file seems incomplete. It works fine when i start it from my mac. Didn't know why.
Download from mac:

Download from remote ubuntu:

[wchargin]

Looking at the code a little bit, I think that the issue prior to #1601
was that the exported SVG string can include a hash, which is likely
treated as a fragment specifier in the URL, thus truncating the path:

tensorboard/tensorboard/components/vz_line_chart2/line-chart-exporter.ts

Lines 69 to 70 in 23b6bcd

	newNode.setAttribute('transform', `translate(${left}, ${top})`);
	newNode.setAttribute('clip-path', `url(#${clipId})`);

This explains why the OP in this thread and the original reporter
observed an SVG that stopped exactly at clip-path="url(, despite that
the truncation is otherwise unrelated (e.g., at different offsets). This
also explains why #1601 presumably fixes the problem (that pull request
does not have a description or test plan, so it’s hard for me to infer
the full context, but I assume that @stephanwlee was able to reproduce
the problem and confirm that it was fixed after that commit).

I don’t have @Flowerfan’s SVG file, but the “AttValue: ' expected”
message sounds consistent with this hypothesis.

The fix in #1601 did not make it into 1.12.2, which also explains why OP
sees the problem. @k-zen could you try upgrading to 1.13.1 and checking
whether the problem recurs? (Please note that tensorboard>=1.13.0
strictly requires tensorflow>=1.13.0 as well.)

I’ll update the comment in the code make it clearer why the base64
encoding is necessary.

[wchargin]

Simple repro: https://gist.github.com/wchargin/f644d584ddafb19d003d46084c0f80e5

See #1971.

[wchargin]

Ah, @nfelt points out that Firefox’s interpretation is the correct
one; this was a bug in Chrome until Chrome 72. Opening such a truncated
SVG in Chrome 72 gives me exactly the AttError message that @Flowerfan
reports.

[Flowerfan]

TF 1.3 solves the problem. It works fine in Chrome 72. Just tested. Thanks, @wchargin.

[wchargin]

Glad to hear it; thanks for confirming!

[k-zen]

I can confirm. It is solved in TF/TB 1.13.1 when exporting from Chrome 72.0.3626.109. Thanks @wchargin!

[wchargin]

Great; thanks!