SVG in Confluence?
Asked by Guenter Huber:

All I see is outdated. (around 2006)

We have a requirement to display SVGs.

Any insights?

Thx  
G.


Answers:
author: Guenter Huber
body: \<sarcasm\>  
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.  
\</sarcasm\>

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 #if($paramSVGwidth) #set($width=$paramSVGwidth) #else #set($width=640) #end #if($paramSVGheight) #set($height=$paramSVGheight) #else #set($height=480) #end <embed class="SVG" name="SVG" width="$width" height="$height" src="${config.getDomainName()}/download/attachments/${content.getIdAsString()}/${paramSVGattachmentName}"> ``` |


author: Akash p
body: Nothing has worked so far, so maybe we have abandoned the idea of using SVG. If you're on WordPress you can [add SVG to WordPress by this method.](https://www.mediumtalk.net/how-to-add-svg-to-wordpress/)


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. In case your are interested: <https://marketplace.atlassian.com/plugins/de.edrup.confluence.plugins.svg-out>


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

(see also [](/questions/222794/serve-svg-inline-in-confluence)<https://answers.atlassian.com/questions/222794/serve-svg-inline-in-confluence>)

comments: author: Adolfo Casari
body: Do you know how to enable pan and zoom of the SVG image?


author: AndreasS
body: 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)?


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


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


author: Adolfo Casari
body: 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?


author: AndreasS
body: sorry, I don't have an idea, currently ...


author: Gavin Johnson
body: SVG should not be a mystery. Anyone looking into the history of W3C will see that they accomplished three great things: HTML, CSS and SVG. Looking at the RFC for SVG the standard talks (admirably) about the need for a computer graphics system that enables low-budget computer users to participate in the Internet.

I cannot understand why any organisation would want to make it difficult to embed an SVG in a WEB PAGE. What is the problem? All the code for rendering SVG is already out-there. Every Browser SUPPORTS IT ALREADY. What is the problem? If you want ANYONE to use your software then do ONE THING. Start by supporting the standards that gave YOUR ORGANISATION the platform (YES THE INTERNET) to even exist. WHAT IS THE PROBLEM? Do you think that support non-resizable rasterised images will help you make money? WHAT IS YOUR PROBLEM with supporting SVG the default de factor format for rendering graphical non-photographic imagery since DAY ONE. Are you actually even listening?


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


author: JohnA
body: 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: <https://confluence.atlassian.com/display/DISC/SVG+Image+User+Macro>

You might find the following document useful if you are intending to upgrade user macros to from 3.x to 4.x compatibility: <https://developer.atlassian.com/display/CONFDEV/Upgrading+and+Migrating+an+Existing+Confluence+Macro+to+4.0>

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,  
John

comments: author: Guenter Huber
body: 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?


Tags: svg