SVG in Confluence?

All I see is outdated. (around 2006)

We have a requirement to display SVGs.

Any insights?


5 answers

1 accepted

So I finally found parameter metatag descriptions on the templates page (Do I really need to know templates first? Normally not. Here: yes!)
The description is not great, but somehow you find out that you need to CONCATENATE param and the parameter name...

Found out that I don t need to build a plugin. In the beginning the distinction between plugin and macro is hard to find.

OK, here is a first version that works with 4.x, because there are metadata for parameters (with meaningful names) now.
AFAI saw scaling (SVG s actual strength) doesn t work (yet). Height and width crop. Needa check this out.

Most browsers support SVG natively now, so SVGs showed on Firefox 16, IE 9 and Chrome 23.

## @param SVGattachmentName:type=string|required=true
## @param SVGwidth:type=int
## @param SVGheight:type=int
<embed class="SVG" name="SVG" width="$width" height="$height" src="${config.getDomainName()}/download/attachments/${content.getIdAsString()}/${paramSVGattachmentName}">

Hi G,

I believe the only way to embed Scalable Vector Graphics in Confluence is to use a User Macro as this fucntionality isn't available in the default Confluence install. There is a User Macro listed in this document, although I suspect you would need to update it to make it compatible with newer versions of Confluence:

You might find the following document useful if you are intending to upgrade user macros to from 3.x to 4.x compatibility:

However, can I suggest that if you do upgrade the SVG macro that you then make it available to the community to save the next person who needs it from also having to go through the process of upgrading the macro again.

All the best,

Thanks, but do you really suggest that I set up a Java dev environment, wade through the SDK,... when I can t even find docs on User Macro parameters here?

've just achieved this by saving the visio diagram as a web page based upon svg (publish - advanced). That creates a <filename>_svg_1.svg file which I attach to confluence and then embed into the same confluence page using the iframe macro. Job done.

You also need to tick the Details (shape data) tick box to get the hyperlinked imagemap functionality created in visio.

You can patch Confluence to show an SVG by

  1. Add the line
    image/svg+xml svg svgz
    to the file
  2. Restart Confluence
  3. attach the image using

    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).

(see also

Do you know how to enable pan and zoom of the SVG image?

  1. You can use the zoom functionality with your browser and the SVG automatically resizes. Did you mean that? (tried with Firefox and Chrome)
  2. I am sorry but I don't know what you mean with pan (maybe panaroma)?

The image is displayed in confluence (with !image.svg) , but zoom and panning don't work (panning means move the image in the canvas with the cursor). I am using Chrome, installed an extension that allows zooming and panning, other svg works correctly but the one in confluence not.

If I drag and drop image.svg from the disk on Chrome then zooming and panning works OK.

If I add the image as an attachemnt and click the link , it downloads the the svg.

What do you mean with the zoom functionality of your browser? CTRL+/- ? This resizes the whole page.

Hi Adolfo,

OK, now I got what you mean but I have unfortunately no solution for it!

You can use Chrome developer tools to compare the html produced by Confluence (not working) and a working SVG by clicking right mouse button on the image and use "inspect".

I meant CTRL+/- to resize the whole page which is not what you want ...

Thanks. I found the problem:

Confluence set the attribute Content-Disposition:attachment to the HTTP response for the request for the svg file. It should be Content-Disposition:inline or simply not have that attribute.

(Content-Type= image/svg+xml)

Any idea how to fix this?

sorry, I don't have an idea, currently ...

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. In case your are interested:

Suggest an answer

Log in or Sign up to answer
How to earn badges on the Atlassian Community

How to earn badges on the Atlassian Community

Badges are a great way to show off community activity, whether you’re a newbie or a Champion.

Learn more
Community showcase
Published Thursday in Confluence

Three common content challenges + how to manage them

An efficient enterprise content management system, or ECM, is a must-have for companies that create work online (cough   cough, all companies). If content calendars, marketing plans, and bu...

97 views 0 6
Read article

Atlassian User Groups

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

Find a group

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

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you