image preview does not work for SVG

[Dan Huber]

I am using Confluence 6.8.1.  We have edited the mime.types files and restarted the Confluence server as described here:

https://community.atlassian.com/t5/Confluence-questions/Serve-SVG-inline-in-Confluence/qaq-p/102496

I can insert an SVG image into a page and have it display correctly as long as I set the size greater than 300px.  But when I click on the image to bring up the previewer, no image is displayed.  The previewer opens, but it just shows a blank gray screen like this:

I need to be able to display many small thumbnails on a page and have the user able to click on them to zoom in.  Why does this not work with SVG?

[Dan Huber · Accepted solution]

Apparently this was a problem with my specific SVG file that had the dimensions specified in percentages:

<svg width="100%" height="100%" ...

This is valid SVG and handled just fine by the browser, but the image previewer doesn't like it.  Modifying the SVG file to specify the width and height in pixels makes it display properly.

[Rafael Pinto Sperafico]

Hi @Dan Huber ,

Here is an example using User Macro, the template one (nothing fancy):

...
Hello, <font color="$paramColour">$paramName</font>!

<p>

  <span class="confluence-embedded-file-wrapper conf-macro output-inline" 
    data-hasbody="false" 
    data-macro-name="view-file">

    <a class="confluence-embedded-file" 
      href="/download/attachments/3506180/410.svg?version=1&amp;modificationDate=1568226256013&amp;api=v2" 
      data-nice-type="Image" 
      data-file-src="/download/attachments/3506180/410.svg?version=1&amp;modificationDate=1568226256013&amp;api=v2" 
      data-linked-resource-id="3506190" 
      data-linked-resource-type="attachment" 
      data-linked-resource-container-id="3506180" 
      data-linked-resource-default-alias="410.svg" 
      data-mime-type="image/svg+xml" 
      data-has-thumbnail="false" 
      data-linked-resource-version="1">

      <img src="/download/attachments/3506180/410.svg?version=1&amp;modificationDate=1568226256013&amp;api=v2" 
        height="400" 
        width="400">

      <span class="title">410.svg</span>

    </a>

  </span>

</p>

(i) Please, notice the code above was formatted in such a way for readability reasons. Therefore, it should formatted appropriately.

The SVG in used in this example (410.svg) has been downloaded from https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/

As a result, I have:

Then you could extend the User Macro to get a list of attachments (SVG) in which you want to display in your page.

Hope the above helps.

Kind regards,
Rafael