Including SVG inline in html5 output?

[Graham Hannington]

In DITA topics, I want to refer to diagrams that are stored in external SVG files.

When I use DITA-OT to transform those DITA topics into HTML5, I want the contents of those SVG files to be inline in the HTML, as opposed to being referred to by HTML img elements.

For example, rather than using the DITA image element, resulting in an img element in the HTML output, I want to use, say, the DITA svg-container element with an svgref child element, resulting an svg element in the HTML output

Given time, I could probably write the XSLT myself to do this: that is, to replace that combination of DITA elements in the source with the contents of the SVG file in the output.

However, it seems to me that this is a common use case. I strongly suspect I'm missing something. (How) can I do this with out-of-the-box latest DITA OT?

(Aside: is there a way to markup inline phrases - for example, XML element names, preferably with enclosing brackets - in this forum, so that they are rendered in monospaced font?)

[Radu]

Hi Graham,

However, it seems to me that this is a common use case. I strongly suspect I'm missing something. (How) can I do this with out-of-the-box latest DITA OT?

This is not supported out of the box in the DITA OT. Maybe you can install this extra plugin I created some time ago:

https://github.com/oxygenxml/dita-embed-html-mathml-svg

(Aside: is there a way to markup inline phrases - for example, XML element names, preferably with enclosing brackets - in this forum, so that they are rendered in monospaced font?)

Unfortunately not, I will add an issue for our web admin to look into this.

Regards,
Radu

[Graham Hannington]

Hi Radu,

Thanks very much for the reply and the link to your plugin. While that plugin doesn't do what I want—include SVG inline in the HTML—and in the proprietary context of my use case, I can't use a "plugin" as such—I need to define an "XSLT override"—the plugin contains a lot of XSLT that I can reuse in such an override. In fact, I think it would be simple to rearrange that XSLT to do what I need. For example, instead of an object element for SVG, I can reuse the code that your plugin uses to inline MathML:

Code: Select all

<xsl:when test="doc-available($imageOriginalLocation)">
    <xsl:copy-of select="document($imageOriginalLocation)"/>
</xsl:when>

I am disappointed that there is no out-of-the-box support in DITA OT to inline SVG in HTML output.

I'd be happy to be shown I'm wrong, but I believe that SVG files referred to by HTML img elements must embed their own custom (non-"web-safe") fonts; they can't refer to a web font via an external URL. I'd prefer not to have to use Nano or similar tool/technique to embed custom fonts in every SVG. That seems inefficient, or at least (depending on the compression achieved by such a tool) inelegant, compared to inlining the SVG. However, I acknowledge, as the Nano developers point out, that inlining SVG has its own problems. In the short term, I'll probably end up embedding fonts using an open-source solution such as svg-buddy.

[Graham Hannington]

Hi Radu,

I'm revisiting this issue after a couple of years.

And, as you've no doubt noticed by my multiple edits to this post, I've been on a learning curve over the last few days. I realize now that what I thought might be an issue with your plugin is actually my problem . Still, I'm hoping you might be able to help.

I've edited your customXHTML.xsl stylesheet (thanks!) to embed SVG in the HTML. That is, to embed the <svg> element inline in the HTML, rather than refer to it via an <object> element.

To do that, I've commented-out the template that matches .svg, and edited the .mml template (that inlines .mml) to match .svg.

Problem 1 : I'm using an enterprise-proprietary documentation toolchain with an embedded DITA-OT (based on 3.3.4). I don't have the ability to add DITA-OT plugins to that toolchain.

Solution 1: The toolchain allows me to specify an XSL(T) override. That's how I'm using an edited version of your customXHTML.xsl file.

Problem 2: In the context of an XSL override, the following parameter:

<xsl:param name="ditaTempDir"/>

doesn't get passed the value of dita.temp.dir, as it would if I could implement it as a plugin (thanks to localFunctionsParams.xml).

So, my DITA-OT 3.3.4 log shows the error:

[pipeline] I/O error reported by XML parser processing file:/.job.xml: /.job.xml (No such file or directory)

because that param is resolving to an empty string.

I understand that this is my problem (because I'm using an XSL override), not your problem (not an issue with the plugin).

Solution 2: Hardcoding the directory path in the XSLT as the value of the ditaTempDir param works (excellent! the SVG is inline!).

Problem 3: Hardcoding the path is a brittle solution (that tempdir might change; it's out of my control).

Solution 3: None so far.

Question: (How) can I pass that dita.temp.dir path to the ditaTempDir parameter in the XSL override?

That is, without:

• Hardcoding "/actual/path/masked/for/privacy/tmp" as the parameter value in the XSLT stylesheet

• Installing a plugin

I've searched the plugins supplied out-of-the-box with DITA-OT 3.3.4, and some of them also define the ditaTempDir param with the dita.temp.dir path, but, in the context of my XSL override, that value is not getting passed.

Regards,
Graham Hannington