Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Next challenges

Recent achievements

  • Global
  • Personal

Recognition

  • Give kudos
  • Received
  • Given

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

image preview does not work for SVG

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:

svg_preview_screenshot.png

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?

2 answers

1 accepted

0 votes
Answer accepted

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.

1 vote

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:

Screenshot 2019-09-11 at 21.38.45.png

Screenshot 2019-09-11 at 21.39.50.png

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

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Posted in Confluence

What do you think is the most *delightful* Confluence feature? Comment for a prize!

- Create your own custom emoji 🔥 - "Shake for Feedback" on mobile 📱 - An endless supply of GIFs via GIPHY 🤩 Is there anything quite as nice as a pleasant surprise? Comment below with what...

463 views 24 9
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you