SVG and img tag

Having trouble installing <oXygen/>? Got a bug to report? Post it all here.
caval
Posts: 25

SVG and img tag

Mon Oct 03, 2016 4:46 pm

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
Posts: 5217

Re: SVG and img tag

Tue Oct 04, 2016 11:36 am

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
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
caval
Posts: 25

Re: SVG and img tag

Wed Nov 16, 2016 11:29 pm

Thanks very much Radu.

Return to “Common Problems”

Who is online

Users browsing this forum: No registered users and 3 guests