SVG processing in HTML webhelp

[urbanrobots]

hello!

We'd like to add a CSS @import statement in SVG files to reference the skin.css files used in the HTML output. Can this be accomplished by updating templates in the Oxygen Webhelp plugin or should we look into DITA-OT file processing logic?

Thanks,
Nick

[Radu]

Hi Nick,

Sorry about the delay, we do not have any special support for this on the WebHelp plugin side.
Maybe you could add some extra ANT processing to add in every SVG file the reference to the CSS:

https://ant.apache.org/manual/Tasks/replace.html

or somehow in the DITA OT ANT build stage apply an XSLT over each SVG which changes it and inserts the reference to the CSS.

Regards,
Radu

[urbanrobots]

Hi Radu,
Thank you! That worked very well.

We added a new target to plugin.xml and defined it in build_common.xml.

The target looks for the XML declaration of SVG files and then appends an XML stylesheet with a link to skin.css.

Code: Select all

<target name="fix-svgs">

        <property name="style_text">

                <?xml version="1.0" encoding="UTF-8"?> 

                <?xml-stylesheet type="text/css" href="../oxygen-webhelp/resources/skins/skin.css"?> 

        </property>

        <replace dir="${output.dir}/help_files/images" value="${style_text}">

            <include name="**/*.svg"/>

            <replacetoken><?xml version="1.0" encoding="UTF-8"?></replacetoken>

        </replace>

</target>

All of our images render in the same "images" output folder, so inserting the same relative link to skin.css worked fine.

Take care,
- Nick

[Radu]

Hi Nick,

Thanks for sharing the solution, maybe others will find it useful as well.

Regards,
Radu