Mapping DITA <image> to WebHelp <img>

burbles
Posts: 37

Mapping DITA <image> to WebHelp <img>

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

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

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

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

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

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

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

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

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

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

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

Return to “DITA (Editing and Publishing DITA Content)”

Who is online

Users browsing this forum: No registered users and 1 guest