Including SVG inline in html5 output?

Graham Hannington
Posts: 48
Joined: Mon Jun 13, 2016 11:23 am

Including SVG inline in html5 output?

Post by Graham Hannington » Mon Nov 16, 2020 12:06 pm

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

Re: Including SVG inline in html5 output?

Post by Radu » Mon Nov 16, 2020 12:18 pm

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
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com

Graham Hannington
Posts: 48
Joined: Mon Jun 13, 2016 11:23 am

Re: Including SVG inline in html5 output?

Post by Graham Hannington » Mon Nov 16, 2020 5:22 pm

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.

Post Reply