Page 1 of 1

SVG processing in HTML webhelp

Posted: Mon Jun 19, 2017 11:01 pm
by urbanrobots

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?


Re: SVG processing in HTML webhelp

Posted: Mon Jun 26, 2017 3:45 pm
by 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:

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.


Re: SVG processing in HTML webhelp

Posted: Wed Nov 15, 2017 10:41 pm
by 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">
                &lt;?xml version="1.0" encoding="UTF-8"?&gt;
                &lt;?xml-stylesheet type="text/css" href="../oxygen-webhelp/resources/skins/skin.css"?&gt;
        <replace dir="${output.dir}/help_files/images" value="${style_text}">
            <include name="**/*.svg"/>
            <replacetoken>&lt;?xml version="1.0" encoding="UTF-8"?&gt;</replacetoken>

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

Re: SVG processing in HTML webhelp

Posted: Thu Nov 16, 2017 10:12 am
by Radu
Hi Nick,

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