TYPO3 DCE (Fluid): How to generate an SVG Object instead of an image tag?

Question

Our TYPO3 users (editors) need to exchange / update SVG files to the TYPO3 website. The svg files are clickable, hence the <img> html tag does not work for them. We decided in favour of the <object> tag, with <img> fallback (Do I use <img>, <object>, or <embed> for SVG files?).

The Fluid code for the fronted is easy for generating normal img tags:

<f:layout name="Default" />
<f:section name="main">
 <div class="container">
  <f:for each="{dce:fal(field:'image1', contentObject:contentObject)}" as="fileReference" iteration="iterator">
   <f:if condition="{iterator.isFirst}">
    <f:image src="{fileReference.uid}" alt="" treatIdAsReference="1" />
   </f:if>
  </f:for>
 </div>
</f:section>

However, according to FluidTYPO3 vhs ViewHelper for SVG Images?, I might be able to use fluid code like this:

<img src="{f:uri.image(src: 'uploads/tx_myext/{imgIcon}')}">

which, adapted to object, would be:

<object data="{f:uri.image(src: 'xxx')}" type="image/svg+xml">
  <img src="{f:uri.image(src: 'xxx')}">
</object>

Unfortunately, I have no idea what to provide as src. {fileReference.uid} only inserts the unique id of the file (a number).

How can I convert the file id to the relative or absolute URI of the picture?

Answer 1

I think the viewhelper attribute treatIdAsReference is what you are looking for. f:image as well as f:uri:image can handle Files and FileReferences.

It looks like you have a FileReference, so you should add the attribute with value 1 Here is an example with inline notation:

{f:uri.image(src: '{fileReference.uid}', treatIdAsReference:'1')}

The result of this is the path to your file, it can be used in regular HTML-Tags.