svg-container doesn't an external image reference

Post here questions and problems related to editing and publishing DITA content.
gbv34
Posts: 105
Joined: Thu Jan 20, 2022 12:36 pm

svg-container doesn't an external image reference

Post by 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 (46.13 KiB) Viewed 1654 times
image.png
image.png (43.81 KiB) Viewed 1654 times

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?
------
Gaspard
Radu
Posts: 8991
Joined: Fri Jul 09, 2004 5:18 pm

Re: svg-container doesn't an external image reference

Post by 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
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
gbv34
Posts: 105
Joined: Thu Jan 20, 2022 12:36 pm

Re: svg-container doesn't an external image reference

Post by 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?
------
Gaspard
Radu
Posts: 8991
Joined: Fri Jul 09, 2004 5:18 pm

Re: svg-container doesn't an external image reference

Post by 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
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
gbv34
Posts: 105
Joined: Thu Jan 20, 2022 12:36 pm

Re: svg-container doesn't an external image reference

Post by gbv34 »

Thank you, Radu!
I looked at the link, does it mean that the feature is already developed but still pending approval?
------
Gaspard
Radu
Posts: 8991
Joined: Fri Jul 09, 2004 5:18 pm

Re: svg-container doesn't an external image reference

Post by 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
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
chrispitude
Posts: 907
Joined: Thu May 02, 2019 2:32 pm

Re: svg-container doesn't an external image reference

Post by 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
Posts: 8991
Joined: Fri Jul 09, 2004 5:18 pm

Re: svg-container doesn't an external image reference

Post by 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
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
chrispitude
Posts: 907
Joined: Thu May 02, 2019 2:32 pm

Re: svg-container doesn't an external image reference

Post by 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
Posts: 907
Joined: Thu May 02, 2019 2:32 pm

Re: svg-container doesn't an external image reference

Post by 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
(160.18 KiB) Downloaded 245 times

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
Posts: 907
Joined: Thu May 02, 2019 2:32 pm

Re: svg-container doesn't an external image reference

Post by 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
image.png (19.26 KiB) Viewed 1189 times

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

image.png
image.png (11.61 KiB) Viewed 1189 times

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
(10.13 KiB) Downloaded 252 times
Radu
Posts: 8991
Joined: Fri Jul 09, 2004 5:18 pm

Re: svg-container doesn't an external image reference

Post by 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
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
easirois
Posts: 11
Joined: Thu Feb 04, 2010 10:37 pm

Re: svg-container doesn't an external image reference

Post by 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
image.png (10.15 KiB) Viewed 939 times
Post Reply