Page 1 of 1
SVG and img tag
Posted: Mon Oct 03, 2016 4:46 pm
by caval
In webhelp 17.1 output, SVG images are rendered using the <img> tag rather than the recommended <object> tag. The problem is that if the SVG is edited and effects such as mouseover are added using CSS/scripting, these effects are not supported with the <img> tag. They only render correctly with the <object> tag.
Is it possible to output SVGs to <object> instead.
(I've also confirmed that this behaviour is the same for an early version of the webhelp 18 plugin).
Thanks.
Re: SVG and img tag
Posted: Tue Oct 04, 2016 11:36 am
by Radu
Hi,
I confirm that indeed if the SVG contains animations, using <img> to refer to it will not allow user interaction with the SVG in the web browser.
I will add an issue to study the possibility of using <object> to refer to all SVGs, you will be notified on this thread when the issue is fixed.
I also added an issue on the DITA OT issues list for this:
https://github.com/dita-ot/dita-ot/issues/2496
In the meantime maybe you can create a small DITA OT XHTML customization plugin which for example if you are using DITA OT 2.x would contribute XSLT templates to create <object> from SVG images referenced in DITA, something like:
Code: Select all
<xsl:template match="*[contains(@class, ' topic/image ')][@href]
[ends-with(lower-case(@href), '.svg') or ends-with(lower-case(@href), '.svgz')]" name="topic.image">
<!-- build any pre break indicated by style -->
<xsl:choose>
<xsl:when test="parent::*[contains(@class, ' topic/fig ')][contains(@frame, 'top ')]">
<!-- NOP if there is already a break implied by a parent property -->
</xsl:when>
<xsl:when test="@placement = 'break'">
<br/>
</xsl:when>
</xsl:choose>
<xsl:choose>
<xsl:when test="@placement = 'break'"><!--Align only works for break-->
<xsl:choose>
<xsl:when test="@align = 'left'">
<div class="imageleft">
<xsl:call-template name="topic-svg-image"/>
</div>
</xsl:when>
<xsl:when test="@align = 'right'">
<div class="imageright">
<xsl:call-template name="topic-svg-image"/>
</div>
</xsl:when>
<xsl:when test="@align = 'center'">
<div class="imagecenter">
<xsl:call-template name="topic-svg-image"/>
</div>
</xsl:when>
<xsl:otherwise>
<xsl:call-template name="topic-svg-image"/>
</xsl:otherwise>
</xsl:choose>
</xsl:when>
<xsl:otherwise>
<xsl:call-template name="topic-svg-image"/>
</xsl:otherwise>
</xsl:choose>
<!-- build any post break indicated by style -->
<xsl:if test="not(@placement = 'inline')"><br/></xsl:if>
<!-- image name for review -->
<xsl:if test="$ARTLBL = 'yes'"> [<xsl:value-of select="@href"/>] </xsl:if>
</xsl:template>
<xsl:template name="topic-svg-image">
<xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]" mode="out-of-line"/>
<!-- <object type="image/svg+xml" data="animated.svg" width="100" height="100"></object> -->
<object type="image/svg+xml">
<xsl:call-template name="commonattributes">
<xsl:with-param name="default-output-class">
<xsl:if test="@placement = 'break'"><!--Align only works for break-->
<xsl:choose>
<xsl:when test="@align = 'left'">imageleft</xsl:when>
<xsl:when test="@align = 'right'">imageright</xsl:when>
<xsl:when test="@align = 'center'">imagecenter</xsl:when>
</xsl:choose>
</xsl:if>
</xsl:with-param>
</xsl:call-template>
<xsl:call-template name="setid"/>
<xsl:choose>
<xsl:when test="*[contains(@class, ' topic/longdescref ')]">
<xsl:apply-templates select="*[contains(@class, ' topic/longdescref ')]"/>
</xsl:when>
<xsl:otherwise>
<xsl:apply-templates select="@longdescref"/>
</xsl:otherwise>
</xsl:choose>
<xsl:attribute name="data" select="@href"/>
<xsl:apply-templates select="@height|@width"/>
<xsl:apply-templates select="@scale"/>
<xsl:choose>
<xsl:when test="*[contains(@class, ' topic/alt ')]">
<xsl:apply-templates select="*[contains(@class, ' topic/alt ')]"/>
</xsl:when>
<xsl:when test="@alt">
<xsl:value-of select="@alt"/>
</xsl:when>
</xsl:choose>
</object>
<xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-endprop ')]" mode="out-of-line"/>
</xsl:template>
Regards,
Radu
Re: SVG and img tag
Posted: Wed Nov 16, 2016 11:29 pm
by caval
Thanks very much Radu.
Re: SVG and img tag
Posted: Tue Feb 12, 2019 2:53 pm
by Radu
Hi,
Just to update this thread I created a DITA Open Toolkit plugin which might help with this use case:
https://github.com/raducoravu/dita-embe ... l-imageref
Regards,
Radu