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

Serve SVG inline in Confluence

Im having trouble displaying SVG on Confluence pages.

The SVG in Confluence has been configured with the MIME type image/svg+xml and included on a page by way of macro:

<embed class="SVG" name="SVG" width="$width" height="$height" src="/download/attachments/${content.getIdAsString()}/${paramSVGattachmentName}" type="image/svg+xml">

However the svg is served with Content-Disposition: attachment, which just promts for a download of the image instead of displaying it.

any ideas?

9 answers

1 accepted

0 votes
Answer accepted

Nothing has worked so far, so we have abandoned the idea of using SVG.

You can patch Confluence to show an SVG by

  1. Add the line
    image/svg+xml svg svgz
    to the file
    /opt/confluence/webapps/ROOT/WEB-INF/classes/mime.types
  2. Restart Confluence
  3. attach the image using
    !&lt;Bildname&gt;

    in Confluence Editor

Unfortunately, to use the two smallest image size reduction buttons or setting a smaller size then 300px does not work with Confluence richtext editor because Confluence tries to create a thumnail on server side which is currently not supported for SVGs (and the Confluence server will return a empty, broken image).

The workaround is to use the free Confluence Source Editor, use button "<>" and set the size of teh SVG to whatever you want (which should be perfectly ok for vector graphics).

Andreas,

We made the change you suggested to our server but step 3 in your example is a little vauge. Can you be a litle more specific on the text to include in the Confluence Editor.

At the risk of necro'ing this thread, the question remained unanswered so I'm providing it here for others (like myself who come across this thread and don't find the answer).

Step 3 Should be: Attach the SVG to the page (don't insert it)

Step 4: When editing the page type ! (shortcut key to insert images) and select the SVG file from the page attachments

You can then interact with the image as you would a JPG or PNG.

0 votes
Davin Studer Community Leader Oct 17, 2013

This might help. It worked for me.

<img class="SVG" name="SVG" width="$width" height="$height" src="/download/attachments/${content.getIdAsString()}/${paramSVGattachmentName}" />

I have tried it out, and it does display the image. However the links embedded in the SVG no longer functions (which I might have neglected to mention that we require). I believe that is because such functionality requires use of the "embed" element.

0 votes
Davin Studer Community Leader Oct 23, 2013

Ok, how about trying this.

<iframe marginheight="$height" marginwidth="$width" frameborder="0" src="/download/attachments/${content.getIdAsString()}/${paramSVGattachmentName}"></iframe>

That did not work either. The result was the same as for my first attempt: The svg was served with Content-Disposition: Attachment.

The Confluence Webserver, TomCat, seems to be the cause. How do I change this behaviour?

0 votes
Davin Studer Community Leader Oct 27, 2013

Hmmm. I got the same thing with the embed as you, but when I used an iframe it worked just fine. Odd. You may need to do some header re-writing. There is a url-rewrite file located below that you can write rules into.

/confluence/WEB-INF/urlrewrite.xml

Davin Studer Community Leader Oct 27, 2013

Here is more info on the urlrewrite module if you need it.

http://www.tuckey.org/urlrewrite/

I know that this discussion is quite old however I ran into a similar problem recently. I was able to see SVGs in Confluence pages but none of the links in the SVG worked. Therefore I wrote a small plugin which closes that gap: https://marketplace.atlassian.com/plugins/de.edrup.confluence.plugins.svg-out

0 votes
Akash p I'm New Here Jun 03, 2019

I believe the only way to embed Scalable Vector Graphics in Confluence is to use a User Macro as this functionality isn't available in the default Confluence to install. 

All the best.

Suggest an answer

Log in or Sign up to answer
Community showcase
Published in Confluence

Confluence Server & Data Center 7.0 is here!

Hello Community 👋🏼 I’m Makisa, a product manager on Confluence Server and Data Center. Confluence Server & Data Center 7.0, our latest platform release, is now available and we wanted to shar...

157 views 0 11
Read article

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