Serve SVG inline in Confluence
Asked by Henning R?igaard:

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?


Answers:
author: Henning R?igaard
body: Nothing has worked so far, so we have abandoned the idea of using SVG.


author: AndreasS
body: 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](https://marketplace.atlassian.com/plugins/com.atlassian.confluence.plugins.editor.confluence-source-editor), use button "\<\>" and set the size of teh SVG to whatever you want (which should be perfectly ok for vector graphics).

comments: author: Dirck Copeland
body: 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.


author: bradley_bristowstagg
body: 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.


author: Akash p
body: 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.


author: Andreas Purde
body: 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>


author: Davin Studer
body: 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

comments: author: Davin Studer
body: Here is more info on the urlrewrite module if you need it.

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


author: Henning R?igaard
body: 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?


author: Davin Studer
body: Ok, how about trying this.

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


author: Henning R?igaard
body: 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.


author: Davin Studer
body: This might help. It worked for me.

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


Tags: image

svg