Mapping DITA <image> to WebHelp <img>

burbles
Posts: 37
Joined: Wed Dec 23, 2009 6:13 am

Mapping DITA <image> to WebHelp <img>

Post by burbles » Mon Dec 02, 2013 3:04 pm

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
Posts: 4144
Joined: Fri Mar 28, 2003 2:12 pm

Re: Mapping DITA <image> to WebHelp <img>

Post by sorin_ristache » Mon Dec 02, 2013 4:10 pm

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
Posts: 37
Joined: Wed Dec 23, 2009 6:13 am

Re: Mapping DITA <image> to WebHelp <img>

Post by burbles » Tue Dec 03, 2013 2:16 pm

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
Posts: 4144
Joined: Fri Mar 28, 2003 2:12 pm

Re: Mapping DITA <image> to WebHelp <img>

Post by sorin_ristache » Tue Dec 03, 2013 4:35 pm

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
Posts: 32
Joined: Mon Jul 14, 2014 9:48 am

Re: Mapping DITA <image> to WebHelp <img>

Post by nagang » Tue Feb 17, 2015 1:44 pm

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
Posts: 4144
Joined: Fri Mar 28, 2003 2:12 pm

Re: Mapping DITA <image> to WebHelp <img>

Post by sorin_ristache » Tue Feb 17, 2015 4:30 pm

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.
Regards,
Sorin

<oXygen/> XML Editor Support

Post Reply