svg-container doesn't an external image reference

[gbv34]

Hello,

I have a project which uses the following declaration to embed svgs containing an image, text and drawn symbols.
However, it seems that the <svg:image> reference is not correctly interpreted when publishing to HTML. As shown in the screenshot below, the preview in Oxygen works well though. But the image reference is missing in the publication (second screenshot).

Code: Select all

<svg-container class="+ topic/foreign svg-d/svg-container ">
                                <svg:svg xmlns:svg="http://www.w3.org/2000/svg" height="479"
                                    id="svgcontent" overflow="visible" viewBox="0 0 604 479"
                                    width="604" x="604" y="479">
                                    <svg:g class="layer" style="pointer-events:all">
                                        <svg:title style="pointer-events:inherit">Layer
                                            1</svg:title>
                                        <svg:image xmlns:xlink="http://www.w3.org/1999/xlink"
                                            height="479"
                                            id="svg_02d16585-53f9-433a-aaae-bcc4396f256a"
                                            style="pointer-events:inherit" width="604"
                                            xlink:actuate="onLoad" xlink:show="embed"
                                            xlink:type="simple"
                                            xlink:href="../../../../_common/images/image_k8s_master_worker_pod.png"/>
                                        <svg:g id="svg_4" style="pointer-events:inherit">
                                            <svg:rect fill="none" height="46" id="svg_6"
                                                style="pointer-events:inherit" width="76" x="493"
                                                y="232"/>
                                            <svg:path
                                                d="M493,255L517,250.5A15,15 0 1 1 517,259.5L493,255z"
                                                fill="white" id="svg_7" stroke="#E65F26"
                                                stroke-width="3" style="pointer-events:inherit"/>
                                        </svg:g>
                                        <svg:text fill="black" font-size="14pt" id="svg-2"
                                            style="pointer-events:inherit" x="525" y="262">DUMMY
                                            TEXT HERE</svg:text>
                                    </svg:g>
                                </svg:svg>
                            </svg-container>

image.png

image.png

I've found this discussion : https://groups.google.com/g/dita-ot-users/c/9O-LtpmhV-g where Radu and Elliot provide some tips, notably the possibility to use a keyref for the image. However, I can't use a key ref in the element <svg:image>

So I feel stuck right now. Any idea or recommendation?

[Radu]

Hi,

So your embedded SVG contains inside a reference to a binary PNG image, right?

Code: Select all

 <svg:image xmlns:xlink="http://www.w3.org/1999/xlink"
                                            height="479"
                                            id="svg_02d16585-53f9-433a-aaae-bcc4396f256a"
                                            style="pointer-events:inherit" width="604"
                                            xlink:actuate="onLoad" xlink:show="embed"
                                            xlink:type="simple"
                                            xlink:href="../../../../_common/images/image_k8s_master_worker_pod.png"/>

After publishing to HTML, if you look in the output HTML files folder, is that "mage_k8s_master_worker_pod.png" present there?
I would assume that it is not as the publishing engine does not copy it to the output folder automatically.
If you refer in your main DITA Map or in a submap to the binary image something like:

Code: Select all

<topicref href="_common/images/image_k8s_master_worker_pod.png" format="png" processing-role="resource-only"/>

the publishing engine should copy the PNG image to the output files folder when publishing.

Regards,
Radu

[gbv34]

Hi Radu!
Indeed, when referencing the image in the map with the attribute "resource-only", the resource is copied and correctly displayed.
From what I understand, because the image reference is included in a SVG:container, it is not copied by default when publishing, because it is not considered as a DITA resource.
Do you think there would be a workaround without declaring all the images as references?

[Radu]

Hi,

There is no other workaround right now, there was an attempt (not finalized) to make the publishing engine automatically detect such links and copy the images to the output folder, I added an extra comment to it:

https://github.com/dita-ot/dita-ot/pull ... 1114522847

Regards,
Radu

[gbv34]

Thank you, Radu!
I looked at the link, does it mean that the feature is already developed but still pending approval?

[Radu]

Hi,

It's an old opened pull request meaning it was a proposed code change which was not merged in the current code.

Regards,
Radu

[chrispitude]

Hi Radu, gbv34,

We would find this feature useful as well. I replied to the DITA-OT pull request to add my support for it.

In the meantime, hopefully the Inkscape folks can also fix this issue, which makes the Batik SVG renderer unhappy:

Inkscape issue #7814: Cannot prevent arrowheads from using `orient="auto-start-reverse"`

[Radu]

Hi Chris,

The current alternative of having maybe a separate submap which has topicrefs with processing-role=resource-only to all images referenced inside the SVG does not seem that bad to me.
About the Inkscape bug, they seem to have accepted it as such, if not you can let us know and maybe we can try to patch the Batik libraries.

Regards,
Radu

[chrispitude]

Hi Radu,

For the arrowhead bug, Inkscape reopened the issue in a different category here:

Inkscape #3935: Cannot prevent arrowheads from using `orient="auto-start-reverse"`

so hopefully there will be a proper fix without the need to patch Batik to handle something noncompliant.

The workaround of using resource-only references to copy the images is quite reasonable! I will try it out for both PDF Chemistry and WebHelp. The ability to overlay structured drawing captions over bitmap images is one area where FrameMaker is superior. It would be nice for the DITA toolchain to improve its capability in this area.

[chrispitude]

I created a testcase that tests various types of PNG references from SVG images:

• <image> SVG file reference to PNG file on disk
• <svg-container> embedded SVG reference to PNG file on disk
• <image> SVG file reference to base64-encoded PNG
• <svg-container> embedded SVG reference to base64-encoded PNG

Here is the testcase:

dita_svg_image_links.zip

Publish the "project.xml" file to test all transformation types.

Here are the results (using Oxygen 2022110706 with Batik 1.16):

• The Oxygen editor displays all SVG-to-PNG reference types correctly.
• In all transformation types, base64-encoded PNGs were the only format that always published correctly.
• In HTML5 outputs, the "resource-only" workaround was required, and <svg-container> worked but <image> did not work.
• In XSL-FO PDF outputs, the "resource-only" workaround was required, and <image> worked but <svg-container> did not work.
• In PDF Chemistry, only base64-encoded PNGs worked.

[chrispitude]

For me, the most troubling finding is that browsers do not display PNG files referenced by SVG files referenced in HTML files (or I am doing something wrong).

For example, I tried out the example here:

SVG: Scalable Vector Graphics > SVG element reference > <image> > Example

in which the SVG file is as follows:

Code: Select all

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect height="200" width="200" style="fill:none;stroke:red;stroke-width:5px" />
  <image xlink:href="mdn_logo_only_color.png" href="mdn_logo_only_color.png" height="200" width="200" />
</svg>

and the HTML referencing it is as follows:

Code: Select all

<html>
 <body>
  <p>line</p>
  <img src="test.svg"/>
  <p>line</p>
 </body>
</html>

If I open the SVG file in Chrome, the PNG file displays correctly:

image.png

but if I open the HTML file in Chrome, the PNG file does not display:

image.png

Firefox, Chrome, Edge, and Internet Explorer all behave this way.

Hopefully I'm just doing something wrong, as the SVG spec implies that this should work. The whole point in referencing PNG files from SVG images was to leave the PNG bitmaps in their natively space-efficient form instead of base64-encoding them.

Testcase:

browser_svg_linked_image_bug.zip

[Radu]

Hi Chris,

How about if you embed the SVG inside the HTML file instead of referencing to it?
We have this DITA OT plugin which embeds in the generated HTML SVG files referenced in the DITA topic:
https://github.com/oxygenxml/dita-embed-html-mathml-svg

Regards,
Radu

[easirois]

Hi,
The following markup works for me in the test.html file. We have a bunch of clients that have 'interactive' svg files and using object is the only way the get them working in a web browser.

<img src="test.svg"/>
<object type="image/svg+xml" data="test.svg">
<!-- Your fall back here -->
<img src="test.svg" />
</object>

image.png