SVG and img tag

[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.

[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

[caval]

Thanks very much Radu.

[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