Page 1 of 1
Mapping DITA <image> to WebHelp <img>
Posted: Mon Dec 02, 2013 3:04 pm
by 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?
Re: Mapping DITA <image> to WebHelp <img>
Posted: Mon Dec 02, 2013 4:10 pm
by 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:
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
Re: Mapping DITA <image> to WebHelp <img>
Posted: Tue Dec 03, 2013 2:16 pm
by 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>.
Re: Mapping DITA <image> to WebHelp <img>
Posted: Tue Dec 03, 2013 4:35 pm
by 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
Re: Mapping DITA <image> to WebHelp <img>
Posted: Tue Feb 17, 2015 1:44 pm
by 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
Re: Mapping DITA <image> to WebHelp <img>
Posted: Tue Feb 17, 2015 4:30 pm
by 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:
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.