Mapping DITA <image> to WebHelp <img>

[burbles]

I have a link to an SVG file using the <image> element:
<image href="images/linktographic2.svg" width="60" alt="Display graphics for gentext"/>

When I transform using standard WebHelp scenario, the resulting HTML markup is:
<embed class="image" src="images/linktographic2.svg" width="60">

I need the output to be similar to:
<img src="images/linktographic2.svg" width="60">

Can I change a specific parameter to generate <img> instead of <embed>, or is this handled by a stylesheet customization?

[sorin_ristache]

Hello,

You need an XSLT stylesheet customization for that. The template where the <img> and <embed> elements are created is located in file [Oxygen-install-dir]\frameworks\dita\DITA-OT\xsl\xslhtml\dita2htmlImpl.xsl and is called:

Code: Select all

<xsl:template name="topic-image">

In this template you can force the <img> element for SVG images instead of <embed> by modifying the isSVG variable, for example by replacing the element that creates this variable with the following one in the above mentioned template:

Code: Select all

  <xsl:variable name="isSVG" select="false()"/>

For the DITA Webhelp transformation you should make this modification in a copy of this "topic-image" template that overrides the default one (from the file dita2htmlImpl.xsl) and that you should add in the file [Oxygen-install-dir]\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\xsl\dita\dita2webhelp.xsl.


Regards,
Sorin

[burbles]

Thanks Sorin. For the record, using <img> for SVG is preferable to <embed>. I experimented with both elements where I'd put a hyperlink on an SVG icon. For WebHelp and WebHelp Mobile, only the top half of the SVG was rendered with <embed> and the hyperlink didn't work. With <img>, the entire SVG icon is visible and linking works as expected.
Perhaps given that SVG is appearing more in technical documentation, there could be a parameter setting added for WebHelp transformation scenarious to select either <img> or <embed>.

[sorin_ristache]

The <embed> element was necessary for SVG images because older versions of the main browsers could not render SVG images included with <img> correctly. That is no longer true in recent versions so you are correct, <img> should be used now for SVG images too.

I added an issue to the DITA-OT project. I already patched the DITA-OT code so that starting with the next version of Oxygen the SVG images will be transformed to <img> insteead of <embed>.


Regards,
Sorin

[nagang]

Hi,

We are customizing the DITA-OT X2HTML output to support SVG images, but we do not know which class we have to extend:

Code: Select all

<xsl:template match="*[contains(@class,' topic/image')]/@href">

We have added support for eps using the above template, Can you please tell me which template has to be extended for svg?


Regards,
Navaneetha

[sorin_ristache]

SVG images are already supported in the DITA XHTML transformation. That means you don't have to do anything to support them because DITA-OT comes with built-in SVG support. Just insert a SVG image in your DITA XML topic file, for example:

Code: Select all

<image href="images/shapes.svg"/>

and run the DITA XHTML transformation on the DITA map. The SVG image will be included in the XHTML output page and the .svg file will be automatically copied to the output directory together with the XHTML files.