Some text on svg image doesn't appear

[JmyL]

The name of each node on svg diagram doen't apear on pdf output like below.

It works well on html.

SVG file: mermaid test.zip
This SVG file is generated with asciidoctor-diagram.
The ource of mermaid diagram is on below.

["mermaid", "mermaid test", "svg"]
------------------------------------------------------------
sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!
------------------------------------------------------------

[mojavelinux]

Very likely you are hitting the scenario described in mogest/prawn-svg#77. A fix has been committed. We're waiting on a new release of prawn-svg.

[mojavelinux]

My previous comment was misleading. This seems to be a style inheritance bug in prawn-svg. The fill property on the actor class is being inherited by the <text> element, so the background and the font color are the same. You can see this by highlighting the box with the mouse. The text is there, it just isn't being colored correctly. The fill property on is not overriding the value from the parent.

I can fix this by changing the text.actor selector to .actor-text and changing the class on <text> to actor-text. That proves to me there is some sort of property inheritance bug here. This needs to be addressed upstream in prawn-svg.

[JmyL]

Thx Dan, you're right. The text is there!

I'm now using 'img' type as alternative for mermaid script. it's not so bad ;)

[mojavelinux]

We should still pursue this problem upstream. Would you be willing to create an issue in prawn-svg for it?

[JmyL]

Sure. But plz review it ;) I'll mention this issue on there.

[JensN4]

I have a similar problem with SVG files, but in my case it is a line decorator (svg attribute "marker-end") which is not drawn correctly. I have attached a minimal example (svg inside zip), created by OmniGraffle. I tried this svg with prawn-svg-0.25.1 and there it worked. Looks as if asciidoctor is still using an older version, that is prawn-svg-0.21.0, is that correct?

So, when running

require 'rubygems'
require 'prawn'
require 'prawn-svg'

Prawn::Document.generate("arrow.pdf") do |pdf|
  pdf.svg File.read("arrow.svg"), :at => [0, 600], :width => 500
end

the arrow decorator is rendered correctly,

with

image::arrow.svg[]

and asciidoctor pdf Asciidoctor PDF 1.5.0.alpha.11 using Asciidoctor 1.5.4 the arrow decorator is gone.

Unfortunately I'm not a ruby programmer, otherwise I would have tried asciidoctor-pdf with the latest prawn-svg version...

Which version of prawn-svg is used by asciidoctor?

arrow.svg.zip

[JensN4]

Ah: When I enforce asciidoctor-pdf to use the prawn-svg 0.25.1 is is working.
(by "enforce" I mean: copying prawn-svg 0.25.1 to prawn-svg 0.21.0 in gems)

When will this be available in the installable asciidoctor-pdf version?
gem install asciidoctor-pdf --pre
installs 1.5.0.alpha.11. Is there a way to install the alpha.12 already (Sorry, I'm really no ruby guy)

[mojavelinux]

I'm in the process of getting alpha.12 released.

[mojavelinux]

I've filed the bug regarding the text color upstream as mogest/prawn-svg#79. We'll have to wait for that to be resolved before it can be fixed in Asciidoctor PDF.

[mojavelinux]

This is working as of prawn-svg 0.29.1 and will be included in the next release.

[andrea-ligios]

Hi @mojavelinux, I don't think this is solved.

While it works great on sequenceDiagram now, the same error keep happening on Graphs:

[mermaid, "mermaid test", "svg", width="200"]
----
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
----

PDF embedding mermaid test.svg:

mermaid test.svg opened in a browser:

[mojavelinux]

Please direct issues with SVG rendering to prawn-svg. Asciidoctor PDF doesn't render SVG images itself. It just delegates to prawn-svg.

…

[Timmmm]

Just in case anyone is reading this and doesn't want to dig through issues. This is because Mermaid (and Draw.io annoyingly) do test as an embedded HTML <foreignObject> and prawn-svg which Asciidoctor uses to convert SVG to PNG does not support rendering arbitrary HTML.

For example if you do this in Draw.io

It will save this SVG:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than diagrams.net -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
    width="61px" height="31px" viewBox="-0.5 -0.5 61 31"
    content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2023-02-09T12:20:59.269Z&quot; agent=&quot;5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/20.7.4 Chrome/106.0.5249.199 Electron/21.3.3 Safari/537.36&quot; version=&quot;20.7.4&quot; etag=&quot;CYLFFERl87ladrg8Chvh&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;CKRxA2FX2boDS_Xe4wyr&quot; name=&quot;Page-1&quot;&gt;jZNLc4IwEIB/DcfOEGgVj8Vae+mlONNeU7KSTANhQhT013cjC0gdZ3qBzbev7CNBvC67reW1fDcCdBCFogvilyCKGGOP+PPkNJDlsieFVYLYBDJ1BoIh0YMS0MwMnTHaqXoOc1NVkLsZ49aadm62N3qeteYF3IAs5/qWfirhZE+TaDnxN1CFHDKzxarXlHwwpkoayYVpr1C8CeK1Ncb1UtmtQfvuDX3p/V7vaMeLWajcfxy255107GOThVmSpAq+HjP2QFGOXB+o4J1UjffynyBaaIydfqNQXATfPoKYaeRUoTsNbXPQeS5dqREwFBtnzQ+sjTYWSWUqtEz3Sus/iGtVVHjMsSxAnh7BOoUDeSZFqYTwadJWKgdZzXOfs8X9Q2bNoRLgKw7Ha/kA0N3tGhtngVsMpgRnT2hCDnFC46MFflrRuZ22YUFIXi1CTIzT/hVj5GlEKNCUhuO0DRfd1aOKN78=&lt;/diagram&gt;&lt;/mxfile&gt;">
    <defs />
    <g>
        <rect x="0" y="0" width="60" height="30" fill="none" stroke="none" pointer-events="all" />
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%"
                    requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
                    style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml"
                        style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 15px; margin-left: 1px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); "
                            style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div
                                style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">This
                                is <b>bold</b></div>
                        </div>
                    </div>
                </foreignObject>
                <text x="30" y="19" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px"
                    text-anchor="middle">This is bo...</text>
            </switch>
        </g>
    </g>
    <switch>
        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" />
        <a transform="translate(0,-5)"
            xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
            <text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot
                display</text>
        </a>
    </switch>
</svg>

And it comes out like this:

As you can see it uses a requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" check (which checks for support for foreignObject and if it isn't supported it falls back to This is bo... text, and also puts a (pretty confusing) Text is not SVG - cannot display message in there.

I don't think any standard SVG to PDF converteds will be able to support foreignObject. I tried svg2pdf and I just got a blank page. Here is an issue where someone is running into the same problem with Mermaid and rsvg-convert.

I think the only solution (apart from improving Mermaid and Draw.io to output pure SVG) is to use headless Chrome to convert the SVG to PDF (something like this script). Unfortunately Asciidoctor doesn't support embedding PDFs as images - only as full pages - so you will then have to convert back to SVG.

I haven't tried it yet though.

[mojavelinux]

Also related to: asciidoctor/asciidoctor-diagram#398 (comment)